将多个图像合并为一个在html5画布上

Question

如何在html5画布上将多个图像组合在一起，然后将它们显示为单个图像？

请帮忙。

Answer 1

要绘制多个图像在画布上用下面的代码

var canvas = document.getElementById('canvas_id'); 
    var context = canvas.getContext('2d'); 

    var imageObj1 = new Image(); 
    imageObj1.src = "your image source" 
    imageObj1.onload = function() { 
    context.drawImage(imageObj1, x, y); 
    }; 

var imageObj2 = new Image(); 
    imageObj2.src = "your image source" 
    imageObj2.onload = function() { 
    context.drawImage(imageObj2, x, y); 
    }; 

立即取得帆布

// get png data url 
    var pngUrl = canvas.toDataURL(); 

// get jpeg data url 
var jpegUrl = canvas.toDataURL('image/jpeg'); 

图像数据URL如果你想的ImageData然后用

context.getImageData(x,y,width,height);