Question

我正在画布上生成大量资产，因此单独保存每个资产是不可行的。此外，我正在使用“ webgl”上下文在画布上生成文件，因此此处getImageData不是一个选项。 I found a lib that can generate a zip个需要的文件数量，但遇到了麻烦：

var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
var gl = canvas.getContext("webgl");
var zip = new JSZip();
var img = zip.folder("images");
var pixels = new Uint8Array(
  gl.drawingBufferWidth * gl.drawingBufferHeight * 4
);
gl.readPixels(
  0,
  0,
  gl.drawingBufferWidth,
  gl.drawingBufferHeight,
  gl.RGBA,
  gl.UNSIGNED_BYTE,
  pixels
);
img.file("myfilename.png", pixels, { base64: true });
zip.generateAsync({ type: "blob" }).then(function(content) {
  saveAs(content, "asset.zip");
});

生成的zip文件大小正确（例如，足够大以表示其中的图像），但是每个图像都不可读。我在这里做错了什么？

Answer 1

解决方案是：

function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {type:mimeString});
}

uri = canvas.toDataURL("image/png");
blob = dataURItoBlob(uri)
img.file(counter + ".png", blob);

只是玩弄各种格式，直到它起作用为止。顺便说一句，该解决方案相当有效。

尝试使用JS将画布上生成的图像存储到zip中，此代码有什么问题？

1 个答案: