Question

我试图在canvasA上实现一个简单的选择区域，然后将区域复制到canvasB，我已经让选择部分工作但是复制区域的绘图并不想工作。想法是用户将选择一个区域，然后当他们完成选择时，该选择将出现在另一个画布上，即说mousedown，拖动矩形区域，mouseup（复制出现）

我承认我并不是一个前端开发者，所以我担心我会错过一些关于这些东西是如何工作的明显的东西，因为我只是试图将某些东西拼凑起来以证明一个概念并理解目前的基础知识。

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

任何指示赞赏。

的Si

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是source，d是destination。

从那里你只需要确定点击和拖动的位置来计算坐标和宽度/高度。

我已经更新了你的小提琴，只是为了演示。它非常粗糙，所以只需在图像左上角的某处单击一下，然后再点击右下角的某处。

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

将用户选择从一个画布复制到另一个画布

1 个答案: