画布-组合两个图像，返回一个img html对象？

我有两个具有不同src URL的html img对象。我想合并这两个图像（使用画布），并创建一个合并的img对象

---

这可能吗？如何使用？

您应该使用canvas API getImageData（）

---

您可以在画布上绘制两幅图像，并将它们与您喜欢的任何叠加模式组合。要从画布获取位图数据，可以使用“toDataURL”。请注意，这两个图像应来自与页面相同的域，否则出于安全原因，您对像素数据的访问将被阻止

你可以用。代码：

---

根据需要进行调整。：）

如何在单个画布中并排添加此图像？如何并排添加？您需要更改

drawImage

调用以获得所需的行为。

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

var img1 = loadImage('http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png', main);
var img2 = loadImage('http://introcs.cs.princeton.edu/java/31datatype/peppers.jpg', main);

var imagesLoaded = 0;
function main() {
    imagesLoaded += 1;

    if(imagesLoaded == 2) {
        // composite now
        ctx.drawImage(img1, 0, 0);

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

function loadImage(src, onload) {
    // http://www.thefutureoftheweb.com/blog/image-onload-isnt-being-called
    var img = new Image();

    img.onload = onload;
    img.src = src;

    return img;
}