将多个 HTML5 分层画布复制到 JavaScript 中的一个图像
Copy multiple HTML5 layered canvases to one image in JavaScript
我有多个 HTML5 画布,它们彼此叠加。顺序很重要。 Canvas 2 将放在 Canvas 1 上,依此类推。
a) 有没有一种方法可以创建所有这些画布保持相同顺序的单个图像(使用 toDataURL())?
b) 然后,我怎样才能将此图像复制到剪贴板,以便可以将其粘贴到其他应用程序中?
步骤:
- 新建Canvas(可能隐藏)
- 将两个 canvas 复制到新的 canvas
- 使用
canvas.toDataURL()
复制到图像
看到这个fiddle:http://jsfiddle.net/137f623c/
假设您有 3 个 canvas(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
。对于旧浏览器,:\ 上传到服务器并下载可能是解决方案。
关于你问题的b)部分...
将合并的 canvas 内容复制到剪贴板时会遇到问题,因为所需的 Clipboard API
尚未得到现代浏览器的统一或良好支持:
http://caniuse.com/#feat=clipboard
解决方法是:
- 将 canvas.toDataURL 上传到您的服务器并将其另存为图像文件,
- 从服务器下载该图像并将其添加为 img 元素。
然后用户可以right-click-copy
将 img 添加到他们的剪贴板。
我有多个 HTML5 画布,它们彼此叠加。顺序很重要。 Canvas 2 将放在 Canvas 1 上,依此类推。
a) 有没有一种方法可以创建所有这些画布保持相同顺序的单个图像(使用 toDataURL())?
b) 然后,我怎样才能将此图像复制到剪贴板,以便可以将其粘贴到其他应用程序中?
步骤:
- 新建Canvas(可能隐藏)
- 将两个 canvas 复制到新的 canvas
- 使用
canvas.toDataURL()
复制到图像
看到这个fiddle:http://jsfiddle.net/137f623c/
假设您有 3 个 canvas(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
。对于旧浏览器,:\ 上传到服务器并下载可能是解决方案。
关于你问题的b)部分...
将合并的 canvas 内容复制到剪贴板时会遇到问题,因为所需的 Clipboard API
尚未得到现代浏览器的统一或良好支持:
http://caniuse.com/#feat=clipboard
解决方法是:
- 将 canvas.toDataURL 上传到您的服务器并将其另存为图像文件,
- 从服务器下载该图像并将其添加为 img 元素。
然后用户可以right-click-copy
将 img 添加到他们的剪贴板。