Cách tải hình ảnh lên canvas HTML5

Question

Tôi hiện đang sử dụng http://paperjs.org để tạo ứng dụng vẽ canvas HTML5. Tôi muốn cho phép người dùng tải hình ảnh lên canvas. Tôi biết tôi cần đăng nhập và đăng ký nhưng có cách nào dễ hơn không? Tôi đã thấy tải lên kéo và thả HTML5.

Answer 1

Tôi giả sử bạn có nghĩa là, để tải hình ảnh vào canvas và không tải lên hình ảnh từ canvas.

Nó có lẽ sẽ là một ý tưởng tốt để đọc qua tất cả các bài viết canvas sở hữu trên đây https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

Nhưng về cơ bản những gì bạn muốn làm là tạo ra một hình ảnh trong javascript, và thiết lập các image.src = cho bất kỳ vị trí tệp nào. Trong trường hợp tải hình ảnh từ người dùng vào cuối của họ, bạn sẽ muốn sử dụng API hệ thống tệp.

Ném cùng một ví dụ ngắn gọn ở đây: 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> 

Kiểm tra Demo