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

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

В методе handleFiles(e) я могу получить доступ к файлу с помощью e.target.files[0], но я не могу рисовать это изображение напрямую, используя drawImage. Как рисовать изображение из файла 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>

Ответы

Ответ 1

У вас есть экземпляр File, который не является изображением.

Чтобы получить содержимое File, используйте FileReader. Затем передайте содержимое экземпляру Image, который можно нарисовать на холсте: http://jsfiddle.net/t7mv6/.

Чтобы получить изображение, используйте new Image(). src должен быть URL-адресом, относящимся к выбранному File. Вы можете использовать URL.createObjectURL для получения URL-адреса, ссылающегося на Blob (a File также 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]);

Примечание. обязательно удалите URL-адрес объекта, когда вы закончите с ним, иначе вы будете утечка памяти. Если вы не делаете ничего сумасшедшего, вы можете просто вставить URL.revokeObjectURL(img.src) в функцию img.onload.

Литература:

Ответ 2

Живой пример

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

Вместо этого вы можете использовать FileReader для создания URL-адреса объекта.

FileReader имеет немного лучшую поддержку браузера.

Подход FileReader работает в FF6/Chrome. Я не уверен, что установка Img.src в Blob действительна и кросс-браузер.

Создание URL-адресов объектов - правильный способ сделать это.

Edit:

Как упоминалось в Commment window.URL поддержка, в то время как офлайн кажется недоступным в FF6/Chrome.

Ответ 3

Вот полный пример (скрипт) с помощью FileReader (который имеет лучшую поддержку браузера, как упоминалось Raynos). В этом примере я также масштабирую Canvas, чтобы соответствовать изображению.

В реальной жизни вы можете масштабировать изображение до некоторого максимума, чтобы ваша форма не взорвалась;-). Вот пример с масштабированием (Fiddle).