Automatic image watermark

TecMax

Hi,
I understood that automatic watermark happen only uploading images using files.gallery uploader.
I need only to put a small text in the bottom right, I tried many javascript code (custom.js file) as in the doc example, but none worked.
I tried any combination of the following (commenting and uncommenting), without any result:
_c.config = { uppy: { Compressor: { watermark: { text: '©Rometec srl - www.rometec.it', // overlay text here, if you don't want to assign per-upload position: 'bottom-right', // default overlay alignment interface: false, // disable overlay options from uploader, in which case options from here will always apply scale: .33, // scale the overlay relative to the image width in fraction of 1 / .33 = 33% margin: .03, // overlay margin from the image edges when using all positions except 'center' in fraction of 1 / .03 = 3% font: '10px Arial', // assign a font, which must be available on the device that renders the overlay fillStyle: 'black', // text fill color / only applies for text shadowColor: 'rgba(0,0,0,.25)', // shadow color //shadowBlur: 10, // shadow blur //globalAlpha: .5, // overlay alpha transparency value // image_src: './path/image.png', // assign an image src from a different location //font_src: 'https://fonts.bunny.net/righteous/files/righteous-latin-400-normal.woff2', // assign a font source from a web url } } } }

Karl

TecMax I think watermarking documentation is wrong. Please try this:

_c.config = {
  uppy: {
    Compressor: {
      interface: false, // disable the resizer interface
      enabled: true, // force the interface to apply, even if the interface is disabled
      strict: true, // force images to go through the process, even if they aren't resized (so watermark can apply)
      watermark: {
        text: '©Rometec srl - www.rometec.it', // overlay text here, if you don't want to assign per-upload
        position: 'bottom-right', // default overlay alignment
        //interface: false, // this shouldn't be here!
        scale: .33, // scale the overlay relative to the image width in fraction of 1 / .33 = 33%
        margin: .03, // overlay margin from the image edges when using all positions except 'center' in fraction of 1 / .03 = 3%
        font: '10px Arial', // assign a font, which must be available on the device that renders the overlay
        fillStyle: 'black', // text fill color / only applies for text
        shadowColor: 'rgba(0,0,0,.25)', // shadow color
      }
    }
  }
}

One of the issues with the watermarking feature, is that it's ultimately tied to a "Compressor", with the main task of resizing and/or compressing images. We can only apply the watermark by forcing the Compressor to apply (which is necessary, because the image basically gets recreated and re-compressed after drawing the watermark).

I may need to look into the watermark feature again, and fix the documentation!

TecMax

Ok, this way owrks, but cale and margin must have 2 decimal digits.

Karl

TecMax but cale and margin must have 2 decimal digits.

I'm not sure what you mean by this. In the example, scale: .33 works, but scale: .3 also works.

TecMax

I tried, but .9 doesn't work; instead .90 works. However it's a minor issue. Good job!

Karl

TecMax I tried scale .9 and it works fine. Perhaps you tried something like that for margin? That won't work, because margin needs to be extremely small values like default margin: .03 (0.03 x image width) ... Depending on the scale value and position, if the margin is too high, it might push the watermark outside the image.