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

【问题标题】：combining multiple images to one on html5 canvas在 html5 画布上将多个图像合并为一个
【发布时间】：2013-01-22 10:29:11
【问题描述】：

如何在html5画布上将多张图片组合在一起，然后显示为一张图片？

请帮忙。

【问题讨论】：

我现在遇到了类似的问题。我对 html5 canvas 有所了解，但我认为这不是我的关键问题。我关心的是如何定位和压缩不同尺寸的图像。

标签： image html5-canvas

【解决方案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);

【讨论】：

这对我有帮助，太棒了！谢谢！
我的图像、x、y、宽度和高度未定义，我没有看到你在这里定义它。它是在哪里定义的？