캔버스 dataURL을 사용하여 문제

Question

캔버스의 렌더링 된 이미지에 내 캔버스의 내용이 포함 된 새 창을 열 수있는 버튼을 만들려고합니다.

여기에 내 JS 코드입니다 :

var canvas = document.getElementById("thecanvas"); 
var dataUrl = canvas.toDataURL(); 
var context = canvas.getContext("2d"); 
context.fillStyle = "rgba(0, 0, 255, .5)"; 
context.fillRect(25, 25, 125, 125); 
function clickme() { 
window.open(dataUrl, "toDataURL() image", "width=200, height=500"); 
}​ 

HTML 코드 :

<input type="button" onclick="clickme()" value="OPEN"/> 

<canvas id="thecanvas" height="200" width="500" style="border:1px solid black"> 

하지만 "열기"를 클릭하면 버튼을 아무 일도 발생하지 않습니다 ...하지만 난 정말 이유를 볼 수 없습니다 . 튜토리얼을위한 많은 사이트를 살펴 보았습니다. 나는 몇몇 코드를 복사하고 붙여 넣기조차했지만 여전히 아무 일도 일어나지 않는다. 내가 뭔가 잘못하고 있는거야? 고맙습니다!

Answer 1

먼저 명령문을 실행하는 순서가 중요합니다. 캔버스에 그린 후 toDataURL으로 전화하거나 해당 콘텐츠가 포함되지 않은 dataURL을 생성해야합니다.

나는 스크립트 태그처럼 무엇인지 잘 모르겠지만, 여기에 약간 더 절대 안전한 방법으로 이벤트를 수행하는 작업 예제 : http://jsfiddle.net/b7G6J/

HTML :

<input id="thebutton" type="button" value="OPEN"/> 

<canvas id="thecanvas" height="200" width="500" style="border:1px solid black"> 

JS는 :

var canvas = document.getElementById("thecanvas"); 
var context = canvas.getContext("2d"); 

// First drawing commands 
context.fillStyle = "rgba(0, 0, 255, .5)"; 
context.fillRect(25, 25, 125, 125); 
// Then toDataURL 
var dataUrl = canvas.toDataURL(); 

var button = document.getElementById("thebutton"); 
button.onclick =function() { 
    window.open(dataUrl, "toDataURL() image", "width=200, height=500"); 
}