將用戶選擇從一個畫布復制到另一個畫布

Question

我正在嘗試在canvasA上實現一個簡單的選擇區域，然后將區域復制到canvasB，我已經使選擇部分起作用了，但是復制區域的繪圖卻不起作用。 這個想法是，用戶將選擇一個區域，然后當他們完成選擇時，該選擇將出現在另一個畫布上，即說鼠標向下，拖動矩形區域，鼠標向上（出現復制）

我承認我不是一個前端開發人員，所以我擔心我缺少一些關於這些東西如何工作的明顯信息，因為我只是想將一些東西結合在一起以證明一個概念並了解當前的基礎知識。

JSFiddle在這里-http: //jsfiddle.net/bw4gw83a/2

的HTML

<canvas id="original" width=300 height=300></canvas>
<canvas id="copybit" width=300 height=300></canvas>

Java腳本

var original = document.getElementById("original");
var CTXoriginal = original.getContext("2d");
var copybit = document.getElementById("copybit");
var CTXcopybit = copybit.getContext("2d");


var background = new Image();
background.src = "https://i.imgur.com/F1pJYM1.jpg";

background.onload = function(){
    CTXoriginal.drawImage(background, 0, 0)
}

var imageData = CTXoriginal.getImageData(10, 10, 100, 100);
CTXcopybit.putImageData(imageData,0,0);

任何指針表示贊賞。

硅

Answer 1

以下指南可能會有所幫助。

http://www.i-programmer.info/programming/graphics-and-imaging/2078-canvas-bitmap-operations-bitblt-in-javascript.html

它提到您可以使用繪制圖像的一部分

drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)

其中s是源，而d是目標。

從那里，您只需要確定單擊並拖動的位置即可計算出坐標和寬度/高度。

我更新了您的小提琴只是為了演示。 這非常粗糙，因此只需單擊圖像左上角的某個位置，然后再次單擊右下角的某個位置。

http://jsfiddle.net/treerock/1zpc8fz0/