Как я могу нарисовать изображение из HTML5 File API на Canvas? - PullRequest
Новая
       15

Как я могу нарисовать изображение из HTML5 File API на Canvas?

45 голосов
/ 21 июля 2011

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

72 голосов
/ 21 июля 2011

У вас есть экземпляр 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.

Ссылки:

12 голосов
/ 21 июля 2011

Живой пример 

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 1010 * Docs *

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

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

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

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

Edit:

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

3 голосов
/ 14 октября 2015

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...