이미지를 HTML5 캔버스에 업로드하는 방법

Question

현재 http://paperjs.org을 사용하여 HTML5 캔버스 그리기 앱을 만듭니다. 사용자가 이미지를 캔버스에 업로드 할 수있게하고 싶습니다. 로그인하고 가입해야하지만 더 쉬운 방법이 있는지 알고 있습니다. HTML5 드래그 앤 드롭 업로드를 보았습니다.

Answer 1

이미지를 캔버스에로드하고 캔버스에서 이미지를 업로드하지 않는다고 가정합니다.

아마 그들이 가진 모든 캔버스 기사를 읽어 좋은 생각이 될 것 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

여기하지만 기본적 싶은 것은 자바 스크립트에서 이미지를 생성하고 image.src을 설정입니다 = 파일 위치가 무엇이든간에 이미지를 사용자가 끝까지로드하는 경우 파일 시스템 API를 사용하려고합니다.

여기에 함께 간단한 예를 던졌다 : http://jsfiddle.net/influenztial/qy7h5/

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

Answer 2

<script> 
window.onload = function() { 
var canvas=document.getElementById(“drawing”); // grabs the canvas element 
var context=canvas.getContext(“2d”); // returns the 2d context object 
var img=new Image() //creates a variable for a new image 

img.src= “images/vft.jpg” // specifies the location of the image 
context.drawImage(img,20,20); // draws the image at the specified x and y location 
} 
</script> 

확인 잘 수행 Demo