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;
    }
}

将两个图像与JavaScript结合用于水印

1 个答案: