Добавление водяного знака к изображению перед загрузкой с помощью watermarkjs - PullRequest
Новая
       9

Добавление водяного знака к изображению перед загрузкой с помощью watermarkjs

0 голосов
/ 31 января 2019

Я пытаюсь добавить водяной знак к изображению с помощью 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);
            });
    };
};

1 Ответ

0 голосов
/ 31 января 2019

Оказывается, мне нужно было только изменить .image(watermark.image.lowerRight()) на .blob(watermark.image.lowerRight()) и все работает.

...