Обработка изображений

Для работы с изображениями предусмотрен только один метод: drowImage(). Возможные варианты использования:

• drowImage(image, x, y). Вывод изображения в точку с координатами x и y.
• drowImage(image, x, y, width, height). Таким образом, можно масштабировать изображение, прежде чем его помещать в холст.
• drowImage(image, x1, y1, width1, height1, x2, y2, width2, height2). Таким образом, можно отрезать часть изображения и вывести его в указанной точке холста, одновременно поменяв размер. Значения x1 и y1 определяют координаты верхнего угла отрезаемого фрагмента изображения. Значения width1 и heigh1 задают размер этого изображения. Остальные значения (x2, y2, width2, height2) объявляют точку, в которой будет выводиться изображение и его размер.

function initiate(){
  var elem = document.getElementById('canvas');
  var canvas=elem.getContext('2d');
  var img = document.createElement('img');
  img.setAttribute('src', 'http://obmenka.by/media/img/we.jpg');
  img.addEventListener("load", function(){
    canvas.drawImage(img, 20, 20);
  });
}
addEventListener("load", initiate);

Изменение размера изрображения

function initiate(){
  var elem = document.getElementById('canvas');
  var canvas = elem.getContext('2d');
  var img = document.createElement('img');
  img.setAttribute('src', 'http://www.minkbooks.com/content/snow.jpg');
  img.addEventListener("load", function(){
    canvas.drawImage(img, 0, 0, elem.width, elem.height);
  });
}
addEventListener("load", initiate);

Т.к. холст может работать только с загруженными изображениями, мы поместили метод drowImage в анонимную функцию, которая вызывается прослушивателем addEventListener по событию load. Таким образом, метод drowImage() внутри функции выводит изображение только в после того, как загрузка завершена.

function initiate(){
  var elem = document.getElementById('canvas');
  var canvas = elem.getContext('2d');
  var img = document.createElement('img');
  img.setAttribute('src', 'http://www.minkbooks.com/content/snow.jpg');
  img.addEventListener("load", function(){
    canvas.drawImage(img, 135, 30, 50, 50, 0, 0, 200, 200);
  });
}
addEventListener("load", initiate);

Кроме метода drowImage(), который работает непосредственно с изображением, существует еще несколько методов, работающих с данными полученного изображения. Рассмотрим три метода для обработки изображения.

• getImageData(x, y, width, height). Считывает прямоугольную часть холста и преобразует ее в массив с данными.
• putImageData(imagedata, x, y). Превращает данные, на которые ссылается imagedata в изображение и выводит его на холст в точку с координатами x и y. Таким образом, это противоположность методу getImageData().
• createImageData(width, height). Создает данные для пустого изображения. Все пикселы пустого изображения черные пикселы.

Каждое изображение можно представить в виде последовательности целых чисел, соответсвющих компонентам RGBA (по четыре значения на каждый пиксел). Группа значений, несущих такую информацию, составляют одно-мерный массив. Позиция каждого из элементов массива вычисляется по формуле

(width x 4 x Y) + (X x 4) = соответствует красному цвету

Результат вычислений соответствует первому пикселу. Для получения цвета для остальных компонентов необходимо прибавлять по единице для каждого компонента

(width x 4 x Y) + (X x 4) + 1 = зеленый

(width x 4 x Y) + (X x 4) + 2 = синий

(width x 4 x Y) + (X x 4) + 3 = альфа-канал

Негатив изображения:

var canvas, img;
function initiate(){
  var elem = document.getElementById('canvas');
  canvas = elem.getContext('2d');
  img = document.createElement('img');
  img.setAttribute('src', 'snow.jpg');
  img.addEventListener("load", modimage);
}
function modimage(){
  canvas.drawImage(img, 0, 0);
  var info = canvas.getImageData(0, 0, 175, 262);
  var pos;
  for(var x = 0; x < 175; x++){
    for(var y = 0; y < 262; y++){
      pos = (info.width * 4 * y) + (x * 4);
      info.data[pos] = 255 - info.data[pos];
      info.data[pos+1] = 255 - info.data[pos+1];
      info.data[pos+2] = 255 - info.data[pos+2];
    }
  }
  canvas.putImageData(info, 0, 0);
}
addEventListener("load", initiate);

Ширина изображения в примере равна 350 px, высота — 262 px. Поэтому, передавая методу getImageData параметры (0, 0, 175, 262), мы вырезаем половину исходного изображения. Вырезанное изображение сохраняется в переменную info. Метод getImageData возвращает объект, который можно обработать, обратившись к его свойствам width, height, data.

Далее, для того, чтобы создать негатив изображения, необходимо обработать каждый пиксел исходной части изображения. Для описания каждого цвета используется значение от 0 до 255. Следовательно, чтобы получить негатив цвета, нужно вычесть из 255 значение цвета

негатив = 255 — цвет

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