CODEWITHSUNDEEP
javascripthtmlhtml5-canvasoverlaywatermark
Cody Raspien
Cody Raspien

Reputation: 1835

How to add a watermark to a canvas that already has an image?

I have a camera video feed and a canvas.

The canvas takes the image of the 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, he can click Share to upload the 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 to be able to overlay another png on top of the image prior to user Submitting the 1st snap by clicking on share button.

JS for 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 do I overlay a 2nd image on top (like watermark) when uploading?

Upvotes: 8

Views: 20673

Answers (1)

markE
markE

Reputation: 105015

Here's one way using a temporary canvas:

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

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

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

  • Get the dataURL of the temporary canvas: tempCanvas.toDataURL()

enter image description here

Example code and a 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://i.sstatic.net/ithV0ACj.png";


function start() {
  const canvasWidth = Math.min(img.width, 450);
  const canvasHeight = Math.min(img.height, 450);
  canvas.width = canvasWidth
  canvas.height = canvasHeight;
  ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
  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);
  // 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>

Upvotes: 23

Related Questions