toDataURL 이미지 다운로드이이 작동 확장자

Question

사업부를 사용하여 클릭 할 때 이미지를 다운로드하고 ...

document.location.href = save_canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream"); 

하지만 다운로드는 확장자가없는 그냥 '다운로드'

라고하는 이미지가 없습니다 나는이 같은 이름을 설정 시도

...

document.location.download = "myfile.jpg"; 
document.location.href = save_canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream"); 

하지만 아무 효과가 없다, 어디서 잘못된 것입니까?

Answer 1

download 속성은 Location 개체의 일부로, HTML 앵커 (A) 태그 (IE 제외)의 경우에만 적용됩니다.

브라우저 및 버전에 따라 파일 이름을 설정하고 URL.createObjectURL()을 통해 URL로 제공하기 위해 캔버스를 Blob 개체로 변환 한 다음 File으로 변환 할 수 있습니다. 또한 여기서 toBlob()은 IE에서 지원되지 않습니다 (그러나 polyfilltoBlob() 일 수 있으며 대신 msSaveBlob을 사용할 수 있음).

(그리고 당신은 또한 마임 타입 (예 : "응용 프로그램/octet-stream을"에 대한 "응용 프로그램")와 마임 타입의 "이미지"를 대체 할 것입니다.)

c.toBlob(function(blob) { 
 
    var file = new File([blob], "test.png", {type: "application/octet-stream"}); 
 
    document.location.href = URL.createObjectURL(file); 
 
})

A save request with PNG and filename should appear when running this code... 
 
<canvas id=c></canvas>

선택적으로 많은 특별한 경우를 다루는 FileSaver.js library을 사용해보십시오.