将多个 canvas 保存为一张图片（使网站像 PicFrame）

Question

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

我想在演示中使用多个 canvas 并将其保存为一个图像。如何将所有 canvas 保存到一张图片？对不起我的英语，谢谢！

我的 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 在 canvas 上绘制图像。

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

context.drawImage(myImage,0,0);

由于另一个 canvas 可以作为 drawImage 的图像源，您可以像这样将多个 canvas 合并到一个 canvas 中：

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

从合并的 canvas 创建图像数据 URL

var dataURL = canvas.toDataURL();

此外，您可以使用该数据 URL 创建图像对象

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

将多个 canvas 保存为一张图片（使网站像 PicFrame）

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

html

javascript

jquery

canvas

image