Watermark.js增加图像大小

Question

尝试进行图像优化(缩小图像大小)，并在上传到云env(S3)之前向多个图像添加水制造者。

办法：

1. browser-image-compression -使用的浏览器-图像压缩图像优化工作良好，但水印不能add.
2. watermark.js -使用watermark.js没有图像优化，图像的大小增加到2x.

。

等待watermark(compressedFile).blob(watermark.text.center('watermark.js'，‘300 options，'#fff'，0.5)

性能也是这两个操作的关键方面。

不希望在服务器端或云环境中执行任何图像操作(无服务器图像操作)。

是否知道如何添加水印，以及如何在不损失图像质量的情况下优化图像？

谢谢

Answer 1

我有一个类似的用例，用户需要拍照，然后必须将这些图片上传到带有水印的服务器上。

首先添加水印，然后将格式改为JPEG格式，具有良好的质量，不占用watermarkJS的PNG输出那么大的空间。

这是对水印输出(如dataURL)调用的函数：

async convertImageToJpeg(image):Promise<string>{
    return new Promise(function (resolved,rejected) {
      var i = new Image();
      i.onload = function(){
        var canvas = document.createElement("canvas");
        canvas.width = i.width;
        canvas.height = i.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(i,0,0);
        var dataUrl = canvas.toDataURL('image/jpeg', 0.3);
        resolved(dataUrl);
      }
      i.src = image;
    })
  }