我正在使用JSZip库来提取上传的epub文件。我可以通过它成功地迭代,并与库中显示该文件的名称:JavaScript将img src动态设置为HTML5上传的文件
zipEntry.name;
我可以找到字符串比较的cover.jpg文件。我如何在我的html页面上设置图片的来源? 我曾尝试:
src=zipEntry;
和
src=zipEntry.name;
它甚至有可能?有没有简单的方法来做到这一点与jQuery?
我正在使用JSZip库来提取上传的epub文件。我可以通过它成功地迭代,并与库中显示该文件的名称:JavaScript将img src动态设置为HTML5上传的文件
zipEntry.name;
我可以找到字符串比较的cover.jpg文件。我如何在我的html页面上设置图片的来源? 我曾尝试:
src=zipEntry;
和
src=zipEntry.name;
它甚至有可能?有没有简单的方法来做到这一点与jQuery?
我试图把一个页面
<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);
}
您需要知道主机位于哪个图像上,而不仅仅是图像名称。或者在base64中有图像数据。
load image from external (or local) host:
<img src="{HOST}/cover.jpg"/>
base64:
<img src="data:image/jpg;base64,R0lGODdhMAAw....." />
我试过基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'>";
}
谢谢!有效。 “魔术”在base64_encode()函数中。 – 2013-04-07 07:21:36