我正在尝试使用JSZip将使用html2canvas创建的JPG图像添加到Zip文件中。当我保存原始JPG文件时，结果很好。但是，当我压缩它时，图像会损坏（当我打开图像文件时，没有数据出现）。这是我的脚本：<!DOCTYPE html><html> <head> <script src="https://stuk.github.io/jszip/dist/jszip.js"></script> <script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> <script type="text/javascript" src="FileSaver.min.js"></script> </head> <body> <div id="capture" style="padding: 0; background: #f5da55; width: 400px; height: 200px;"> <h4 style="color: #000; ">Hello, world!</h4> </div> <script type="text/javascript"> html2canvas( document.querySelector("#capture") ).then(canvas => { var img = new Image(); img.src = canvas.toDataURL( 'image/jpeg' ); // * * * This JPG is good: saveAs( img.src, 'file1.jpg'); var zip = new JSZip(); // Add a file to the zip file, in this case an image with data URI as contents // * * * This JPG comes out corrupted: zip.file( 'file2.jpg', img.src, {binary: true} ); // Generate the zip file asynchronously zip.generateAsync({type:"blob"}).then(function(content) { saveAs( content, 'archive.zip' ); }); }); </script> </body></html>请帮助我将数据URI图像添加到zip文件中。非常感谢！
2 回答
米脂
TA贡献1836条经验 获得超3个赞
我最终回答了我自己的问题。解决方案是首先将Base64数据URI映像转换为BLOB。为此，我使用了以下自定义函数：
function dataURItoBlob( dataURI ) {
// Convert Base64 to raw binary data held in a string.
var byteString = atob(dataURI.split(',')[1]);
// Separate the MIME component.
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
// Write the bytes of the string to an ArrayBuffer.
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
// Write the ArrayBuffer to a BLOB and you're done.
var bb = new Blob([ab]);
return bb;
}
var image = dataURItoBlob( img.src );
Drewness的建议也有效，但是我更喜欢我的方法，因为canvas.toBlob（）不返回值。
墨色风雨
TA贡献1853条经验 获得超6个赞
您可以使用将其转换为Blob canvas.toBlob。这就是FileSaver的.saveAs功能。
var canvas = document.querySelector("#capture");
canvas.toBlob(function (blob) {
zip.file('file2.jpg', blob);
});
有趣的是，canvas.toBlob并非所有浏览器都支持HTML5 。在帆布toBlob.js是这一个跨浏览器的填充工具。
添加回答
举报
0/150
提交
取消