Научите вас, как использовать Canvas для обработки изображений.

Canvas, что в переводе с китайского означает «холст», имеет новый элемент <canvas> в HTML5, который можно комбинировать с JavaScript для динамического рисования графики на холсте.

Сегодня мы поговорим не о рисовании графики в Canvas, а о том, как обрабатывать картинки.

Этот процесс, вероятно, очень прост и в основном разделен на следующие три этапа:

Да, это так же просто, как засунуть слона в холодильник, ха-ха.

Основные API-интерфейсы Canvas, используемые во всем процессе:

1. Нарисуйте изображение: drawImage().
2. Получить данные изображения: getImageData()
3. Перезапишите данные изображения: putImageData()
4. Экспорт изображения: toDataURL()

Как следует из названия, этот метод используется для рисования изображений на холсте Canvas. Существует три конкретных применения:

① Разместите изображение на холсте: context.drawImage(img,x,y)

② Разместите изображение на холсте и укажите ширину и высоту изображения: context.drawImage(img,x,y,width,height)

③ Вырежьте изображение и расположите вырезанную часть на холсте: context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

Вышеуказанные значения параметров описаны в следующей таблице:

Этот метод используется для получения данных изображения из холста Canvas. Конкретное использование заключается в следующем:

Получите данные пикселей в указанном прямоугольном диапазоне холста: var ImageData = context.getImageData(x,y,width,height)

Вышеуказанные значения параметров описаны в следующей таблице:

Этот метод вернет объект ImageData, который имеет три свойства: ширину, высоту и данные. В основном мы используем именно этот массив данных, поскольку он сохраняет данные каждого пикселя изображения. Имея эти данные, мы можем их обработать и, наконец, переписать на холст Canvas, реализовав таким образом обработку и преобразование картинок. Конкретное использование массива данных мы можем увидеть в следующих примерах.

Этот метод очень прост и используется для перезаписи данных изображения в холст Canvas. Конкретное использование заключается в следующем:

 context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight)

Вышеуказанные значения параметров описаны в следующей таблице:

Этот метод отличается от трех вышеуказанных методов. Это метод объекта Canvas. Этот метод возвращает строку, содержащую URI данных. Эту строку можно напрямую использовать в качестве адреса пути к изображению для заполнения атрибута src <img. > В частности, использование выглядит следующим образом:

 вар dataURL = Canvas.toDataURL (тип, encoderOptions);

Вышеуказанные значения параметров описаны в следующей таблице:

В этом примере кратко показано, как с помощью кода преобразовать цветные изображения в черно-белые.

 <!--HTML--><canvas id=ширина холста=600 высота=600></canvas><input id=тип дескриптора=значение кнопки=обрабатывать изображения/><input id=создать тип=значение кнопки=сгенерировать изображения /><div id=результат></div>

 //JavaScriptwindow.onload = function(){ var Canvas = document.getElementById(canvas), //Получаем объект Canvas context = Canvas.getContext('2d'); //Получаем объект 2D-контекста, большинство API-интерфейсов Canvas так и есть. Этот метод объекта var image = new Image(); //Определите объект изображения image.src = 'imgs/img.jpg'; image.onload = function(){ //Вы должны обратить на это внимание! Все последующие операции необходимо выполнять после успешной загрузки изображения, иначе изображение будет обработано недопустимым context.drawImage(image,0,0); //Начинаем рисовать изображение с верхнего левого угла (0,0) Canvas. Размер холста по умолчанию — Фактический размер изображения var handle = document.getElementById(handle); var create = document.getElementById(create); handle.onclick = function(){ // Нажмите кнопку обработки изображения, чтобы обработать изображение. вар imgData = context.getImageData(0,0,canvas.width,canvas.height); //Получаем объект данных изображения var data = imgData.data; //Получаем массив данных изображения. Каждый пиксель в массиве сохраняется с 4 элементами. Представляет значения красного, зеленого, синего и прозрачности соответственно var Average = 0 for (var i = 0; i < data.length; i+=4) { Average =; Math.floor((data[i]+data[i+1]+data[i+2])/3 //Усредняем значения красного, зеленого и синего, чтобы получить данные значения в оттенках серого[i] = data[i+1] = data[i+2] = среднее; Перезапишите значение цвета каждого пикселя} imgData.data = data; context.putImageData(imgData,0,0); //Переписываем обработанные данные изображения на холст Canvas, и изображение на холсте становится черно-белым}; create.onclick = function(){ // Нажмите кнопку «Создать изображение», чтобы экспортировать изображение var imgSrc = Canvas.toDataURL( ); //Получаем URL-адрес изображения var newImg = new Image(); var result = document.getElementById(result); newImg.src = imgSrc; //Назначаем путь к изображению src; result.innerHTML = ''; result.appendChild(newImg };};

Возможно, приведенный выше код написан не очень хорошо, и его не так-то просто понять. Лучше всего написать его самостоятельно, чтобы глубже понять его.

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.