将多个画布保存为一个图像(使网站像PicFrame一样）

Save multiple canvas as one image (make website like PicFrame)

本文关键字：图像 网站 一样 PicFrame 一个 布保存 保存      更新时间：2023-09-26

我试图制作类似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>

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

然后，您可以使用context.toDataURL 从合并的画布创建图像数据URL

var dataURL = canvas.toDataURL();

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

var img=new Image();
img.onload=function(){
    document.body.appendChild(img);
}
img.src=dataURL;
相关文章：