CODEWITHSUNDEEP
javascriptcanvas
Alfons-Alpi
Alfons-Alpi

Reputation: 107

Text Watermark in Javascript Canvas

I am currently enhancing a javascript app (run it on browser) by using a signatur pad. By downloading the picture i want to add a watermark text to the picture. Signing on the canvas pad und downloading the base64 string is working fine, but currently i found no way to add a watermark text to the picture.

This is my current code. Here i wanted to add a second canvas in my current canvas (I have the code snippets from other blogposts):

    downloadpic: function () {
      var mypad = this.getView().byId("digitalSignatureId");

      // new
      var dataURL = watermarkedDataURL(mypad,"It's 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());
    },

Overall this code is not working, but i think I'm on the right track, am I? The function watermarkedDataURL should add the watermark. The function downloadpic should download the picture with the watermark.

Upvotes: 1

Views: 2103

Answers (1)

SuperStar518
SuperStar518

Reputation: 2895

If u r interested in watermark-js lib, then I'd love to share my poor snippet with u.

This link is just the documentation u'd better take a look upon.

watermark uses datauri of base64 string for image representation.

// apply watermark on thumbnail
var options = {
  init(img) {
    img.crossOrigin = 'anonymous'; // VERY IMPORTANT!!!
  }
};
// watermark ① text center
watermark([datauri], options)
.image(watermark.text.center('Kindy', '80px serif', 'white', 0.5))
.then(function(img_step1) {
  // watermark ② text lower-right
  watermark([img_step1.src], options)
  .image(watermark.text.lowerRight($scope.selMonthJP, '24px serif', 'white', 0.5))
  .then(function(img_step2) {
    // TODO
    console.log(img_step2.src);
    // HERE, I added 2 watermarks
    // This is a snippet from an Angular.js project
  });
});

Remind that img.crossOrigin = 'anonymous'; is a keypoint.

Upvotes: 1

Related Questions