Как получить цвет координат x,y пикселя из изображения?

Question

Как получить цвет координат x,y пикселя из изображения?

есть ли способ проверить,является ли выбранная(x, y) точка изображения PNG прозрачной?

634 4

javascript html5 image-processing

4 ответов:

Comments

Ничего не найдено.

Brian Nickel · Accepted Answer · 2015-12-22 18:29:20

основываясь на ответе Джеффа, вашим первым шагом было бы создать представление холста вашего PNG. Ниже показано создание холста вне экрана, который имеет ту же ширину и высоту, что и ваше изображение, и имеет изображение, нарисованное на нем.
var img = document.getElementById('my-image');
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
после этого, когда пользователь нажимает кнопку, Использовать event.offsetX и event.offsetY чтобы получить эту должность. Это может быть использовано для получения пикселя:
var pixelData = canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data;
поскольку вы захватываете только один пиксель, pixelData-это массив из четырех записей, содержащий пиксельные значения R, G, B и A. Для alpha все, что меньше 255, представляет некоторый уровень прозрачности, при этом 0 является полностью прозрачным.

вот пример jsFiddle:http://jsfiddle.net/thirtydot/9SEMf/869/ я использовал jQuery для удобства во всем этом, но это ни в коем случае не требуется.

Примечание:getImageData подпадает под политику браузера same-origin для предотвращения утечек данных, что означает, что этот метод не сработает, если вы загрязните холст изображение из другого домена или (я считаю, но некоторые браузеры, возможно, решили это) SVG из любого домена. Это защищает от случаев, когда сайт служит пользовательский ресурс изображения для пользователя, а злоумышленник хочет прочитать изображение, чтобы получить информацию. Вы можете решить проблему, либо обслуживая изображение с того же сервера, либо реализуя Кросс-происхождения совместное использование ресурсов.

Jeff Escalante · Accepted Answer · 2017-05-23 15:18:01

холст был бы отличным способом сделать это, как @pst сказал выше. Проверьте этот ответ для хорошего примера:

getPixel из HTML Canvas?

какой-то код, который будет служить вам специально, а также:
var imgd = context.getImageData(x, y, width, height);
var pix = imgd.data;

for (var i = 0, n = pix.length; i < n; i += 4) {
  console.log pix[i+3]
}
это будет идти строка за строкой,поэтому вам нужно будет преобразовать это в x, y и либо преобразовать цикл for в прямую проверку, либо запустить условное внутри.

читая ваш вопрос снова, похоже, вы хотите быть в состоянии получите точку, на которую человек нажимает. Это можно сделать довольно легко с событие click в jQuery. Просто запустите приведенный выше код внутри обработчика события click, как например:
$('el').click(function(e){
   console.log(e.clientX, e.clientY)
}
Они должны захватить ваши значения x и y.

Gabriel Ambrósio Archanjo · Accepted Answer · 2018-05-21 16:13:04

два предыдущих ответа демонстрируют, как использовать Canvas и ImageData. Я хотел бы предложить ответ с запускаемым примером и с использованием фреймворка обработки изображений, поэтому вам не нужно обрабатывать данные пикселей вручную.

MarvinJ обеспечивает метод изображения.getAlphaComponent (x,y) который просто возвращает значение прозрачности для пикселя в координатах x,y. Если это значение равно 0, пиксель полностью прозрачен, значения от 1 до 254 являются уровни прозрачности, наконец, 255 непрозрачны.

для демонстрации я использовал изображение ниже (300x300) с прозрачным фоном и двумя пикселями в координатах (0,0) и (150,150).

вывод на консоль:

(0,0): прозрачный
(150,150): NOT_TRANSPARENT
image = new MarvinImage();
image.load("https://i.imgur.com/eLZVbQG.png", imageLoaded);

function imageLoaded(){
  console.log("(0,0): "+(image.getAlphaComponent(0,0) > 0 ? "NOT_TRANSPARENT" : "TRANSPARENT"));
  console.log("(150,150): "+(image.getAlphaComponent(150,150) > 0 ? "NOT_TRANSPARENT" : "TRANSPARENT"));
}
<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script>

Hors Sujet · Accepted Answer · 2018-07-15 14:09:01

С : i << 2

const data = context.getImageData(x, y, width, height).data;
const pixels = [];

for (let i = 0, dx = 0; dx < data.length; i++, dx = i << 2) {
    if (data[dx+3] <= 8)
        console.log("transparent x= " + i);
}