html2canvas给图片添加水印,canvas 为图片添加水印

要使用html2canvas给图片添加水印，可以使用以下步骤：

1. 首先，在HTML页面中加载需要添加水印的图片。

<div id="target">
  <img src="image.jpg" alt="Image" />
</div>

2. 然后，使用html2canvas将图片转换为canvas元素。

html2canvas(document.querySelector("#target")).then(canvas => {
  // 添加水印
});

3. 接下来，使用canvas API在图片上添加水印。可以使用以下代码片段添加简单的文本水印：

// 获取canvas上下文
const ctx = canvas.getContext("2d");

// 添加文本水印
ctx.font = "bold 30px Arial";
ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
ctx.fillText("Watermark", 50, 50);

4. 最后，使用canvas.toDataURL()方法将canvas转换为带有水印的图片。

const watermarkedImage = canvas.toDataURL();

这样就得到了一张带有水印的图片。需要注意的是，文本水印只是一个示例，你也可以使用其他方式添加自己的水印。

相关问题

html2canvas 导出图片加水印

HTML2Canvas是一个JavaScript库，它能够将HTML页面转换成canvas元素，然后通过canvas的toDataURL方法获取图像数据URL，进而可以将这个图片作为链接下载或插入到其他地方，如网页或PDF中。如果你想给导出的图片添加水印，可以在将HTML转换为canvas之前，先在原始HTML上动态创建一个包含文字的`<span>`或者其他元素，并设置其透明度或定位属性，使其覆盖在你要显示的内容上。

以下是简单的步骤：

1. 引入HTML2Canvas库和CSS样式相关的库（如font-face，用于加载字体）。
2. 使用HTML2Canvas创建canvas：

   html2canvas(document.querySelector('#your-html-element')).then(function(canvas) {
       // canvas is now ready
   });

3. 添加水印文字到HTML结构：

   <div id="your-html-element">
       <!-- Your HTML content here -->
       <span class="watermark">Your Watermark</span>
   </div>

4. 设计CSS样式来调整水印的位置和透明度：

   .watermark {
       position: absolute;
       top: 5px; /* adjust as needed */
       left: 10px; /* adjust as needed */
       color: rgba(0,0,0,0.5); /* transparency can be adjusted with rgba values */
       font-family: 'Arial', sans-serif;
   }

请注意，由于浏览器的安全限制，某些复杂的操作（如跨域或添加透明度很高的文本）可能无法完全按照预期工作。在实际应用中，你可能需要处理这些情况，例如使用Web Workers或者服务器端生成带水印的图片。

帮我写一段微信小程序使用 canvas 给图片添加水印的完整代码

好的，以下是使用 canvas 给图片添加水印的微信小程序完整代码：

1. 在 wxml 文件中添加一个 canvas 标签和一个 image 标签，用于显示原始图片和添加水印后的图片：

<canvas canvas-id="myCanvas"></canvas>
<image src="{{imageUrl}}" mode="aspectFit"></image>

2. 在 js 文件中，获取 canvas 上下文并绘制原始图片：

const ctx = wx.createCanvasContext('myCanvas')
ctx.drawImage(this.data.imageUrl, 0, 0, 300, 300)
ctx.draw()

3. 在绘制水印之前，需要等待原始图片加载完成，可以使用 wx.getImageInfo 方法获取图片信息，然后在 success 回调函数中绘制水印：

wx.getImageInfo({
  src: this.data.imageUrl,
  success: (res) => {
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.drawImage(res.path, 0, 0, 300, 300)
    ctx.setFontSize(20)
    ctx.setFillStyle('rgba(255, 255, 255, 0.5)')
    ctx.fillText('水印文字', 10, 30)
    ctx.draw(true, () => {
      wx.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success: (res) => {
          this.setData({
            imageUrl: res.tempFilePath
          })
        }
      })
    })
  }
})

4. 最后，将添加水印后的图片显示在 image 标签中：

<image src="{{imageUrl}}" mode="aspectFit"></image>

希望这个代码可以帮助到你！