Вопросы Теги

Как я могу нарисовать изображение из API файлов HTML5 на холсте?

Я хотел бы нарисовать изображение, открытое с помощью файла HTML5 API на холсте.

В методе handleFiles (e) я могу получить доступ к файлу с помощью e.target.files [0] , но я не могу нарисовать это изображение напрямую с помощью drawImage . Как нарисовать изображение из File API на холсте HTML5?

Вот код, который я использовал: 

<!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>
47
задан pimvdb 30 September 2011 в 11:08
поделиться