Question

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

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

我的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);

然后，您可以使用context.toDataURL

从合并的画布创建图像dataURL

var dataURL = canvas.toDataURL();

此外，您可以使用该dataURL

创建图像对象

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

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

1 个答案: