캔버스에서 이미지를 우편으로 저장

Question

HTML5에 매우 긴 dataURL이 될 수있는 캔버스가 있습니다 (Chrome을 탐색하려고하면 Chrome을 종료 할 수있을만큼 길다). 그 때문에 JSZip을 사용하여 이미지를 zip으로 저장하려고합니다. 나는 또한이 시도

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

:

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"})); 

이것은 다음과 같은 오류가 발생합니다 : 나는 다음과 같은 두 가지를 시도했습니다

작업 표시

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"})); 

하지만 다음 이미지 우편 번호가 올바르지 않습니다. 이미지를 올바르게 저장하려면 어떻게해야합니까?

Answer 1

실제 base64 데이터 data:[<MIME-type>][;charset=<encoding>][;base64],<data> 앞에 스키마, mime-type 등이있는 데이터 URI가 생성됩니다. 데이터를 사용하기 전에 모든 콘텐츠를 삭제해야합니다.

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