JavaScript將img src動態設置爲HTML5上傳的文件

我正在使用JSZip庫來提取上傳的epub文件。我可以通過它成功地迭代，並與庫中顯示該文件的名稱：JavaScript將img src動態設置爲HTML5上傳的文件

zipEntry.name;

我可以找到字符串比較的cover.jpg文件。我如何在我的html頁面上設置圖片的來源？我曾嘗試：

src=zipEntry;

和

src=zipEntry.name;

它甚至有可能？有沒有簡單的方法來做到這一點與jQuery？

來源

2013-04-06 Eduan Bekker

我試圖把一個頁面

<img id="testimg" />

上的空白圖像，然後使用該JavaScript代碼來顯示從一個zip文件中的PNG圖像：

var zipEntry = zip.file('test.png'); 
$('#testimg')[0].src = 'data:image/png;base64,' + base64_encode(zipEntry.asBinary());

這爲我工作。有關工作代碼的演示，請參見JSFiddle。

你將需要功能base64_encode()（來自phpjs.org）：

function base64_encode (data) { 
    // phpjs.org 
    var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz/="; 
    var o1, o2, o3, h1, h2, h3, h4, bits, i = 0, 
    ac = 0, 
    enc = "", 
    tmp_arr = []; 

    if (!data) { 
    return data; 
    } 

    do { // pack three octets into four hexets 
    o1 = data.charCodeAt(i++); 
    o2 = data.charCodeAt(i++); 
    o3 = data.charCodeAt(i++); 

    bits = o1 << 16 | o2 << 8 | o3; 

    h1 = bits >> 18 & 0x3f; 
    h2 = bits >> 12 & 0x3f; 
    h3 = bits >> 6 & 0x3f; 
    h4 = bits & 0x3f; 

    // use hexets to index into b64, and append result to encoded string 
    tmp_arr[ac++] = b64.charAt(h1) + b64.charAt(h2) + b64.charAt(h3) + b64.charAt(h4); 
    } while (i < data.length); 

    enc = tmp_arr.join(''); 

    var r = data.length % 3; 

    return (r ? enc.slice(0, r - 3) : enc) + '==='.slice(r || 3); 
}

來源

2013-04-06 14:54:13

謝謝！有效。「魔術」在base64_encode（）函數中。 – 2013-04-07 07:21:36

您需要知道主機位於哪個圖像上，而不僅僅是圖像名稱。或者在base64中有圖像數據。

load image from external (or local) host: 
<img src="{HOST}/cover.jpg"/> 

base64: 
<img src="data:image/jpg;base64,R0lGODdhMAAw....." />

來源

2013-04-06 12:00:57 maksimr

我試過基64的方法，但問題是，庫只有一個Uint8Array財產，我想沒有任何運氣轉換。我不明白你使用{HOST}的第一個解決方案，請你解釋一下。 – 2013-04-06 13:30:51

我在說：HOST = http://some-external-site.com – maksimr 2013-04-06 21:29:53

喜我使用{「使用該和用戶JSON陣列圖像路徑，而不是源的+ HTTP //......+ 「}

for(i=0;i<10;i++){ 
document.getElementById("five_star").innerHTML = "<img alt='' src='images/activestar.png'>"; 
}

來源

2013-09-25 06:03:26

JavaScript將img src動態設置爲HTML5上傳的文件

回答

相關問題