html5 canvas複製imageData到tmpcanvas

我在HTML5畫布中創建了一個應用程序，用於裁剪圖像。 DOM中有3個畫布，一個用於繪製線條，一個用於原始圖像，另一個用於繪製結果。html5 canvas複製imageData到tmpcanvas

這裏是我使用的代碼。

// 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);

在這一行

tmpImageEl.src = tmpCanvas.toDataURL();

我得到了什麼，但空白/透明圖像。我期望的是來自原始源的圖像數據。代碼有什麼錯誤？如果有putImageData的四捨五入選項，這對我來說可能更容易（我會搜索關於四捨五入的putImageData，沒有運氣）

來源

2014-01-29 Dariel Pratama

也許你可以澄清代碼示例，所以我們清楚地看到3個畫布和worflow。什麼是ctxCopy？ – GameAlchemist

什麼是'ctxCopy'，它來自哪裏？它從源代碼中丟失。 – Philipp

創建臨時圖像的原因是什麼？你可以在另一個畫布上使用'drawImage'作爲源參數。 – Philipp

您的ctxCopy似乎沒有被定義;你可能打算這麼做：

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

在使用data-uris作爲源代碼的Chrome中也存在一個問題;你可以通過設置第一空字符串得到解決這個問題，那麼數據-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，並且它的速度更快這種方式。

希望這會有所幫助。

來源

2014-01-29 18:47:37 K3N

請嘗試http://comicedu.com/htmlcropper/v2/並上傳您自己的圖像，然後將鼠標拖拽到畫布內 –

html5 canvas複製imageData到tmpcanvas

回答

相關問題