Комментарий: html5, такой волшебный. Программа была протестирована в браузере Google. Заинтересованные друзья могут ссылаться на конкретные шаги по реализации GreyScale с использованием Canvas компонента HTML5, описанного в этой статье. Я надеюсь, что это будет полезно для вас.
Создайте новую HTML -страницу и добавьте ее между тегами тела
<canvas> серый фильтр </canvas>
Добавить самый простой сценарий JavaScript
<pre> window.onload = function () {
var canvas = document.getElementbyId ("myCanvas");
<pran> </span> // todo: сделать что -нибудь здесь
}
Код для получения контекста объекта чертежа из объекта Canvas выглядит следующим образом:
var context = canvas.getContext ("2d");
HTML -код для добавления изображения на HTML -страницу выглядит следующим образом
<img src = "hanjiaren.jpg" />
Код JavaScript для получения объекта изображения из объекта HTML IMG выглядит следующим образом:
var Image = document.getElementById ("ImageSource");
Код для рисования полученного изображения в объекте Canvas выглядит следующим образом:
context.drawimage (изображение, 0, 0);
Код для получения данных пикселей изображения из объекта Canvas заключается в следующем:
var canvasdata = context.getimagedata (0, 0, canvas.width, canvas.height);
Код для чтения значений пикселей и реализации расчета серого такого же следующего:
для (var x = 0; x <canvasdata.width; x ++) {
для (var y = 0; y <canvasdata.height; y ++) {
// Индекс пикселя в массиве
var idx = (x + y * canvasdata.width) * 4;
var r = canvasdata.data [idx + 0];
var g = canvasdata.data [idx + 1];
var b = canvasdata.data [idx + 2];
// Рассчитать значение серого шкалы
var grey = .299 * r + .587 * g + .114 * b;
// назначить значение серого шкалы
canvasdata.data [idx + 0] = grey; // Красный канал
canvasdata.data [idx + 1] = grey; // зеленый канал
canvasdata.data [idx + 2] = grey; // Синий канал
canvasdata.data [idx + 3] = 255; // Альфа -канал
// Добавить черную границу
if (x <8 || y <8 || x> (canvasdata.width - 8) || y> (canvasdata.height - 8))
{
canvasdata.data [idx + 0] = 0;
canvasdata.data [idx + 1] = 0;
canvasdata.data [idx + 2] = 0;
}
}
}
Где расчеты серого серого цвета - серого цвета = 0,299 × красный цвет + 0,578 × зеленый цвет + 0,114 * Синий цвет
Значения Pired Pixel - это RGBA, которые представляют красный цвет, зеленый цвет, синий цвет, альфа -канал.
Обработанные данные должны быть перезагружены в холст. Код заключается в следующем:
context.putimagedata (canvasdata, 0, 0);
Окончательный эффект программы заключается в следующем:
Полный исходный код заключается в следующем:
<html>
<голова>
<Скрипт>
window.onload = function () {
var canvas = document.getElementbyId ("myCanvas");
var Image = document.getElementById ("ImageSource");
// Перезагрузка Canvas Deminsion
canvas.width = image.width;
Canvas.height = image.height;
// Получить объект 2D рендеринга
var context = canvas.getContext ("2d");
context.drawimage (изображение, 0, 0);
var canvasdata = context.getimagedata (0, 0, canvas.width, canvas.height);
Alert (canvasdata.width.toString ());
Alert (canvasdata.height.toString ());
// серый фильтр
для (var x = 0; x <canvasdata.width; x ++) {
для (var y = 0; y <canvasdata.height; y ++) {
// Индекс пикселя в массиве
var idx = (x + y * canvasdata.width) * 4;
var r = canvasdata.data [idx + 0];
var g = canvasdata.data [idx + 1];
var b = canvasdata.data [idx + 2];
// Рассчитать значение серого шкалы
var grey = .299 * r + .587 * g + .114 * b;
// назначить значение серого шкалы
canvasdata.data [idx + 0] = grey; // Красный канал
canvasdata.data [idx + 1] = grey; // зеленый канал
canvasdata.data [idx + 2] = grey; // Синий канал
canvasdata.data [idx + 3] = 255; // Альфа -канал
// Добавить черную границу
if (x <8 || y <8 || x> (canvasdata.width - 8) || y> (canvasdata.height - 8))
{
canvasdata.data [idx + 0] = 0;
canvasdata.data [idx + 1] = 0;
canvasdata.data [idx + 2] = 0;
}
}
}
context.putimagedata (canvasdata, 0, 0); // на координациях 0,0
};
</script>
</head>
<тело>
<h2> Привет, мир! </h2>
<img src = "hanjiaren.jpg" />
<canvas> серый фильтр </canvas>
</body>
</html>
Файлы в коде могут заменить любые файлы изображений, которые вы хотите увидеть
Html5, такой волшебный. Программа тестируется в браузере Google.
Последний совет, не пытайтесь запустить приведенный выше код локально. Проверка безопасности Google автоматически блокирует чтение и написание не доменных файлов из браузера.
Лучше всего опубликовать его на Tomcat или на любом веб -сервере контейнеров и просмотреть эффект из браузера Google.