Question

我目前正在通过使用Signatur Pad来增强javascript应用程序（在浏览器上运行）。通过下载图片，我想向图片添加水印文本。在画布上签名并下载base64字符串可以正常工作，但是目前我找不到将水印文本添加到图片的方法。

这是我当前的代码。在这里，我想在当前的画布中添加第二个画布（我有其他博客文章的代码片段）：

总体而言，此代码无法正常工作，但是我认为我走对了，是吗？函数watermarkedDataURL应该添加水印。 downloadpic函数应下载带有水印的图片。

Answer 1

如果您对watermark-js lib感兴趣，那么我很乐意与您分享我可怜的摘录。

此link只是您最好阅读的文档。

watermark使用 base64字符串的 datauri 表示图像。

// apply watermark on thumbnail
var options = {
  init(img) {
    img.crossOrigin = 'anonymous'; // VERY IMPORTANT!!!
  }
};
// watermark ① text center
watermark([datauri], options)
.image(watermark.text.center('Kindy', '80px serif', 'white', 0.5))
.then(function(img_step1) {
  // watermark ② text lower-right
  watermark([img_step1.src], options)
  .image(watermark.text.lowerRight($scope.selMonthJP, '24px serif', 'white', 0.5))
  .then(function(img_step2) {
    // TODO
    console.log(img_step2.src);
    // HERE, I added 2 watermarks
    // This is a snippet from an Angular.js project
  });
});

提醒img.crossOrigin = 'anonymous';是关键点。

Javascript画布中的文本水印

1 个答案: