Cómo subir imágenes al lienzo de HTML5

Question

Actualmente estoy usando http://paperjs.org para crear una aplicación de dibujo de lienzo HTML5. Quiero que los usuarios carguen imágenes en el lienzo. Sé que necesito iniciar sesión y registrarme, pero ¿hay una manera más fácil? He visto la función de arrastrar y soltar HTML5.

Answer 1

Supongo que quiere decir que desea cargar una imagen en el lienzo y no cargar la imagen desde el lienzo.

probablemente sería una buena idea leer todos los artículos de lona que tienen aquí https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

Pero básicamente lo que quiere hacer es crear una imagen en javascript, y establecer el image.src = a cualquiera que sea la ubicación del archivo. En el caso de cargar imágenes del usuario en su extremo, querrá utilizar la API del sistema de archivos.

arrojó juntos un breve ejemplo aquí: 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> 

Comprobar Demo