Форум

Амай · #1 (**permalink**) 29.02.2020, 21:01

Нашел скрипт который при клике на изображение получает цвет пикселя

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

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

рони · #2 (**permalink**) 29.02.2020, 21:19

Амай,
getImageData

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

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

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Aetae · #3 (**permalink**) 29.02.2020, 21:20

В вашем коде есть всё что нужно. Вам не хватает только мозгов и гугла™.
Ответ вот:

canvas.getImageData(0, 0, canvas.width, canvas.height).data

Но без мозгов и гугла™ вы всё равно далеко не уедите.

Амай · #4 (**permalink**) 29.02.2020, 21:59

Совсем недавно начал изучать js

Aetae · #5 (**permalink**) 29.02.2020, 22:51

Кто-то говорил о знаниях?
Вы нашли скрипт который делает почти то, что вам надо.
Вы применяете мозги разбирая его на логические части.
Вы применяете гугл к тем частям, что вам не понятны.
Мозги и гугл™- современные решения современных проблем!

Nexus · #6 (**permalink**) 01.03.2020, 16:08

Не так давно писал подобный 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)
);

voraa · #7 (**permalink**) 01.03.2020, 17:22

Не понятно, зачем это

result.weight > 0 ? result : undefined;

Разве {r:0, g:0, b:0, a:0} не значение?
Чем оно хуже любого другого с a = 0?

Представим, что этой функцией получить какую то область, а затем ее обрабатывать. Скажем, уменьшить прозрачность.

Nexus · #8 (**permalink**) 02.03.2020, 13:16

voraa, мне не нужны были данные о пустых пикселях, поэтому там есть эта проверка.
Я нигде не писал, что представленный мною код - решение, которое нужно автору.
Это всего лишь функция, которая позволит получить информацию о пикселе по его координатам.

Форум

Справочник

Discord чат

Курсы javascript