I want to join multiple canvases to make a single image. So is there any method to covert more than one canvases to toDataURL to make a single image?
3 Answers
create a function that takes multiple arguments (canvas elements), puts them on one blank canvas, then returns the dataurl for the newly made canvas.
var getImadeData = function () { var i = arguments.length, tempCanvas = document.createElement("canvas"), ctx = tempCanvas.getContext("2d"); while (i--) { ctx.drawImage(arguments[i], 0, 0); }; return tempCanvas.toDataURL(); }; Now just feed the function multiple canvas elements you want to put into one dataurl like so.
var newData = getImageData(canvas1, canvas2, canvas3); In this example, the last canvas is placed on the blank canvas first so make sure to order your canvas elements appropriately.
2 Comments
Illegal Argument
please provide some explanations along with the code. That way future visitors will know what they are looking and you might receive more upvotes for your contributions
r11
I added some explanation, but it honestly feels a bit superfluous. Was there something in particular that you felt needed more detail?
Yes, the drawImage method on the canvas 2d rendering context accepts canvas elements as image elements. So all you have to do is:
- Create a new canvas
- Get its context
- Draw all other canvases to it with
drawImage - Extract the final image from this new canvas
Comments
try this example hope it will help see here
//html block <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> </canvas> <canvas id="myCanvas1" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <canvas id="Canvasimage" width="500" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <img id="finalimage" width="500" height="100" style="border:1px solid #c3c3c3;"/> //script block function loadImages(sources, callback) { var images = {}; var loadedImages = 0; var numImages = 0; // get num of sources for (var src in sources) { numImages++; } for (var src in sources) { images[src] = new Image(); images[src].onload = function () { if (++loadedImages >= numImages) { callback(images); } }; images[src].src = sources[src]; } } window.onload = function (images) { //Canvas first here var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 200, 100); //Canvas second here var c1 = document.getElementById("myCanvas1"); var ctx1 = c1.getContext("2d"); ctx1.fillStyle = "#00FF00"; ctx1.fillRect(0, 0, 200, 100); //Canvas final here. var canvas = document.getElementById("Canvasimage"); var context = canvas.getContext("2d"); var sources = { darthVader: c.toDataURL("image/png"), yoda: c1.toDataURL("image/png") }; loadImages(sources, function (images) { context.drawImage(images.darthVader, 100, 30, 200, 137); context.drawImage(images.yoda, 350, 55, 93, 104); //finalimage here which has two canvas data var finalimage = document.getElementById("finalimage"); finalimage.src = canvas.toDataURL("image/png"); }); }; 
1 Comment
Muhammad Usman
no. there is one canvas and multiple images. I need multiple canvases
toDataURL()of the later.bennedichbelow is the same approach I was talking about. UsedrawImage()function of canvas. For any further difficulties let us know.