在上传带有水印的图像之前为图像添加水印

Question

我想在上传之前使用 watermark.js 为图像添加水印，但我不太清楚如何操作。

使用我在 uploadFile 函数的上传部分下方获得的代码可以正常工作，但是图像数据以某种方式在水印脚本中丢失，并且在 AWS S3 上上传的图像只是一个透明的小方块。

我还添加了预览图片的功能，效果很好，显示的图片带有水印。

那么，为什么其中一个函数可以运行而另一个函数却有问题，我在 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);
            });
    };
};

Answer 1

原来我只需要将 .image(watermark.image.lowerRight()) 更改为 .blob(watermark.image.lowerRight()) 一切正常。

在上传带有水印的图像之前为图像添加水印

Adding a watermark to a image before uploading with watermarkjs

javascript

watermark

axios