Javascript 使用Filereader API加载图像，并使用JSZip压缩它

我正在尝试使用fileready api加载一个图像，将其保存在使用jszip制作的新zip文件中，文件名为

logo.png

。我的问题是从filereader获取要保存在zip中的图像

$（文档）.ready（函数（）{
$（“.load”）.on（“更改”，函数（evt）{
var file=evt.target.files；
var reader=new FileReader（）；
reader.onload=（函数（事件）{
返回函数（e）{
var imgBinary=e.target.result；
var imgz=新图像（）；
attr（“src”，event.target.result）；
imgz.attr（“宽度”，128）；
imgz.attr（“高度”，128）；
holder.html（“”）；
持有人。附加（imgz）；
};
});
reader.readAsDataURL（文件）；
//reader.readAsArrayBuffer（文件）；
//下载Zip
$（“.download”）。在（“单击”，函数（）{
var zip=newjszip（）；
zip.load（webAppZipBinary）；
zip.file（“Hello.txt”、“Hello World\n”）；
var content=zip.generate（{type:“blob”}）；
//请参阅FileSaver.js
saveAs（content，theFile.name.substr（theFile.name.length-theFile.name.length，theFile.name.length-4）+“-win.zip”）；
});
返回false；
});
//触发加载映像
$（“.trigload”）。单击（函数（）{
$（“输入”）。触发器（“单击”）；
});
});
@导入url（“http://necolas.github.io/normalize.css/3.0.1/normalize.css");
.隐藏{
显示：无；
}
.持有人{
文本对齐：居中；
}
先生{
浮动：对；
}

我改变了什么：


我不认为我们可以使用ArrayBuffer来预览图像，我现在有两个阅读器：一个用于预览，一个用于JSZip（它在ArrayBuffer上的性能比在字符串上要好得多）
我在读者之后移动了“下载代码”：我们需要阅读Blob，将内容添加到zip，然后准备下载链接。你有其他的方法，这只是一个例子
我在拉链中添加了logo.png
我修复了一些小错误（缺少css类、图像属性不存在等）


函数显示预览（文件）{
var reader=new FileReader（）；
reader.onload=函数（e）{
风险值持有人=$（“.holder”）；
var imgUrl=e.target.result；
变量imgz=$（“
@导入url（“http://necolas.github.io/normalize.css/3.0.1/normalize.css");
.隐藏{
显示：无；
}
.持有人{
文本对齐：居中；
}
先生{
浮动：对；
}

Weave-

我发布这篇文章已经一年了，我只想分享另一种方法

我不喜欢使用2个文件读取器，因此我通过抓取图像的源代码并将其添加到zip文件来保存每个图像

这是怎么做到的

zip.file("logo.png", $(".imgorigholder > img").attr("src").split('base64,')[1],{base64: true});

使用JSZip v2.4.0（目前已过时）进行测试


函数显示预览（文件）{
var reader=new FileReader（）；
reader.onload=函数（e）{
变量imgorigholder=$（“.imgorigholder”）；
var imgOrigUrl=e.target.result；
var imgOrig=$（“img”）.attr（“src”）.split（'base64'，）[1]，{base64:true}）；
//导出应用程序的文件
zip.file（“hello.txt”、“hello性感妈妈”）；
//导出Chrome应用程序
var content=zip.generate（{type:“blob”}）；
saveAs（content，“test.zip”）；
}；
按钮{
显示：无；
浮动：对；
}
.imgorigholder{
文本对齐：居中；
}

另存为zip文件
new JSZip（BinaryMG）的问题是什么
似乎可疑，此构造函数不是图像。另外，您的对象
zip
是在一个作用域中创建的，但您尝试在另一个作用域中使用它。我正在尝试使用fileready api加载图像…将其保存在使用jszip制作的新zip文件中…名称为logo.png，但我的问题是如何将图像保存在zip文件中rom文件读取器。