Merge Image using Javascript -
is possible merge pictures using javascript?
for example, if have 2 rectangle .jpg or .png images files of same size, possible can align side side , produce merged copy of 2 in new .jpg or .png image file?
you can use javascript 'merge' them 1 canvas, , convert canvas image.
var c=document.getelementbyid("mycanvas"); var ctx=c.getcontext("2d"); var imageobj1 = new image(); var imageobj2 = new image(); imageobj1.src = "1.png" imageobj1.onload = function() { ctx.drawimage(imageobj1, 0, 0, 328, 526); imageobj2.src = "2.png"; imageobj2.onload = function() { ctx.drawimage(imageobj2, 15, 85, 300, 300); var img = c.todataurl("image/png"); document.write('<img src="' + img + '" width="328" height="526"/>'); } };
due security, 2 images must on same domain javascript file (i.e http://123.com/1.png
, http://123.com/2.png
, http://123.com/script.js
) otherwise function todataurl()
rise error.
Comments
Post a Comment