javascript - 将用户选择从一个 Canvas 复制到另一个 Canvas

Question

我正在尝试实现一个简单的选择 Canvas A上的区域，然后将区域复制到 Canvas B，我已经让选择部分正常工作，但复制区域的绘图不想工作。这个想法是，用户将选择一个区域，然后当他们完成选择时，该选择将出现在另一个 Canvas 上，即按下鼠标，拖动矩形区域，按下鼠标(出现副本)

我承认我不是一个很好的前端开发人员，所以担心我错过了一些关于这些东西如何工作的明显的东西，因为我只是试图将一些东西组合在一起来证明一个概念并理解目前的基础知识。

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

HTML

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

Javascript

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 是目的地。

从那里您只需确定单击和拖动的位置即可计算出坐标和宽度/高度。

我更新了你的 fiddle 只是为了演示。它非常粗糙，所以只需单击图像左上角的某处，然后再次单击右下角的某处即可。

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