web-dev-qa-db-ja.com

キャンバス-2つの画像を組み合わせて、1つのimg htmlオブジェクトを返しますか？

SrcURLが異なる2つのhtmlimgオブジェクトがあります。これら2つの画像を（キャンバスを使用して）結合し、1つのマージされたimgオブジェクトを作成したいと思います。

これは可能ですか？どうやって？

htmlcanvashtml5-canvas
11
Pauly Dee

両方の画像をキャンバスに描画して、好きなオーバーレイモードと組み合わせることができます。キャンバスからビットマップデータを取得するには、「toDataURL」を使用できます。両方の画像はページと同じドメインからのものである必要があることに注意してください。そうしないと、セキュリティ上の理由からピクセルデータへのアクセスがブロックされます。

8
Variant

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

必要に応じて適応させます。 :)

21
Juho Vepsäläinen