Объедините два изображения с JavaScript для водяных знаков

Question

Я хотел бы объединить два изображения (одно загруженное с устройства, другое с веб-сайта) и экспортировать их как одно изображение.Изображение, загруженное с устройства, будет фоновым изображением, а изображение с веб-сайта - логотипом для добавления водяного знака в нижнем углу.

Возможно ли это и если да, то с чего мне начать?Спасибо

Answer 1

Мне удалось добавить изображение поверх другого изображения, используя приведенный ниже код Javascript:

function watermarkLogo(elemImage) {
    var canvas = document.getElementById("canvas");
    canvas.width = elemImage.naturalWidth;
    canvas.height = elemImage.naturalHeight;
    var myVar = canvas.getContext("2d");

    var img1 = loadImage(elemImage.src, myFunction);
    var img2 = loadImage('icon.png', myFunction);

    var numberOfImages = 0;
    function myFunction() {
        numberOfImages += 1;

        if(numberOfImages == 2) {
            myVar.drawImage(img1, 0, 0);
            myVar.globalAlpha = 0.5;

            var widthOffset = (canvas.width/3)*2;
            var heightOffset = (canvas.height/3)*2;

            myVar.drawImage(img2, widthOffset-50, heightOffset-50, 100, 100);
        }
    }

    function loadImage(src, onload) {
        var img = new Image();
        img.onload = onload;
        img.src = src;
        return img;
    }
}