Отображение значений пикселей canvas
Нашел скрипт который при клике на изображение получает цвет пикселя
<body> <canvas width="600" height="440" id="canvas_picker"></canvas> <div id="hex">HEX: <input type="text"></input></div> <div id="rgb">RGB: <input type="text"></input></div> <div id="rgb5"style=' margin-left: 333px; position: absolute; margin-top: 325px; width:60px;height:70px; border: 1px solid #000;' > </div> <script type="text/javascript"> var canvas = document.getElementById('canvas_picker').getContext('2d'); // создание изображения var img = new Image(); img.src = 'dv.jpg'; // копируем изображение в canvas $(img).load(function(){ canvas.drawImage(img,0,0); }); function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)} function toHex(n) { n = parseInt(n,10); if (isNaN(n)) return "00"; n = Math.max(0,Math.min(n,255)); return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16); } $('#canvas_picker').click(function(event){ // получение координат var x = event.pageX - this.offsetLeft; var y = event.pageY - this.offsetTop; // получение цвета пикселя var img_data = canvas.getImageData(x, y, 1, 1).data; var R = img_data[0]; var G = img_data[1]; var B = img_data[2]; var rgb = R + ',' + G + ',' + B; // конвертируем из RGB в HEX var hex = rgbToHex(R,G,B); // показываем значения $('#rgb input').val(rgb); $('#hex input').val('#' + hex); $('#rgb5').css('background-color', hex ); }); </script> </body> мне нужно получить не цвет пикселя на который будут нажимать, а цвета всех пикселей изображения в виде массива чтобы я мог в дальнейшем работать как изменить код чтобы например выводились значения всех пикселей изображения, а не то на что кликнули? |
Амай,
getImageData Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
В вашем коде есть всё что нужно. Вам не хватает только мозгов и гугла™.
Ответ вот: canvas.getImageData(0, 0, canvas.width, canvas.height).dataНо без мозгов и гугла™ вы всё равно далеко не уедите. |
Совсем недавно начал изучать js
|
Кто-то говорил о знаниях?
Вы нашли скрипт который делает почти то, что вам надо. Вы применяете мозги разбирая его на логические части. Вы применяете гугл к тем частям, что вам не понятны. Мозги и гугл™- современные решения современных проблем! |
Не так давно писал подобный helper:
var imageWidth = canvas.width, imageHeight = canvas.height, ctx = canvas.getContext('2d'); var getPixelDataByCoordinates = (function () { var imageData = ctx.getImageData(0, 0, imageWidth, imageHeight).data; return function (x, y) { var pixelIndex = ((y * (imageWidth * 4)) + (x * 4)); if (!(pixelIndex in imageData)) { return undefined; } var result = { r: imageData[pixelIndex], g: imageData[pixelIndex + 1], b: imageData[pixelIndex + 2], a: imageData[pixelIndex + 3] }; result.weight = result.r + result.g + result.b + result.a; return result.weight > 0 ? result : undefined; }; })(); console.log( getPixelDataByCoordinates(0, 0) ); |
Не понятно, зачем это
result.weight > 0 ? result : undefined; Разве {r:0, g:0, b:0, a:0} не значение? Чем оно хуже любого другого с a = 0? Представим, что этой функцией получить какую то область, а затем ее обрабатывать. Скажем, уменьшить прозрачность. |
voraa, мне не нужны были данные о пустых пикселях, поэтому там есть эта проверка.
Я нигде не писал, что представленный мною код - решение, которое нужно автору. Это всего лишь функция, которая позволит получить информацию о пикселе по его координатам. |
Часовой пояс GMT +3, время: 12:05. |