html5 canvas copy imageData to tmpcanvas

Question

이미지 자르기를 위해 HTML5 캔버스에 앱을 만듭니다. DOM에는 3 개의 캔버스가 있습니다. 하나는 선을 그리고 하나는 원본 이미지 용이고 다른 하나는 결과 용입니다.

여기에 내가 사용하는 코드가 있습니다. 난 빈/투명 이미지 아무것도 없어이 줄

tmpImageEl.src = tmpCanvas.toDataURL(); 

에서

// copy image data to secondary canvas 
var pixelData = ctx.getImageData(x-10, y-10, 20, 20); 
var tmpCanvas = document.createElement("canvas"); 
tmpCanvas.width = 20; tmpCanvas.height = 20; 
var tmpCtx = tmpCanvas.getContext("2d"); 
tmpCtx.putImageData(pixelData, x, y); 
var tmpImageEl = document.createElement("img"); 
tmpImageEl.onload = function(){ 
    ctxCopy.drawImage(this, x, y); 
} 
console.log(tmpCanvas.toDataURL()); 
tmpImageEl.src = tmpCanvas.toDataURL(); 
//ctxCopy.putImageData(pixelData, x, y); 

//document.getElementsByTagName("body")[0].appendChild(tmpCanvas); 

. 원래 소스에서 가져온 이미지 데이터가 무엇인지 예상합니다. 코드가 잘못된 이유는 무엇입니까? putImageData에 대한 둥근 옵션이있는 경우 이것은 나에게 더 쉽습니다. (둥근 putImageData에 대한 인터넷 검색, 행운을 빕니다)

Answer 1

ctxCopy은 정의되어 있지 않습니다. 아마 당신은이 작업을 수행하려는 :

var tmpCtx = tmpCanvas.getContext("2d"); 
... 
tmpImageEl.onload = function(){ 
    tmpCtx.drawImage(this, x, y); /// for your temporary canvas 
    //ctxCopy.drawImage(this, x, y);  
} 

소스로 데이터의 URI와 크롬의 문제도 있습니다; 먼저 빈 문자열을 설정하여 그 주위를 얻을 수, 데이터-URI : 그러나

tmpImageEl.src = ''; 
tmpImageEl.src = tmpCanvas.toDataURL(); 

, 당신은 단순히 그리는 임시 캔버스에 drawImage() 방법 직접를 사용하여 자신에게 문제의 비트를 저장할 수 있습니다

이

var tmpCanvas = document.createElement("canvas"); 
tmpCanvas.width = tmpCanvas.height = 20; 
var tmpCtx = tmpCanvas.getContext("2d"); 

tmpCtx.drawImage(ctx.canvas, 0, 0); 

getPixelData()/putImageData()/image에 대한 필요가, 그리고 훨씬 더 빠르게이 방법은 없습니다 : 소스 캔버스 (이것은 소스 입력으로 이미지, 캔버스와 비디오를 취할 수 있습니다).

희망이 도움이됩니다.