Watermark.js增加图像大小

Question

尝试进行图像优化(减小图像大小)，并在上传到cloud env(S3)之前在多个图像中添加watermaker

方法:

1. browser-image-compression-使用浏览器图像压缩图像优化工作完美，但水印无法添加。
2. watermark.js-使用水印.js没有图像优化，图像的大小增加到2倍。

const compressedFile = await imageCompression(file, options)
let compressedFile1 = await watermark([compressedFile]).blob(watermark.text.center('watermark.js',
'300px serif', '#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;
})
}