Динамически добавлять изображение на холст - PullRequest
Новая
       17

Динамически добавлять изображение на холст

12 голосов
/ 04 августа 2011

Добрый день, ребята.

Мне интересно, есть ли способ динамически добавить изображение с компьютера пользователя на холст.

Например, у меня есть: 

<canvas id="canvas"></canvas>
<input type="file" id="image-chooser">

Еслипользователь выбирает изображение с вводом, оно добавляется на холст.

Покажите мне любой путь, пожалуйста, следуйте.

Спасибо!

1 Ответ

28 голосов
/ 04 августа 2011

Для этого вы должны быть знакомы с HTML5 Canvas API и File API. И, конечно, эта функция доступна только в браузерах, поддерживающих оба API-интерфейса HTML5.

Процесс для этого:

  1. Отправка события change в элемент ввода файла.
  2. Получить загруженный файл из обработчика событий и получить URL-адрес данных с помощью FileReader объект.
  3. Создайте элемент img с URL-адресом данных и нарисуйте его на холсте.

Я сделал простой пример на jsfiddle. Код выглядит так: 

<canvas id="canvas"></canvas>
<input type="file" id="file-input">
<script>
$(function() {
    $('#file-input').change(function(e) {
        var file = e.target.files[0],
            imageType = /image.*/;

        if (!file.type.match(imageType))
            return;

        var reader = new FileReader();
        reader.onload = fileOnload;
        reader.readAsDataURL(file);
    });

    function fileOnload(e) {
        var $img = $('<img>', { src: e.target.result });
        $img.load(function() {
            var canvas = $('#canvas')[0];
            var context = canvas.getContext('2d');

            canvas.width = this.naturalWidth;
            canvas.height = this.naturalHeight;
            context.drawImage(this, 0, 0);
        });
    }
});
</script>

Существует множество хороших руководств по API файлов, таких как , или , .

.
...