通过compressor.js 使用图像作为水印答案

【问题标题】：Use image as watermark with compressor.js通过compressor.js 使用图像作为水印
【发布时间】：2021-10-15 00:56:50
【问题描述】：

我正在使用compressor.js 进行图像压缩和水印。但是，对我来说，似乎只有基于文本的水印是可能的。我也想将图像（徽标）添加到水印中。

知道如何通过compressor.js 使用图像作为水印吗？

【问题讨论】：

我相信简单的答案是你不能用compressor.js 做到这一点，至少据我所知。为什么不使用watermark.js？
hmmm... 我想让它变得简单而不添加新的 js 水印。而且我相信使用 canvas 的 drawImage 功能，这可以很容易地实现，我试过但我不是 JS 专家，需要一些帮助。
@Krunal - 你的代码在哪里？你试过什么，你卡在哪里了？

标签： javascript image canvas watermark image-compression

【解决方案1】：

您可以使用drew function 来执行此操作，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/compressorjs/1.0.7/compressor.min.js"></script>
</head>
<body>
  <img id="watermark" src="watermark.png" style="display: none" />
  <h3>Input</h3>
  <div id="input"><img id="image" src="picture.png" style="max-width:250px"></div>
  <h3>Output</h3>
  <div id="output"></div>
  <script>
    window.addEventListener('DOMContentLoaded', function () {
      var Compressor = window.Compressor;
      var URL = window.URL || window.webkitURL;
      var image = document.getElementById('image');   
      var output = document.getElementById('output');
      var watermark = document.getElementById('watermark');
      var xhr = new XMLHttpRequest();

      xhr.onload = function () {
        new Compressor(xhr.response, {
          strict: false,
          drew: function (context, canvas) {
            context.drawImage(
              watermark,
              0,
              0,
              watermark.width,
              watermark.height,
              canvas.width - ((watermark.width / 4) + 10),
              canvas.height - ((watermark.height / 4) + 10),
              (watermark.width / 4),
              (watermark.height / 4))
          },
          success: function (result) {
            var newImage = new Image();
            newImage.src = URL.createObjectURL(result);
            newImage.style = "max-width:250px";
            output.appendChild(newImage);
          },
          error: function (err) {
            window.alert(err.message);
          },
        });
      };

      xhr.open('GET', image.src);
      xhr.responseType = 'blob';
      xhr.send();
    });
  </script>
</body>
</html>

所有除以 4 是因为我的水印图像很大。这不是必需的。

这是之前/之后的屏幕截图：

【讨论】：