我正在尝试在上传图片之前使用 watermark.js 为图片添加水印,但我不太清楚该怎么做。
使用我在 uploadFile 函数的上传部分下方获取的代码可以正常工作,但是图像数据会以某种方式在水印脚本中丢失,并且 AWS S3 上上传的图像只是一个透明的小方 block 。
我还添加了预览图像的功能,它工作正常并按预期显示带有水印的图像。
那么,为什么其中一个函数可以正常工作而另一个函数却有问题,我在 uploadFile 函数中做错了什么?
const uploadFile = file => {
axios.get(`/api/imageUpload/${file.type}`)
.then(uploadConfig => {
watermark([file, '../static/images/watermark_white.png'])
.image(watermark.image.lowerRight())
.then(img => {
axios.put(uploadConfig.data.url, img, {
headers: {
"Content-Type": file.type
},
}).then(() => {
props.onUpload(uploadConfig.data.key);
});
});
});
};
const previewFile = file => {
if (!isImage(file)) {
return;
}
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = () => {
let img = document.createElement("img");
img.src = reader.result;
watermark([img, '../static/images/watermark_white.png'])
.image(watermark.image.lowerRight())
.then(function (img) {
document.getElementById("gallery").appendChild(img);
});
};
};
最佳答案
原来我只需要将 .image(watermark.image.lowerRight())
更改为 .blob(watermark.image.lowerRight())
一切正常.
关于javascript - 在上传带有水印的图像之前为图像添加水印,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54450740/