이미지 URL을 캔버스로 저장하고 저장합니다.

Question

URL에서 캔버스로 이미지를로드하고 저장할 이미지를 표시하려고합니다. 캔버스에 이미지를 표시 할 수 있지만 이미지를 base64 문자열로 표시하려고하면 이미지가 비어 있습니다. 여기에 제가 지금까지 할 수있는 것은 마지막 부분에 대한 도움이 필요합니다.

var canvas = document.getElementById('myCanvas'), 
    context = canvas.getContext('2d'), 
    imageObj = new Image(); 

imageObj.onload = function() { 
    context.drawImage(imageObj, 0, 0); 
}; 

imageObj.src = 'http://3.bp.blogspot.com/-4NP3xwj-ZMI/UXU8RT1k02I/AAAAAAAACEU/88knXDu2MeQ/s72-c/music3g1.JPG'; 

var dataURL = canvas.toDataURL(); 
document.getElementById('canvasImg').src = dataURL; 

Answer 1

좋아, 몇 가지 알아야 할 사항.

1. html로가에있는 도메인의 외부 소스에서 캔버스에 이미지를 그릴

   , 그것은 플래그 캔버스에 dirty 플래그. 이로 인해 .toDataURL() 기능을 사용할 수 없게됩니다. 주로 보안 문제입니다.

2. 이미지가 실제로 캔버스에 그려지기 전에 호출됩니다. 데이터 URL을 가져와 이미지의 onload 함수 내에서 src를 설정해야합니다.