Холст - Объединяя два изображения, вернуть один объект img html?

Question

У меня есть два объекта html img с разными URL-адресами src.Я хотел бы объединить эти два изображения (используя холст) и создать один объединенный объект img.

Возможно ли это?Как?

Answer 1

Вы можете использовать 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;
}

Адаптируйте при необходимости.:)

Answer 2

Вы можете нарисовать оба изображения на холсте и комбинировать их с любым режимом наложения, который вам нравится. Чтобы получить растровые данные из холста, вы можете использовать 'toDataURL'. Обратите внимание, что оба изображения должны быть из того же домена, что и страница, в противном случае ваш доступ к данным пикселей будет заблокирован по соображениям безопасности.

Answer 3

Вы должны использовать холст API getImageData () https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas