在 HTML5 画布中剪切多个图像

Posted 2023-02-25

【中文标题】在 HTML5 画布中剪切多个图像

【英文标题】：Clipping multiple images in HTML5 canvas

【发布时间】：2014-09-23 13:39:44

【问题描述】：

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

请参考链接：

Demo Problem

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

现在将另一个图像拖到画布中的另一个框中。现在您可以看到剪辑无法正常工作。

这是我在脚本中所做的：

JS Script

这里是 JSFiddle 链接

JSFiddle Link

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

提前致谢。

【问题讨论】：

我想帮忙，但我的 AV 说不要访问您的链接，因为它们以包含病毒而闻名，请在 JSFiddle 上发布您的示例

您是否错过了在剪辑之前/之后必须使用保存/恢复？也许你只是不明白 canvas 是一个状态机 == 你必须自己观察 canvas 的状态。

@GameAlchemist。 +1 我怀疑你是对的，Tatha 需要保存/恢复。为了澄清您的观点：所有新图纸都将保留以前的剪切区域。为避免这种持久性，请在剪裁前执行context.save()，然后在完成剪裁和绘图后执行context.restore()。这样您就可以为新图纸应用新剪辑。

谢谢先生的回复。但我之前在此代码中使用过保存/恢复，但我从后面删除了保存/恢复，因为它只保存/恢复画布上下文的属性，而不是形状或剪切区域。我想撤消剪切区域的形状并创建一个新的。你能帮帮我吗？

【参考方案1】：

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

解决方案链接：

Solution Demo

JS 脚本链接：

JS Script

谢谢。

【参考方案2】：

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

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

<canvas id="myCanvas"   style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>


<canvas id="myCanvasTemp"   style="display:none;">
Your browser does not support the HTML5 canvas tag.</canvas>


<br /><br />
<br />
<button onclick="copy()">Copy</button>