将多个HTML5分层画布复制到JavaScript中的一张图像

Question

我有多个HTML5画布，它们彼此叠放。 顺序很重要。 画布2将放置在画布1上，依此类推。

a）有没有一种方法可以创建所有这些画布的单个图像（使用toDataURL（）），并保持相同的顺序？

b）然后，如何将该图像复制到剪贴板，以便可以将其粘贴到其他应用程序中？

Answer 1

脚步：

1. 创建一个新的画布（可能是隐藏的）
2. 将两个画布都复制到新画布
3. 使用canvas.toDataURL()复制到图像

看到这个小提琴： http : //jsfiddle.net/137f623c/

假设您有3个画布（2个源和1个合并-如果需要，可以将其隐藏）和一个图像：

<canvas id="myCanvas1" width="200" height="200"></canvas>
<canvas id="myCanvas2" width="400" height="200"></canvas>

<canvas id="combined" width="400" height="200"></canvas>
<img src="" id="image" />

并且，脚本：

var canvas1 = document.getElementById("myCanvas1");
var ctx1 = canvas1.getContext("2d");
ctx1.fillStyle = "red";
ctx1.fillRect(10,10,100,100);

var canvas2 = document.getElementById("myCanvas2");
var ctx2 = canvas2.getContext("2d");
ctx2.fillStyle = "blue";
ctx2.fillRect(50,50,300,100);

var combined = document.getElementById("combined");
var ctx = combined.getContext("2d");

ctx.drawImage(canvas1, 0, 0); //Copying Canvas1
ctx.drawImage(canvas2, 0, 0); //Copying Canvas2

document.getElementById("image").src = combined.toDataURL()

不要忘了考虑MarkE的答案（针对b部分），并查看浏览器之间的兼容性。 就复制而言，我看到大多数现代浏览器在单击鼠标右键时均具有“ Copy Image 。 对于旧的浏览器，：\\上载到服务器并下载可能是解决方案。

Answer 2

关于您的问题的b）部分...

您将在将合并的画布内容复制到剪贴板时遇到问题，因为现代浏览器尚未统一或很好地支持所需的Clipboard API ：

http://caniuse.com/#feat=clipboard

解决方法是：

1. 将canvas.toDataURL上传到您的服务器，并将其另存为图像文件，
2. 从服务器下载该图像，并将其添加为img元素。

然后，用户可以right-click-copy img right-click-copy到剪贴板。