javascript - mano - ¿Cómo puedo dibujar una imagen de la API de archivos HTML5 en Canvas?
fillrect canvas (3)
Me gustaría dibujar una imagen abierta con la API de archivos HTML5 en un lienzo.
En el handleFiles(e) , puedo acceder al archivo con e.target.files[0] pero no puedo dibujar esa imagen directamente usando drawImage . ¿Cómo dibujo una imagen de la API de archivos en el lienzo de HTML5?
Aquí está el código que he usado:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script>
window.onload = function() {
var input = document.getElementById(''input'');
input.addEventListener(''change'', handleFiles);
}
function handleFiles(e) {
var ctx = document.getElementById(''canvas'').getContext(''2d'');
ctx.drawImage(e.target.files[0], 20,20);
alert(''the image is drawn'');
}
</script>
</head>
<body>
<h1>Test</h1>
<input type="file" id="input"/>
<canvas width="400" height="300" id="canvas"/>
</body>
</html>
Aquí hay un ejemplo completo (Fiddle) que utiliza FileReader (que tiene una mejor compatibilidad con el navegador como lo menciona Raynos). En este ejemplo, también escalo Canvas para que se ajuste a la imagen.
En el ejemplo de la vida real, puede escalar la imagen a un máximo para que su forma no explote ;-). Aquí hay un ejemplo con escalado (Fiddle) .
Usted tiene una instancia de File que no es una imagen.
Para obtener contenidos de un File , use un FileReader .A continuación, pase los contenidos a una instancia de Image , que se puede dibujar en un lienzo: http://jsfiddle.net/t7mv6/ .
Para obtener una imagen, use la new Image() . El src necesita ser una URL que haga referencia al File seleccionado. Puede usar URL.createObjectURL para obtener una URL que haga referencia a una Blob (un File también es una Blob ): http://jsfiddle.net/t7mv6/86/ .
var ctx = document.getElementById(''canvas'').getContext(''2d'');
var img = new Image;
img.onload = function() {
ctx.drawImage(img, 20,20);
alert(''the image is drawn'');
}
img.src = URL.createObjectURL(e.target.files[0]);
Nota: asegúrese de revocar la url del objeto cuando haya terminado, de lo contrario, perderá memoria. Si no está haciendo nada demasiado loco, puede pegar un URL.revokeObjectURL(img.src) en la función img.onload .
Referencias
function handleFiles(e) {
var ctx = document.getElementById(''canvas'').getContext(''2d'');
var url = URL.createObjectURL(e.target.files[0]);
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 20, 20);
}
img.src = url;
}
window.URL.createObjectUrldocs
También podría usar FileReader para crear la URL del objeto.
El FileReader tiene un soporte de navegador ligeramente mejor.
El enfoque FileReader funciona en FF6 / Chrome. No estoy seguro de si la configuración de Img.src en una Blob es válida y cruzada de navegador.
Crear URLs de objetos es la forma correcta de hacerlo.
Editar:
Como se menciona en la ventana de window.URL soporte de window.URL mientras está desconectado no parece estar disponible en FF6 / Chrome.