将图像从画布保存在zip中 [英] Saving an image from canvas in a zip

问题描述

我有一个HTML5的画布，最终可能是一个非常长的dataURL（足够长，如果他们尝试导航到它崩溃chrome）。因此，我试图使用JSZip在zip中保存图像。我尝试了以下两件事：

I have a canvas in HTML5 that can end up being a very long dataURL (long enough to crash chrome if they try to navigate to it). Because of that, I'm trying to save the image in a zip using JSZip. I've tried the following two things:

var zip = new JSZip();
var savable = new Image();
savable.src = canvas.toDataURL();
zip.file("image.png", savable, {base64: true});
var content = zip.generate();
var blobLink = document.getElementById('blob');
blobLink.download = "image.zip";
blobLink.href = window.URL.createObjectURL(zip.generate({type:"blob"}));

这将导致以下错误：

Uncaught TypeError: Object #<HTMLImageElement> has no method 'replace'

我也尝试过：

var zip = new JSZip();
zip.file("image.png", canvas.toDataURL(), {base64: true});
var content = zip.generate();
var blobLink = document.getElementById('blob');
blobLink.download = "image.zip";
blobLink.href = window.URL.createObjectURL(zip.generate({type:"blob"}));

这看起来工作，但是zip中的图片无效。

That appears to work, but then the image in the zip is not valid. What can I do to save the image properly?

推荐答案

您正在生成一个数据uri，其中包含模式，MIME类型etc 之前的实际的base64数据 [...]您必须先删除所有内容，然后才能使用该数据。

You're generating a data uri, which has schema, mime-type etc before the actual base64 data data:[<MIME-type>][;charset=<encoding>][;base64],<data>. You'll have to remove all the content before the data then use it.

zip.file("image.png", savable.src.substr(savable.src.indexOf(',')+1), {base64: true});

这篇关于将图像从画布保存在zip中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！