JSZip创建损坏的JPG图像
我正在尝试使用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回答
-
米脂
我最终回答了我自己的问题。解决方案是首先将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（）不返回值。 -
墨色风雨
您可以使用将其转换为Blob canvas.toBlob。这就是FileSaver的.saveAs功能。var canvas = document.querySelector("#capture");canvas.toBlob(function (blob) { zip.file('file2.jpg', blob);});有趣的是，canvas.toBlob并非所有浏览器都支持HTML5 。在帆布toBlob.js是这一个跨浏览器的填充工具。
随时随地看视频慕课网APP
相关分类
JavaScript