Question

我正在使用图像处理HTML5画布。在我的画布中，我有很多图像。当我想单独剪辑图像时。但是当我通过创建一个形状剪辑一个图像并使用clip()函数时，它工作正常。但是当我尝试使用相同的方法剪辑另一个图像时出现问题。当画布存储前一个形状时，它将与新的形状连接并相应地剪辑第二个图像。我想破坏以前的形状。请注意，我无法使用clearRect()来清除画布，因为我之前的剪辑图像就在那里。

请参考链接：

Demo Problem

在链接中将图像拖动到画布预定义图层并拖动图像。如果图像试图离开边界，您可以清楚地看到图像被正确剪裁。

现在将另一个图像拖到另一个框中的画布中。现在您可以看到裁剪功能不正常。

这是我在剧本中所做的：

JS Script

这里是JSFiddle链接

JSFiddle Link

你能帮我解决这个问题吗？如果您找到另一种方法来清除以前的形状，将会很有帮助。

提前致谢。

Answer 1

我已经自己解决了这个问题。画布不提供多个图像剪辑选项。因此，如果要在画布中剪切多个图像，则必须使用自己的剪辑功能。只需在您选择之外的画布clearRect()清除该区域。为每个图像迭代这个过程，你就完成了！

解决方案链接：

Solution Demo

JS Script Link：

JS Script

感谢。

Answer 2

我能找到的最佳解决方案是使用隐藏的画布，然后绘制，然后在主画布上使用putImageData方法。

＆＃13;

var c = document.getElementById("myCanvas");
var ctemp = document.getElementById("myCanvasTemp");

var ctx = c.getContext("2d");
var ctxTemp = ctemp.getContext("2d");

ctxTemp.fillStyle = "red";
ctxTemp.fillRect(10, 10, 50, 50);

ctxTemp.fillStyle = "blue";
ctxTemp.fillRect(20, 20, 50, 50);

function copy() {
    var imgData = ctxTemp.getImageData(10, 20, 50, 10);
    ctx.putImageData(imgData, 10, 10);
}

＆＃13;

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>


<canvas id="myCanvasTemp" width="300" height="150" style="display:none;">
Your browser does not support the HTML5 canvas tag.</canvas>


<br /><br />
<br />
<button onclick="copy()">Copy</button>

＆＃13;

在HTML5画布中剪切多个图像

2 个答案: