CODEWITHSUNDEEP
javascriptjqueryhtmlimagecanvas
S Strike
S Strike

Reputation: 3

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

I try to make website like PicFrame app so I found this demo :

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

I want to use multiple canvas in the demo and save it to one image. How to save all canvas to one images? Sorry for my english, Thanks!

My HTML code is look like this:

<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>

Upvotes: 0

Views: 2228

Answers (1)

markE
markE

Reputation: 105015

You use context.drawImage to draw images on a canvas. 

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

context.drawImage(myImage,0,0);

Since another canvas can be an image source for drawImage, you can merge multiple canvases onto a single canvas like this:

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

Then you can create an image dataURL from the merged canvas using context.toDataURL

var dataURL = canvas.toDataURL();

Further, you can create an image object using that dataURL

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

Upvotes: 5

Related Questions