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

Я хотел бы нарисовать изображение, открытое с помощью HTML5 File 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>
Источник

3 ответа

Решение

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

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

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

Рекомендации:

Источник

Живой пример

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 документы

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

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

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

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

Редактировать:

Как упомянуто в комментарии window.URL поддержка пока недоступна в FF6 / Chrome.

Источник

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

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

Источник
Другие вопросы по тегам