13

HTML5にキャンバスがあり、非常に長いdataURLになる可能性があります（Chromeに移動しようとするとChromeがクラッシュするのに十分な長さです）。そのため、JSZipを使用して画像をzip形式で保存しようとしています。私は次の2つのことを試しました：

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内の画像は無効です。画像を正しく保存するにはどうすればよいですか？

4

1 に答える 1

21

実際のbase64データの前にスキーマ、mime-typeなどを持つデータURIを生成していますdata:[<MIME-type>][;charset=<encoding>][;base64],<data>。データを使用する前に、すべてのコンテンツを削除する必要があります。

zip.file("image.png", savable.src.substr(savable.src.indexOf(',')+1), {base64: true});
于 2013-03-08T05:41:51.937 に答える