javascript - Adding a watermark to a canvas that already has an image - HTML5, Canvas -

javascript - Adding a watermark to a canvas that already has an image - HTML5, Canvas -

i have photographic camera video feed , canvas.

the canvas takes image of feed when user clicks submit

<video id="video" width="300" height="200" autoplay></video> </section> <section class="btn"> <button id="btnclick">submit</button><br> </section> <section> <canvas id="canvas" width="300" height="300"> </section>

after user has clicked submit, can click share upload picture.

<input type="button" onclick="uploadex()" value="share" /> <form method="post" accept-charset="utf-8" name="form1"> <input name="hidden_data" id='hidden_data' type="hidden"/> </form>

i want able overlay png on top of image prior user submitting 1st snap clicking on share button.

js uploading pic:

function uploadex() { var canvas = document.getelementbyid("canvas"); var dataurl = canvas.todataurl("image/png"); document.getelementbyid('hidden_data').value = dataurl; var fd = new formdata(document.forms["form1"]); var xhr = new xmlhttprequest(); xhr.open('post', 'uploadscript.php', true); xhr.upload.onprogress = function(e) { if (e.lengthcomputable) { var percentcomplete = (e.loaded / e.total) * 100; console.log(percentcomplete + '% uploaded'); alert('image uploaded'); } }; xhr.onload = function() { }; xhr.send(fd); };

how overlay 2nd image on top (like watermark) when uploading?

here's 1 way using temporary canvas:

create temporary in-memory canvas: document.createelement('canvas')

draw main canvas onto temporary canvas: tempcontext.drawimage(maincanvas,0,0)

add overlapping text (or something) watermark: tempcontext.filltext('mine!',0,0)

get dataurl of temporary canvas: tempcanvas.todataurl()

example code , demo:

class="snippet-code-js lang-js prettyprint-override">var canvas=document.getelementbyid("canvas"); var ctx=canvas.getcontext("2d"); var cw=canvas.width; var ch=canvas.height; var img=new image(); img.crossorigin='anonymous'; img.onload=start; img.src="https://dl.dropboxusercontent.com/u/139992952/earth.jpg"; function start(){ canvas.width=img.width; canvas.height=img.height; ctx.drawimage(img,0,0); var dataurl=watermarkeddataurl(canvas,"it's mine!"); } function watermarkeddataurl(canvas,text){ var tempcanvas=document.createelement('canvas'); var tempctx=tempcanvas.getcontext('2d'); var cw,ch; cw=tempcanvas.width=canvas.width; ch=tempcanvas.height=canvas.height; tempctx.drawimage(canvas,0,0); tempctx.font="24px verdana"; var textwidth=tempctx.measuretext(text).width; tempctx.globalalpha=.50; tempctx.fillstyle='white' tempctx.filltext(text,cw-textwidth-10,ch-20); tempctx.fillstyle='black' tempctx.filltext(text,cw-textwidth-10+2,ch-20+2); // testing adding tempcanvas document document.body.appendchild(tempcanvas); return(tempcanvas.todataurl()); } class="snippet-code-css lang-css prettyprint-override">body{ background-color: ivory; padding:20px;} canvas{border:1px solid red;} class="snippet-code-html lang-html prettyprint-override"><canvas id="canvas" width=300 height=300></canvas> <h2>watermarked...</h2>

javascript html5 html5-canvas overlay watermark