javascript – 将图片从画布保存在zip中

前端之家收集整理的这篇文章主要介绍了javascript – 将图片从画布保存在zip中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在 HTML5中有一个画布,最终可能是一个非常长的dataURL(足够长的时间,如果他们尝试导航到Chrome,则会崩溃).因此,我试图使用JSZip将图像保存在zip中.我尝试了以下两件事情:
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中的图像无效.如何正确保存图像?

解决方法

您正在生成一个数据uri,它在实际的base64数据数据之前具有模式,MIME类型等:[< MIME-type>] [; charset =< encoding>] [; base64],< data&gt ;.您必须先删除数据之前的所有内容,然后再使用它.
zip.file("image.png",savable.src.substr(savable.src.indexOf(',')+1),{base64: true});

猜你在找的JavaScript相关文章