Загрузка картинок

Последние два элемента управления используются для загрузки картинок с локального диска и с URL. Нам потребуется вспомогательная функция, которая пробует загрузить картинку с URL и заменить ею содержимое холста.

function loadImageURL(cx, url) {

  var image = document.createElement("img");

  image.addEventListener("load", function() {

    var color = cx.fillStyle, size = cx.lineWidth;

    cx.canvas.width = image.width;

    cx.canvas.height = image.height;

    cx.drawImage(image, 0, 0);

    cx.fillStyle = color;

    cx.strokeStyle = color;

    cx.lineWidth = size;

  });

  image.src = url;

}

Нам надо поменять размер холста, чтобы он соответствовал картинке. Почему-то при смене размера холста его контекст забывает все настройки (fillStyle и lineWidth), в связи с чем функция сохраняет их и загружает обратно после обновления размера холста.

Элемент управления для загрузки локального файла использует технику FileReader из главы 18. Кроме используемого здесь метода readAsText у таких объектов есть метод под названием readAsDataURL – а это то, что нам нужно. Мы загружаем файл, который пользователь выбирает, как URL с данными, и передаём его в loadImageURL для вывода на холст.

controls.openFile = function(cx) {

  var input = elt("input", {type: "file"});

  input.addEventListener("change", function() {

    if (input.files.length == 0) return;

    var reader = new FileReader();

    reader.addEventListener("load", function() {

      loadImageURL(cx, reader.result);

    });

    reader.readAsDataURL(input.files[0]);

  });

  return elt("div", null, "Open file: ", input);

};

Загружать файл с URL ещё проще. Но с текстовым полем мы не знаем, закончил ли пользователь набирать в нём URL, поэтому мы не можем просто слушать события “change”. Вместо этого мы обернём поле в форму и среагируем, когда она будет отправлена – либо по нажатии Enter, либо по нажатии кнопки load.

controls.openURL = function(cx) {

  var input = elt("input", {type: "text"});

  var form = elt("form", null,

                 "Open URL: ", input,

                 elt("button", {type: "submit"}, "load"));

  form.addEventListener("submit", function(event) {

    event.preventDefault();

    loadImageURL(cx, form.querySelector("input").value);

  });

  return form;

};

Теперь мы определили все элементы управления, требующиеся нашей программе, но нужно добавить ещё несколько инструментов.

Более 800 000 книг и аудиокниг! 📚

Получи 2 месяца Литрес Подписки в подарок и наслаждайся неограниченным чтением

ПОЛУЧИТЬ ПОДАРОК