即32kb限制到數據uri

Question

長話短說，我有一個圖像作爲字符串存儲在數據庫中。然後我在一個jcarousellite傳送帶上顯示圖像。當用戶點擊圖片時，它會在Lightbox中彈出。當圖像顯示在旋轉木馬中時，它會完美呈現整個圖像（旋轉木馬中的圖像尺寸要小得多）。單擊圖像時，它只會渲染IE中圖像的前10個（ish）像素。我知道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位（ISH）像素。

Answer 1

你可以轉換你的的base64到字節和使用他們創造斑點，從中可以產生對象URL它的工作方式不同的數據URL，讓你避免網址

的大小限制（我已經重新考慮了一下你的代碼，這將取代你的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; 

而且還包括從the MDN page on Base64

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; 
}