Je voudrais dessiner une image ouverte avec l'API de fichier HTML5 sur un canevas.
Dans la 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>
