데이터 프로토콜 URL 크기 제한

데이터 프로토콜 URL 크기 제한

---

"데이터 :"URL 스키마 값에 대한 크기 제한이 있습니까? 인기있는 웹 브라우저의 제한 사항에 관심이 있습니다. 즉, 얼마나 오래 할 수 data:image/jpg;base64,base64_encoded_data있을 <img src="data:image/jpg;base64,base64_encoded_data" />나 background-image: url(data:image/jpg;base64,base64_encoded_data)?

---

웹 브라우저의 제한 사항과 관련하여 MSIE 6/7은 데이터 URL 체계를 지원하지 않습니다. Wikipedia에 대한 추가 정보

길이 제한은 브라우저마다 다릅니다. IE8은 최대 32KB를 허용하고 Opera는 4KB를 허용하지만 다른 브라우저에 대해서는 알 수 없습니다.

---

짧은 대답 : 데이터 URI 제한은 다양합니다.

많은 답변이 있습니다. 질문이 5 년 이상 전에 요청되었으므로 이제 대부분 날짜가 지정되어 부정확하지만이 질문은 "데이터 uri 제한"에 대한 Google 검색 결과의 상단에 있습니다. 이제 데이터 URI가 널리 지원 되며 IE 7/8은 더 이상 관련 브라우저가 아닙니다. 오늘 답변이 미묘하기 때문에 아래에 많은 참고 자료가 있습니다.

데이터 URI 제한

데이터 URI 사양은 크기 제한을 정의하지 않지만 응용 프로그램이 자체적으로 적용 할 수 있다고 말합니다.

• 크롬 - 2메가바이트 현재 문서. 그렇지 않으면 제한은 임의 Blob에 대한 메모리 내 스토리지 제한입니다. x64이고 ChromeOS 또는 Android가 아닌 경우 2GB입니다. 그렇지 않으면 total_physical_memory / 5( 소스 ).
• Firefox- 무제한
• IE ≥ 9 및 Edge- 4GB
• Safari 및 모바일 Safari-?

대안

사용 사례의 대안이 될 수 있는 더 높은 제한 (Chrome의 경우 500MiB) 이 있는 기술 중 하나 는 File API 를 통해 Blob과 함께 URL API를 사용하는 URL.createObjectURL () 을 통한 Blob URL 입니다. 그 예는 URL.createObjectURL () 사용 에서 제공됩니다 .

파일 작성 / 사용자에게 제공하는 방법에서 언급 한 몇 가지 다른 대안 은 FileSaver.js , StreamSaver.js 및 JSZip 입니다.

Modernizr를 사용 하여 32kb 이상의 데이터 URI에 대한 지원을 감지 할 수 있습니다 .

관련 질문

이 답변은이 질문과 거의 동일하지만 각 질문을 읽는 시간을 절약하기 위해 언급합니다.

• Javascript에서 최대 Data-Uri 크기 가져 오기
• 데이터 URI가 너무 큰 경우 "앗, 이런"
• Base64 DataURL 이미지의 크기 제한은 얼마입니까?
• 다른 브라우저에서 URL의 최대 길이는 얼마입니까? 이 질문은 데이터 URI가 아니라 URL에 관한 것이지만 데이터 URI에 대한 관련 답변과 의견이 있습니다.
• 데이터 URL의 크기 제한을 프로그래밍 방식으로 감지 할 수 있습니까?

---

방금 3,844에서 2,233,076 바이트 크기에 이르는 8 개의 다른 Jpeg 이미지를 포함하는 빠른 확인을 했습니다 .

다음 브라우저는 모두 Windows 7 (64 비트) 시스템 에서 모든 이미지를 올바르게 표시했습니다 .

• 크롬 14.0.816.0
• Firefox 11.0
• Google 크롬 18.0.1025.142
• Internet Explorer 9.0.5 (64 비트)
• 오페라 11.62
• Safari 5.1.5

---

에서 http://www.ietf.org/rfc/rfc2397.txt :

"data :"URL 체계는 짧은 값에만 유용합니다. URL을 사용하는 일부 애플리케이션은 길이 제한을 부과 할 수 있습니다. 예를 들어 <A>HTML의 앵커 내에 포함 된 URL 에는 HTML [RFC1866]에 대한 SGML 선언에 의해 결정되는 길이 제한이 있습니다. LITLEN (1024)은 단일 속성 값 리터럴에 나타날 수있는 문자 수를 제한하고 ATTSPLEN (2100)은 태그에 나타나는 모든 속성 값 사양의 모든 길이 합계를 제한하며 TAGLEN (2100)은 태그의 전체 길이.

---

Safari에는 데이터 URI의 제한이 128K라는 것을 읽었습니다.

http://blog.clawpaws.net/post/2007/07/16/Storing-iPhone-apps-locally-with-data-URLs#c1989348

그리고 Chrome은 2M입니다.

http://code.google.com/p/chromium/issues/detail?id=44820#c1

---

2017 대답 : 데이터 변환 : 함수를 사용하여 blob으로 : dataURLtoBlob

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

then create blob url

var temp_url = window.URL.createObjectURL(blob);

then use it in new window if you need.

var redirectWindow = window.open('');
redirectWindow.document.write('<iframe src="' + temp_url + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>')      

works with big files in chrome/firefox 2017

---

It is really the "data URI scheme".

As per the Wikipedia page, IE7 lacks support, and IE8 betas limit it to 32kB of data.

---

Just an FYI, I was able to load a 130K image using a data url in Firefox 3.5 from a JavaScript ajax call. It truncated the image in IE 8, but the whole thing showed up in FF.

---

Seems the limit in Firefox 3.6 is 600KB.

---

I tried the code from waza123 but the charCodeAt method did not convert all characters correctly. Here is my solution for creating large downloads in the browser. (I used it for JSON data)

function exportToFile(jsonData, fileName) {
    const u8arr = new TextEncoder('utf-8').encode(JSON.stringify(jsonData, null, 2));
    const url = window.URL.createObjectURL(new Blob([u8arr], { type: 'application/json' }));
    const element = document.createElement('a');
    element.setAttribute('href', url);
    element.setAttribute('download', fileName);
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
}

---

Note: There are some additional restrictions in IE. For iframe is a limit of 4 kb.

In IE9, the 32kb limit for DataURIs was removed, although for security reasons their use remains limited to certain contexts (specifically, scenarios that create a security context, like IFRAMES, are forbidden)

MSDN

참고URL : https://stackoverflow.com/questions/695151/data-protocol-url-size-limitations