在 JavaScript 中合并两个图像答案

【问题标题】：Combine two images in JavaScript在 JavaScript 中合并两个图像
【发布时间】：2018-01-19 08:36:04
【问题描述】：

我正在尝试将来自两个不同 URL 的两个图像组合成一个如下所示的图像：

可以使用 Vanilla JS 或任何节点库。我对代码中的图像没有经验，所以我不确定我在寻找什么，但如果提供一个示例，将不胜感激。粗略的伪代码可能如下所示：

img1 = getImage("url")
img2 = getImage("url")

newImg = mask(img1, img2, args)

return newImg //can be a Buffer, local path, or URL

编辑：我希望它在 Node 中运行，就像在不与 DOM 交互的情况下一样。

【问题讨论】：

你可以从 Node.js 调用 imagemagick，对吗？还有imagemagick.org/script/command-line-options.php#clip-mask
@c-smile 我如何将它转换成 Javascript 的命令？我想这就是我要找的，但我不知道如何使用它
您需要它在浏览器内还是在节点内工作？
@TonyRaoulIscaros 节点

标签： javascript node.js image-processing canvas

【解决方案1】：

您可以使用 Canvas 尝试以下解决方案。

var canvas = document.getElementById("canvas");
var myVar = canvas.getContext("2d");

var img1 = loadImage('anyURL1.png', myFunction);
var img2 = loadImage('anyURL2.jpg', myFunction);

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

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

        myVar.globalAlpha = 0.5;
        myVar.drawImage(img2, 0, 0);
    }
}

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

【讨论】：

这将混合两个图像，但我猜 TS 需要遮罩。
这是一个提示。使用画布drawImage，他可以根据自己的需要准确放置两个图像。
这个解决方案有两个问题。第一个是我正在使用 node.js 画布，而不是 HTML 文件，所以我必须使用 node 的方式来生成我仍在弄清楚的画布。其次，这实际上将图像合并在一起，看起来像this。

【解决方案2】：

可能有一种更简单的方法，但我希望它有所帮助。

    var img1 = new Image();
    var img2 = new Image();
    img1.src = "img1.jpg";
    img2.src = "img2.jpg";
    function imgMask(){ /*call this when both images loaded */
        var combied_imgs = combine(imgToData(img1),imgToData(img2));
        var img3 = dataToImg(combied_imgs);
        document.body.append(img3);
    }

    function imgToData(img){ /* Extract imgdata from img */
        var c=document.createElement("canvas");
        var ctx=c.getContext("2d");
        c.width = img.width;
        c.height = img.height;
        ctx.drawImage(img,0,0);
        return ctx.getImageData(0,0,c.width,c.height);
    }

    function combine(a,b){ /* your masking argument */
        var c = a;
        var ratio =  img1.width/img1.height;
        for (var i = 0; i < a.data.length; i++) {
            var y = (i/4)/c.width;
            var x = (i/4)%c.width; 
            if (x > y*ratio)
                c.data[i] = a.data[i];
            else
                c.data[i] = b.data[i];
        }
        return c;
    }
    function dataToImg(a){ /*img from imgdata */
        var c=document.createElement("canvas");
        c.width = a.width;
        c.height = a.height;
        var ctx = c.getContext("2d");
        ctx.putImageData(a,0,0);
        var img = new Image();
        img.src = c.toDataURL();
        return img;
    }

【讨论】：