javascript - subir - previsualizar imagen input file html

Cómo subir imágenes a lienzo HTML5

Question

Actualmente estoy usando http://paperjs.org para crear una aplicación de dibujo lienzo HTML5. Quiero que los usuarios suban imágenes al lienzo. Sé que necesito hacer un inicio de sesión y un registro, pero ¿hay alguna forma más fácil? He visto la carga de arrastrar y soltar HTML5.

Answer 1

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

Probablemente sea una buena idea leer todos los artículos del lienzo que tienen aquí https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

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

Presentamos 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

Uno no necesita un FileReader *, es mejor usar el método URL.createObjectURL , que creará un enlace simbólico directamente al archivo en el disco. Esto incurrirá en menos uso de memoria y tendrá el beneficio adicional de tener solo un evento asíncrono que esperar (el de img.onload ).

document.getElementById(''inp'').onchange = function(e) {
  var img = new Image();
  img.onload = draw;
  img.onerror = failed;
  img.src = URL.createObjectURL(this.files[0]);
};
function draw() {
  var canvas = document.getElementById(''canvas'');
  canvas.width = this.width;
  canvas.height = this.height;
  var ctx = canvas.getContext(''2d'');
  ctx.drawImage(this, 0,0);
}
function failed() {
  console.error("The provided file couldn''t be loaded as an Image media");
}

<input type="file" id="inp">
<canvas id="canvas"></canvas>

^{* IIRC solo unas pocas versiones de Chrome eran compatibles con FileReader y aún no eran compatibles con URL.createObejctURL, por lo que si tiene como objetivo estas mismas versiones, es posible que necesite FileReader.}

Answer 3

<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>

Ver Demo