即32kb的数据uri限制

ie 32kb limit to data uri

本文关键字：uri 限制数据 32kb 更新时间：2023-09-26

长话短说，我有一个图像作为字符串存储在数据库中。然后我在jcarousellite旋转木马中显示图像。当用户点击图像时，它会弹出在灯箱中。当图像显示在转盘中时，它会完美地渲染整个图像（图像在转盘中的大小要小得多）。当点击图像时，它只在IE中渲染图像的前10个像素。我知道IE和数据URI有32kb的限制。有没有办法绕过这一点，并能够正确显示图像？

如果您需要任何源代码，我非常乐意提供一些。

谢谢，ZS-

编辑

var oDataQuery = /*Query*/
var carouselul = $("#carousel-ul");
var parentBody = window.parent.document.getElementsByTagName("body")[0];
var outterDiv = document.createElement("div"); 
// Execute the OData query for the images
    $.getJSON(oDataQuery, function (data) {
        var results = data.d.results;
        // Add the results to the carousel ul            
        for (var i = 0; i < results.length; i++) {
            var noteId = results[i].AnnotationId;
            var noteSubject = results[i].Subject;
            var src = "data:" + results[i].MimeType + ";base64," + results[i].DocumentBody;
            var li = document.createElement('li');
            var ahref = document.createElement('a');
            ahref.href = '#';
            ahref.addEventListener('click', function () { return false; });
            var img = document.createElement('img');
            img.src = src;
            img.width = '100';
            img.height = '100';
            img.style.border = '1px solid';
            img.style.margin = '1px';
            img.addEventListener('click', function() { $("#img" + noteId, window.parent.document).trigger('click'); });
            ahref.appendChild(img);
            li.appendChild(ahref);
            carouselul.append(li);
            var innerDiv = document.createElement("div");
            innerDiv.id = "div" + noteId;
            var img2 = "<a href='" + src + "' data-title='" + noteSubject + "' id='" + noteId + "' data-lightbox='images'><img id='img" + noteId + "' src='";
            img2 += src;
            img2 += "' width='100' height='100' style='border: 1px solid; margin: 1px; visibility: hidden' alt='";
            img2 += noteSubject + "' /></a>";
            innerDiv.innerHTML = img2;
            outterDiv.appendChild(innerDiv);
            tempID = "img" + noteId;
        }
        var oHead = window.parent.document.getElementsByTagName('head')[0];
        var cssNode = document.createElement('link');
        cssNode.type = 'text/css';
        cssNode.rel = 'stylesheet';
        cssNode.href = '/{635457923130000051}/WebResources/ta_lightbox';
        oHead.appendChild(cssNode);
        parentBody.appendChild(outterDiv);
        // Wire-up jCarouselLite to the carousel div            
        $("#carousel").jCarouselLite({
            btnNext: "#next",
            btnPrev: "#prev",
            circular: false
        });

我知道代码看起来有点疯狂，但我正在iframe中渲染图像，然后它需要在iframe之外显示灯箱。（它都在同一台服务器上，所以我知道这一切都很好，只是图像只渲染前10个像素。

您可以将base64转换为字节并使用它们创建Blob，从中您可以生成对象URL（与数据URLRL的大小限制

（我重新考虑了你的一些代码，这是为了取代你的for循环，我忽略了其余部分）

function makeDivTemplate() { // helper to simplify loop
    var div = document.createElementById('div');
    div.innerHTML = '<a href="" data-title="" data-lightbox="images"><img src="" width="100" height="100" style="border: 1px solid; margin: 1px; visibility: hidden" alt="">';
    return div;
}
function makeLiTemplate() { // helper to simplify loop
    var li = document.createElement('li'),
        a = document.createElement('a'),
        img = document.createElement('img');
    a.href = '#';
    img.width = '100';
    img.height = '100';
    img.style.border = '1px solid';
    img.style.margin = '1px';
    a.appendChild(img);
    li.appendChild(a);
    return li;
}
var results = data.d.results;
var innerDivTemplate = makeDivTemplate(); // cloneNode will be faster than fn
var liTemplate = makeLiTemplate();
// Add the results to the carousel ul
var i, div, e, li, id, subject, blob, src; // var in a loop gets hoisted anyway
for (i = 0; i < results.length; i++) {
    id = results[i].AnnotationId;
    subject = results[i].Subject;
    blob = new Blob( // create Blob
        [base64DecToArr(results[i].DocumentBody)], // base64 to bytes
        {type: results[i].MimeType}
    );
    src = URL.createObjectURL(blob);
    // <li> tree
    li = liTemplate.cloneNode(true);
    e = li; // <li>
    e = e.firstChild; // <a>
    e.addEventListener('click', function () { return false; });
    e = e.firstChild; // <img>
    e.setAttribute('src', src);
    e.addEventListener('click', function() { $("#img" + id, window.parent.document).trigger('click'); });
    carouselul.append(li);
    // <div> tree
    div = innerDivTemplate.cloneNode(true);
    e = div; // <div>
    e.setAttribute('id', 'div' + id);
    e = e.firstChild; // <a>
    e.setAttribute('src', src);
    e.setAttribute('data-title', subject);
    e.setAttribute('id', id);
    e = e.firstChild; // <img>
    e.setAttribute('src', src);
    e.setAttribute('alt', subject);
    e.setAttribute('id', 'img' + id);
    outterDiv.appendChild(div);
}
blob = null;

还包括Base64上MDN页面的以下两个功能

function b64ToUint6 (nChr) {
  return nChr > 64 && nChr < 91 ?
      nChr - 65
    : nChr > 96 && nChr < 123 ?
      nChr - 71
    : nChr > 47 && nChr < 58 ?
      nChr + 4
    : nChr === 43 ?
      62
    : nChr === 47 ?
      63
    :
      0;
}
function base64DecToArr (sBase64, nBlocksSize) {
  var
    sB64Enc = sBase64.replace(/[^A-Za-z0-9'+'/]/g, ""), nInLen = sB64Enc.length,
    nOutLen = nBlocksSize ? Math.ceil((nInLen * 3 + 1 >> 2) / nBlocksSize) * nBlocksSize : nInLen * 3 + 1 >> 2, taBytes = new Uint8Array(nOutLen);
  for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) {
    nMod4 = nInIdx & 3;
    nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4;
    if (nMod4 === 3 || nInLen - nInIdx === 1) {
      for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) {
        taBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255;
      }
      nUint24 = 0;
    }
  }
  return taBytes;
}