Upload image with hard coded watermark? about watermarkjs HOT 2 CLOSED

Since watermark.js accepts multiple types of resources, you could just keep a single Image instance around for the watermark, and use File objects (from a user upload) for the images to watermark.

var mark = new Image();
mark.onload = function () {
  //loop through file inputs
  var input = document.querySelector('input[type=file]');
  for (var i = 0; i < input.files.length; i++) {
    // use the same loaded image in each iteration
    watermark([input.files[i], this])
      .blob(watermark.image.lowerRight(0.5))
      .then(handleUpload);
  }
}
mark.src = '/path/to/watermark.png';

function handleUpload(blob) {
  // whatever your upload implementation is
}

This is just what comes to mind - there may be other ways to do it, but the idea is you can cache the watermark image and use the same instance in multiple watermark operations.

Does this help?

from watermarkjs.

Thanks for the prompt response. You helped me get the wheels turning.

My needs were very basic. I'm not a JavaScript wizard by any means so after poking around all day at the upload.js code and I was able to get it to do what I needed by stripping out code and changing the setTarget function to load the watermark url

function setTarget(file) {
  watermark([file, 'images/logo.jpg']) 
      .image(watermark.image.lowerRight())
      .then(function (img) {
        document.getElementById('preview').appendChild(img);
      })
}

from watermarkjs.