getImageData轉換爲toDataURL HTML5

Question

有沒有辦法將圖像數據從getImageData轉換爲HTML5中的toDataURL？

var pixelData = ctx.getImageData(x - (lineWidth/2), y - (lineWidth/2), lineWidth, lineWidth); 

x和y是在畫布上鼠標指針的位置，我創建繪圖應用從現有畫布獲取圖像數據，並把它（複印件），在新的畫布。從那個圖像數據我想創建模式與createPattern。任何想法？請幫助我

Answer 1

您不需要getImageData將canvas1的一部分複製到canvas2上。

（getImageData慢）

只需創建canvas1的臨時畫布的drawImage部分臨時畫布。

然後使用臨時畫布創建一個在canvas2上使用的模式。

var pattern=ctx2.createPattern(patternCanvas,'repeat'); 

如果所有canvas1都將被用作模式，那就更簡單了。然後，只是這樣做：

var pattern=ctx2.createPattern(canvas1,'repeat'); 

示例代碼和演示：http://jsfiddle.net/m1erickson/rKxn3/

var canvas1=document.getElementById("canvas1"); 
var ctx1=canvas1.getContext("2d"); 
var canvas2=document.getElementById("canvas2"); 
var ctx2=canvas2.getContext("2d"); 
var patternCanvas=document.createElement("canvas"); 
var patternCtx=patternCanvas.getContext("2d"); 

var img=new Image(); 
img.onload=start; 
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/facesSmall.png"; 
function start(){ 

    ctx1.drawImage(img,0,0); 

    patternCanvas.width=80; 
    patternCanvas.height=47; 
    patternCtx.drawImage(canvas1,0,0,80,47,0,0,80,47); 

    var pattern=ctx2.createPattern(patternCanvas,'repeat'); 
    ctx2.fillStyle=pattern; 
    ctx2.fillRect(0,0,canvas2.width,canvas2.height); 

}