如何解决Watermark.js 增加图像大小
尝试进行图像优化(减小图像尺寸)并在上传到云环境(S3)之前将 watermaker 添加到多个图像中。
方法:
- browser-image-compression - 使用浏览器图像压缩图像优化工作完美,但无法添加水印。
- watermark.js - 使用没有图像优化的 watermark.js,图像大小增加到 2 倍。
const compressedFile = await imageCompression(file,options)
let compressedFile1 = await watermark([compressedFile]).blob(watermark.text.center('watermark.js','300px serif','#fff',0.5))
性能也是这两种操作的关键方面。
不想在服务器端或云环境中执行任何图像处理(无服务器图像处理)。
知道如何添加水印并优化图像而不损失图像质量吗?
谢谢
解决方法
我有一个类似的用例,用户需要拍照,然后必须将这些照片上传到带有水印的服务器。
我先加水印,然后把格式改成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);
var dataUrl = canvas.toDataURL('image/jpeg',0.3);
resolved(dataUrl);
}
i.src = image;
})
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。