캔버스에 여러 이미지를 업로드하고 크기를 조정하는 방법

Question

캔버스에 여러 이미지를 업로드하는 방법은 별도의 레이어가 있고 모든 레이어의 크기도 조정할 수 있습니다. 이 코드의 은 크기를 조정할 수없는 이미지 하나만 업로드했습니다. 하지만 여러 개의 이미지를 업로드하고 있으므로 사용자가 여러 파일을 선택할 수 있습니다 multiple을 지정하여 HTML 입력 요소에 캔버스

$(document).ready(function(e) { 

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

    function handleImage(e){ 
     var reader = new FileReader(); 
     reader.onload = function(event){ 
      var img = new Image(); 
      img.onload = function(){ 
       canvas.width = img.width; 
       canvas.height = img.height; 
       ctx.drawImage(img,0,0); 
      } 
      img.src = event.target.result; 
     } 
     reader.readAsDataURL(e.target.files[0]);  
    } 

}); 




<label>Image File:</label><br/> 
<input type="file" id="imageLoader" name="imageLoader"/> 

<div id="holder"> 
    <canvas id="Layer_1"></canvas> 
</div> 

Answer 1

한 모든 이미지의 크기를 조정해야한다.

그런 다음 handleImage에서 하나의 [0] 대신 여러 개의 e.target.files를 반복 할 수 있습니다.

// resize the original image as desired and draw it at [x,y] 

ctx.drawImage(img,0,0,img.width,img.height,x,y,desiredWidth,desiredHeight);