image - 在 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);
  };

现在从画布获取图像数据 URL

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

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

如果你想要ImageData然后使用

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