2つの画像をhtml5キャンバスにアップロード

Question

2つ以上の画像を1つのキャンバスにアップロードして、何らかのコラージュを作成しようとしています。写真は同じサイズです。しかし、2番目の画像をアップロードしようとすると、最初の画像は消えます。下にJSfiddleのコードと例があります。なにが問題ですか？ jsfiddle

<div> 
<input type="file" id="imageLoader1" name="imageLoader" /> 
<br/> 
<input type="file" id="imageLoader2" name="imageLoader" /> 
<br/> 
<canvas id="canvas" style="background:red;"></canvas> 
</div> 

そしてJSコード：アイデアは、ここで撮影された

var imageLoader1 = document.getElementById('imageLoader1'); 
var imageLoader2 = document.getElementById('imageLoader2'); 
imageLoader1.addEventListener('change', handleImage, false); 
imageLoader2.addEventListener('change', handleImage, false); 
var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 

function handleImage(e) { 
    if (e.target == imageLoader1) { 
     var reader = new FileReader(); 
     reader.onload = function (event) { 
      var img1 = new Image(); 
      img1.onload = function() { 
       canvas.width = 1000; 
       canvas.height = 500; 
       ctx.drawImage(img1, 0, 0, img1.width, img1.height, 0, 0, img1.width * 0.4, img1.height * 0.4); 
      } 
      img1.src = event.target.result; 
     } 
     reader.readAsDataURL(e.target.files[0]); 
    } 
    if (e.target == imageLoader2) { 
     var reader = new FileReader(); 
     reader.onload = function (event) { 
      var img2 = new Image(); 
      img2.onload = function() { 
       canvas.width = 1000; 
       canvas.height = 500; 
       ctx.drawImage(img2, 0, 0, img2.width, img2.height, img2.width * 0.4, img2.height * 0.4, img2.width * 0.4, img2.height * 0.4); 
      } 
      img2.src = event.target.result; 
     } 
     reader.readAsDataURL(e.target.files[0]); 
    } 
} 

：How to upload image into HTML5 canvas

Answer 1

あなたは、単一のcanvasに複数の画像を重ね合わしようとしている、あなたは二つの異なるpathsを使用する必要がありますまた、.beginPath()メソッドで明確に囲む必要があります。

コードを変更しましたので、ご確認ください。それはあなたのために働くはずです。

function handleImage(e) { 
    if (e.target == imageLoader1) { 
     var reader = new FileReader(); 
     reader.onload = function (event) { 
      var img1 = new Image(); 
      img1.onload = function() { 
       canvas.width = 1000; 
       canvas.height = 500; 
       //added begin path here 
       ctx.beginPath(); 
       ctx.drawImage(img1, 0, 0, img1.width, img1.height, 0, 0, img1.width * 0.4, img1.height * 0.4); 
      } 
      img1.src = event.target.result; 
     } 
     reader.readAsDataURL(e.target.files[0]); 
    } 
    if (e.target == imageLoader2) { 
     var reader = new FileReader(); 
     reader.onload = function (event) { 
      var img2 = new Image(); 
      img2.onload = function() { 
       canvas.width = 1000; 
       canvas.height = 500; 
       //added begin path here 
       ctx.beginPath(); 
       ctx.drawImage(img2, 0, 0, img2.width, img2.height, img2.width * 0.4, img2.height * 0.4, img2.width * 0.4, img2.height * 0.4); 
      } 
      img2.src = event.target.result; 
     } 
     reader.readAsDataURL(e.target.files[0]); 
    } 
} 

代替：

または何を行うことができますcanvasのglobalAlphaプロパティを使用しています。

試行：ctx.globalAlpha = 0.5;。これにより問題が解決する場合があります。

代替2：

あなたは、複数の画像のためのmultiple canvas layerを使用することができます。これにより、画像が直接スーパーインポーズされます。あなたは必要な数の画像をスーパーインポーズすることができます。