php - Writing text on an image in javascript -
i need add text uploaded image , upload new image text onto server.
i'd use image on server, means have variable $image_location linking directly image set.
i found code on stackoverflow enables putting text on image upload through upload form.
my question how change instead of uploading image, use image on server.
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script> var maxsize=600, // max width or height of image font='italic small-caps bold 40px/50px arial', // font style fontcolor='white', // font color textx=50, // text x position texty=50, // text y position h=function(e){ var fr=new filereader(); fr.onload=function(e){ var img=new image(); img.onload=function(){ var r=maxsize/math.max(this.width,this.height), w=math.round(this.width*r), h=math.round(this.height*r), c=document.createelement("canvas"),cc=c.getcontext("2d"); c.width=w;c.height=h; cc.drawimage(this,0,0,w,h); cc.font=font; cc.fillstyle=fontcolor; cc.filltext(document.getelementbyid('t').value,textx,texty); this.src=c.todataurl(); document.body.appendchild(this); } img.src=e.target.result; } fr.readasdataurl(e.target.files[0]); } window.onload=function(){ document.getelementbyid('f').addeventlistener('change',h,false); } </script> </head> <body> 1.write text <input type="text" id="t"> 2.add image <input type="file" id="f"> </body> </html>
you can load image canvas so:
var img = new image(); img.onload = function(){ c.width = img.width; c.height = img.height; cc.drawimage(img, 0, 0, img.width, img.height); } img.src = '/path/to/image.jpg'; so looks thing you'd need change img.src variable
Comments
Post a Comment