将多个画布保存为一张图像（制作像 PicFrame 一样的网站）

Question

我尝试制作像 PicFrame 应用程序这样的网站，所以我找到了这个演示：

http://jsfiddle.net/appsaloon/4jRLM/

我想在演示中使用多个画布并将其保存到一张图像中。如何将所有画布保存为一张图像？抱歉我的英语不好，谢谢！

我的 HTML 代码如下所示：

<div id="container">

    <input type="file" id="imageLoader_1" />
    <canvas id="imageCanvas_2" width="400" height="200"></canvas> 

    <input type="file" id="imageLoader_2" />
    <canvas id="imageCanvas_2" width="400" height="200"></canvas> 

    <a id="imageSaver" href="#">Save image</a>

</div>

Answer 1

您用来context.drawImage在画布上绘制图像。

var canvas=document.getElementById('canvas0');
var context=canvas.getContext('2d');

context.drawImage(myImage,0,0);

由于另一个画布可以作为 的图像源drawImage，因此您可以将多个画布合并到单个画布上，如下所示：

var canvas1=document.getElementById('canvas1');
var canvas2=document.getElementById('canvas2');
var canvas3=document.getElementById('canvas3');
var canvas4=document.getElementById('canvas4');

// merge 4 canvases (canvas1-canvas4) onto a single canvas
// (this example assumes canvas1-4 are 100x100 -- adjust to your needs)
context.drawImage(canvas1,0,0);
context.drawImage(canvas2,100,0);
context.drawImage(canvas3,0,100);
context.drawImage(canvas4,100,100);

然后您可以使用合并的画布创建图像 dataURLcontext.toDataURL

var dataURL = canvas.toDataURL();

此外，您可以使用该 dataURL 创建图像对象

var img=new Image();
img.onload=function(){
    document.body.appendChild(img);
}
img.src=dataURL;