Сохранить несколько холст как одно изображение (сделать сайт как 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); 

Тогда вы можете создать dataURL изображение из слитой холста с помощью context.toDataURL

var dataURL = canvas.toDataURL(); 

Кроме того, вы можете создать объект изображения, используя который dataURL

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