Форум

Lizzzy · #1 (**permalink**) 01.05.2014, 18:27

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

<!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>

рони · #2 (**permalink**) 01.05.2014, 18:39

Lizzzy,
Пожалуйста, отформатируйте свой код!

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

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый 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>

Дзен-трансгуманист · #3 (**permalink**) 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/VGUUvR4oz27lmDjGIfAJFPWkkDxlfQRzhOWp8wyJhoCVnzPlyzxOkdX6YgA4j_WyS7TY3lJvZfAnoHl4ZqBYRpWg2gxAzzXfdPEc4G1o=s660';

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

</script>
</body>
</html>

Lizzzy · #4 (**permalink**) 01.05.2014, 20:13

Благодарю за помощь! Поясните, пожалуйста, использование свойства crossOrigin?

kobezzza · #5 (**permalink**) 01.05.2014, 20:27

Цитата:

Поясните, пожалуйста, использование свойства crossOrigin?

Это чтобы картинку с другого домена можно было в canvas загнать.

Дзен-трансгуманист · #6 (**permalink**) 01.05.2014, 20:56

Сообщение от Lizzzy

Поясните, пожалуйста, использование свойства crossOrigin?

Сообщение от kobezzza

Это чтобы картинку с другого домена можно было в canvas загнать.

kobezzza,
Не только загнать, но и вытащить растр. Просто загнать можно что угодно.

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

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

Можно также указывать crossorigin прямо в атрибутах тэга <img>.

Lizzzy · #7 (**permalink**) 01.05.2014, 22:13

Дзен-трансгуманист,
хорошо, а как быть если работаю с картинкой на локальном диске? Если не прописывать это свойство, то Хром заявляет о невозможности выполнить метод getImageData, а в Мозилле скрипт прекрасно срабатывает и без этого св-ва.

Дзен-трансгуманист · #8 (**permalink**) 02.05.2014, 00:10

Сообщение от Lizzzy

как быть если работаю с картинкой на локальном диске?

Через File API, например.

Форум

Справочник

Discord чат

Курсы javascript