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

Question

I have a camera video and canvas.

Canvas accepts feed image 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 the user has clicked the “Submit” button, he can click “Share” to upload the image.

  <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 to overlay another png on top of the image to the user. By sending the first binding by clicking the sharing button.

JS to upload pictures:

  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 do I overlay a second image (for example, a watermark) on load?

Answer 1

Here is one way to use a temporary canvas:

• Create a temporary canvas in memory: document.createElement('canvas')

• Draw the main canvas on a temporary canvas: tempContext.drawImage(mainCanvas,0,0)

• Add some overlapping text (or something) as a watermark: tempContext.fillText('Mine!',0,0)

• Get dataURL temporary canvas: tempCanvas.toDataURL()

Sample code and demo:

 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 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); // just testing by adding tempCanvas to document document.body.appendChild(tempCanvas); return(tempCanvas.toDataURL()); } 

 body{ background-color: ivory; padding:20px;} canvas{border:1px solid red;} 

 <canvas id="canvas" width=300 height=300></canvas> <h2>Watermarked...</h2> 

Answer 2

@markE. I tried with the ma code because your demo is exactly what I want to do. But I have some problems with this. First of all, the base64 string is hava. In this "picture" -string I want to add a text watermark.

  downloadpic: function () { var mypad = this.getView().byId("digitalSignatureId"); // new var dataURL = watermarkedDataURL(mypad,"It Mine!"); var imageb64 = dataURL.getPadAsJpeg(); var image = new Image(); var element = document.createElement('a'); image.src = imageb64; element.setAttribute('href', image.src); element.setAttribute('download', 'image'); element.style.display = 'none'; //document.body.appendChild(element); element.click(); //document.body.removeChild(element); //download(image, image.jpeg, "image/jpeg"); }, watermarkedDataURL: function (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); // just testing by adding tempCanvas to document document.body.appendChild(tempCanvas); return(tempCanvas.toDataURL()); }, 

But this does not work for me.