Инвертировать цветовые каналы в изображении
: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> |
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> |
<!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> |
Благодарю за помощь! Поясните, пожалуйста, использование свойства crossOrigin?
|
Цитата:
|
Цитата:
Цитата:
Не только загнать, но и вытащить растр. Просто загнать можно что угодно. Да, и кроме этого, в заголовках изображения должен присутствовать Access-Control-Allow-Origin - в нем указаны разрешенные домены для таких действий, или маска * для неограниченного пользования. Гугловскую картинку потому и выбрал, что позволяет. :) Можно также указывать crossorigin прямо в атрибутах тэга <img>. |
Дзен-трансгуманист,
хорошо, а как быть если работаю с картинкой на локальном диске? Если не прописывать это свойство, то Хром заявляет о невозможности выполнить метод getImageData, а в Мозилле скрипт прекрасно срабатывает и без этого св-ва. |
Цитата:
|
Часовой пояс GMT +3, время: 09:28. |