Question

我正在尝试使用watermark.js在图像上载水印之前将其添加，但是我还不太清楚该怎么做。

使用我在uploadFile函数的upload部分下面的代码可以正常工作，但是图像数据以某种方式丢失在水印脚本中，并且在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())，一切正常。

使用watermark.js上传之前，向图像添加水印

1 个答案: