2014-10-07 2 views
4

아래 코드로 이미지 (JPEG, PNG, GIF 등)로 저장하도록 HTML 콘텐츠 (DIV)를 변환하는 다음 코드를 수행했습니다.확장명이 canvas2image 인 이미지로 DIV를 저장하는 방법

<pre> 
html2canvas($(".mainbox"), { 
    onrendered: function(canvas) { 
     theCanvas = canvas; 
     document.body.appendChild(canvas); 
     Canvas2Image.saveAsImage(canvas); 
     $("#FinalImage").append(canvas); 
    } 
}); 
</pre> 

또한 html2canvas.js, base64.js 내 페이지canvas2image.js을 포함했다. 결국 이미지는 #FinalImage DIV에 표시되고 브라우저는 내 드라이브에 저장하도록 요청합니다. 지금까지는 모두 올바르게 작동합니다.

이제 이미지에 가서 확장 (".jpg", ".png"등 ...)을 지정해야 할 때마다 저장된 이미지의 이름이 확장명이 아닙니다. 사용자가 브라우저에서 저장할 때 기본적으로 확장을 설정하는 솔루션이 있습니까?

미리 감사드립니다.

답변

1

동일한 기능을 서명 캡처에 사용했습니다. 이는 귀하의 접근 방식과 다릅니다. 이 코드 스 니펫이 도움이 될 수 있습니다. plz 코멘트 전체 소스 코드가 필요하면. 당신은 이미지의 확장을 변경할 수 있습니다 .there

var canvas = document.getElementById(<canvas element id>)// get canvas element 
var dataURL = canvas.toDataURL("image/png");// convert to img, specify extension 
document.getElementById(<new image id>).src = dataURL; // write as an image 

라인이 나는 png 지정했습니다. 희망 도움이

+0

감사합니다. 여전히 같은 문제에 직면 해 있습니다. 콘텐츠가 이미지로 올바르게 변환 중입니다. 브라우저 페이지에 표시됩니다. "Canvas2image.js"는 "saveFile"함수를 사용하는데 문제가 있다고 생각합니다. Firefox에서 문제가 발생합니다. Chrome에서는 정상적으로 작동합니다. –

+0

ur 코드에서'saveAsImage (canvas)'를 사용하는 대신'saveAsPNG (canvas)'를 사용해야합니다. – Khaleel

관련 문제