如何在反应中添加水印

Question

能否请您告诉我如何在react js中添加水印。 我正在从此站点获取帮助 http://brianium.github.io/watermarkjs/text.html

这是我的代码 https://codesandbox.io/s/8lr7krkk3l

handle = () => {
    console.log(watermark);
    watermark([
      "https://www.hometown.in/media/product/88/5392/57299/1-product_500.jpg"
    ])
      .image(
        "dsda".lowerRight("watermark.js", "48px Josefin Slab", "#fff", 0.5)
      )
      .then(function(img) {
        console.log(img);
      });
  };

我想显示其中带有水印（任何文本）的图像

Answer 1

您可以使用以下其中一个软件包为图像加水印。

https://www.npmjs.com/package/dynamic-watermark

https://www.npmjs.com/package/image-watermark

Answer 2

您的代码有几个问题

1. 将"dsda"更改为watermark.text
2. 您需要更改跨源请求设置，请参见http://brianium.github.io/watermarkjs/docs.html#watermark
3. 要回答主要问题，即如何使用react进行操作，您需要从输出中提取src属性，并将其传递到渲染fn，然后在其中使用带水印的src创建。