Feature - Watermark

[wideawakening]

Hiya,

Any chances of having some rendering options in order to add a watermark to the resulting image?

[tsayen]

that looks like a possibly nice feature, but there are too many different use cases. Should it be a text? Or an image watermark? There probably should be some parameters like position, orientation, opacity and so on. Can you elaborate?

[wideawakening]

All what you state makes sense, but in our case we would go for image-type watermark

• src (file would come handy)
• x,y,width,height

thx for the consideration

[jtrod]

is it possible to add some feature like this:

https://www.youtube.com/watch?v=CRZst_Y_WoA

[cnatis]

I just wanted to add that https://github.com/tsayen/dom-to-image/issues/111 could be a solution for this too

[bizaybsnt]

any update in this issue?? I can't use html2canvas since it doesn't render CSS properly in the image.

[tomzweb]

If anyone's interested, there is a method you can add a watermark using a background image in the properties style object, however, the image url has to be base64.

E.g.

{
  style: {
    padding:'100px 40px 40px 40px',
    backgroundColor: '#000',
    backgroundPosition: 'center 30px',
    backgroundSize: '140px',
    backgroundRepeat: 'no-repeat',
    backgroundImage: 'url("data:image/png;base64,<base64>"'
  },
  height: html.offsetHeight + 160,
  width: html.offsetWidth + 80,
}