将两个图像与 JavaScript 合并为水印答案

【问题标题】：Combine Two Images with JavaScript for Watermark将两个图像与 JavaScript 合并为水印
【发布时间】：2019-07-06 05:05:57
【问题描述】：

我想合并两张图片（一张从设备上传，另一张从网站上传）并将它们导出为一张图片。从设备上传的图像将是背景图像，而来自网站的图像是用于制作底角水印的徽标。

这可能吗？如果可以，我应该从哪里开始？谢谢

【问题讨论】：

HTML5 Canvas API
看看here

标签： javascript html image watermark

【解决方案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;
    }
}

【讨论】：