image - html5キャンバスで複数の画像を1つに結合する

Question

複数の画像を html5 キャンバスで結合し、それらを 1 つの画像として表示するにはどうすればよいですか?

助けてください。

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