在使用水印上传之前向图像添加水印

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()) 即可。