Copy multiple HTML5 layered canvases to one image in JavaScript

问题

I have multiple HTML5 canvases which are placed on top of one another. The order is important. Canvas 2 will be placed on Canvas 1 and so forth.

a) Is there a way I can create a single image (using toDataURL()) of all of these canvases keeping the same order?

b) And, then how can I copy this image to a clipboard so that it can be pasted in other applications?

回答1:

Steps:

Create a new Canvas (maybe hidden)
Copy both canvas to the new canvas
Copy to image using canvas.toDataURL()

See this fiddle: http://jsfiddle.net/137f623c/

Let's say you have 3 canvas (2 source and 1 combined - hide this if you want) and an image:

<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" />

And, the Script:

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

Don't forget consider MarkE's Answer (for part b) and also see for compatibility among browsers. As far for copying I see that most modern browsers have Copy Image when right clicked. For old browsers, :\ uploading to server and downloading might be the solution.

回答2:

As to part b) of your question...

You will have problems copying the merged canvas content to the clipboard because the required Clipboard API is not yet uniformly or well supported by modern browsers:

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

A workaround would be to: