web-dev-qa-db-fra.com

Comment puis-je dessiner une image à partir de l'API de fichier HTML5 sur Canvas?

Je voudrais dessiner une image ouverte avec l'API HTML5 File sur une toile.

Dans la méthode handleFiles(e), je peux accéder au fichier avec e.target.files[0] mais je ne peux pas dessiner cette image directement en utilisant drawImage. Comment dessiner une image à partir de l'API File sur un canevas HTML5?

Voici le code que j'ai utilisé:

<!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>
javascripthtml5-canvasfileapidrawimage
46
Jonas

Vous avez une instance File qui n'est pas une image.

Pour obtenir le contenu d'un File, utilisez un FileReader. Passez ensuite le contenu à une instance Image, qui peut être dessinée sur un canevas: http://jsfiddle.net/t7mv6/ .

Pour obtenir une image, utilisez new Image(). src doit être une URL faisant référence au File sélectionné. Vous pouvez utiliser URL.createObjectURL Pour obtenir une URL faisant référence à un Blob (un File est également un 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]);

Remarque: assurez-vous de révoquer l'URL de l'objet lorsque vous en avez terminé, sinon vous perdrez de la mémoire. Si vous ne faites rien de trop fou, vous pouvez simplement coller une URL.revokeObjectURL(img.src) dans la fonction img.onload.

Les références:

73
pimvdb

exemple en direct

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.createObjectUrl docs

Vous pouvez également utiliser le FileReader à la place pour créer l'URL de l'objet.

FileReader a un support de navigateur légèrement meilleur.

L'approche FileReader fonctionne dans FF6/Chrome. Je ne sais pas si la configuration de Img.src à un Blob est valide et inter-navigateur cependant.

La création d'URL d'objet est la bonne façon de le faire.

Modifier:

Comme mentionné dans le commentaire window.URL le support hors ligne ne semble pas disponible dans FF6/Chrome.

12
Raynos

Voici un exemple complet (Fiddle) utilisant FileReader (qui a un meilleur support du navigateur comme mentionné par Raynos). Dans cet exemple, je redimensionne également Canvas pour l'adapter à l'image.

Dans l'exemple réel, vous pouvez redimensionner l'image à un maximum afin que votre formulaire ne explose pas ;-). Voici un exemple avec mise à l'échelle (Fiddle) .

3
Nux