在html5画布上将多个图像组合成一个 [英] combining multiple images to one on html5 canvas

问题描述

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

How to combine multiple images together on html5 canvas and then display them as a single image?

请帮忙。

推荐答案

要在画布上绘制多个图像使用以下代码

To draw multiple Image on canvas use the following code

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

Now Get Image Data URL from canvas

  // 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);

这篇关于在html5画布上将多个图像组合成一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！