Вход

Просмотр полной версии : Инвертировать цветовые каналы в изображении

Lizzzy
01.05.2014, 18:27
:help: Подскажите новичку! Пожалуйста! Нужно инвертировать цветовые каналы в изображении. Не могу понять, что не так написала в скрипте?

<!doctype html>
<html>
<meta charset='utf-8'>
<head>
<title></title>
</head>
<body>
<canvas id='image' width="500" height="375" style="border:1px solid"></canvas>
<script language="JavaScript" type="text/javascript">
var img = document.getElementById('image'),
context = img.getContext('2d'),
pic = new Image();
pic.src = 'img/penguins.png';
pic.onload = function()
{
context.drawImage(pic, 0, 0);
}
var pic = context.getImageData(0, 0, pic.width, pic.height);
var pix = pic.data; // Обойти все пиксели изображения и инвертировать цвет.
for (var i = 0, n = pix.length; i < n; i += 4)
{
pix[i] = 255; // красный канал
pix[i+1] = 255 - pix[i+1]; // зеленый канал
pix[i+2] = 255 - pix[i+2]; // синий канал
}
// Отрисовать объект ImageData в заданных координатах (x,y).
context.putImageData(pic, 0, 0);
</script>
</body>
</html>
рони
01.05.2014, 18:39
Lizzzy,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:


... ваш код...



О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
<!doctype html>
<html>
<meta charset='utf-8'>

<head>
<title></title>
</head>

<body>
<canvas id='image' width="500" height="375" style="border:1px solid"></canvas>
<script language="JavaScript" type="text/javascript">
var img = document.getElementById('image'),
context = img.getContext('2d'),
pic = new Image();
pic.src = 'img/penguins.png';
pic.onload = function () {
context.drawImage(pic, 0, 0);
var p = context.getImageData(0, 0, pic.width, pic.height);
var pix = p.data;
// Обойти все пиксели изображения и инвертировать цвет.
for (var i = 0, n = pix.length; i < n; i += 4) {
pix[i] = 255; // красный канал
pix[i + 1] = 255 - pix[i + 1]; // зеленый канал
pix[i + 2] = 255 - pix[i + 2]; // синий канал
}
// Отрисовать объект ImageData в заданных координатах (x,y).
context.putImageData(p, 0, 0);
}
</script>
</body>

</html>
Дзен-трансгуманист
01.05.2014, 19:03
<!doctype html>
<html>
<meta charset='utf-8'>
<head><title></title></head>
<body>
<canvas id='image' width="500" height="375" style="border:1px solid"></canvas>
<script language="JavaScript" type="text/javascript">

var img = document.getElementById('image'),
context = img.getContext('2d'),
pic = new Image();

pic.crossOrigin = "Anonymous"; // client-enabled CORS to test on cross-origin google-doodle
pic.onload = function () {

// dont forget to update canvas size

context.canvas.width = pic.width;
context.canvas.height = pic.height;
context.drawImage(pic, 0, 0);

// do everything ONLY after async callback was fired

var imageData = context.getImageData(0, 0, pic.width, pic.height);
var pix = imageData.data;
for (var i = 0, n = pix.length; i < n; i += 4) {
pix[i] = 255 - pix[i]; // красный канал
pix[i + 1] = 255 - pix[i + 1]; // зеленый канал
pix[i + 2] = 255 - pix[i + 2]; // синий канал
}

context.putImageData(imageData, 0, 0);
};

// it could be better to set src AFTER setting callback
pic.src = 'http://lh5.ggpht.com/VGUUvR4oz27lmDjGIfAJFPWkkDxlfQRzhOWp8wyJhoCVnzPlyz xOkdX6YgA4j_WyS7TY3lJvZfAnoHl4ZqBYRpWg2gxAzzXfdPEc 4G1o=s660';

document.body.insertBefore( pic, img );
document.body.insertBefore( document.createElement('br'), img );

</script>
</body>
</html>
Lizzzy
01.05.2014, 20:13
Благодарю за помощь! Поясните, пожалуйста, использование свойства crossOrigin?
kobezzza
01.05.2014, 20:27
Поясните, пожалуйста, использование свойства crossOrigin?

Это чтобы картинку с другого домена можно было в canvas загнать.
Дзен-трансгуманист
01.05.2014, 20:56
Поясните, пожалуйста, использование свойства crossOrigin?
Это чтобы картинку с другого домена можно было в canvas загнать.
kobezzza,
Не только загнать, но и вытащить растр. Просто загнать можно что угодно.

Да, и кроме этого, в заголовках изображения должен присутствовать Access-Control-Allow-Origin - в нем указаны разрешенные домены для таких действий, или маска * для неограниченного пользования.

Гугловскую картинку потому и выбрал, что позволяет. :)

Можно также указывать crossorigin прямо в атрибутах тэга <img>.
Lizzzy
01.05.2014, 22:13
Дзен-трансгуманист,
хорошо, а как быть если работаю с картинкой на локальном диске? Если не прописывать это свойство, то Хром заявляет о невозможности выполнить метод getImageData, а в Мозилле скрипт прекрасно срабатывает и без этого св-ва.
Дзен-трансгуманист
02.05.2014, 00:10
как быть если работаю с картинкой на локальном диске?
Через File API, например (http://stackoverflow.com/a/13939150).