JSZip创建损坏的JPG图像

时间:2019-03-27 19:47:53

标签: javascript jszip

我正在尝试使用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 个答案:

答案 0 :(得分:0)

您可以使用canvas.toBlob将其转换为Blob。这就是FileSaver .saveAs的作用。

var canvas = document.querySelector("#capture");

canvas.toBlob(function (blob) {
  zip.file('file2.jpg', blob);
});

有趣的是,并非所有浏览器都支持HTML5 canvas.toBlobcanvas-toBlob.js是跨浏览器的polyfill。

答案 1 :(得分:0)

我最终回答了自己的问题。解决方案是先将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()不会返回值。