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

Question

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

Answer 1

Опираясь на ответ Джеффа, ваш первый шаг - создать холст-представление вашего 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 и * 1005.* чтобы получить должность.Затем его можно использовать для получения пикселя:

var pixelData = canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data;

Поскольку вы захватываете только один пиксель, pixelData - это массив из четырех записей, содержащий значения R, G, B и A пикселя.Для альфы все, что меньше 255, представляет некоторый уровень прозрачности, при этом 0 полностью прозрачен.

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

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

Answer 2

Canvas - отличный способ сделать это, как сказал @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. Просто запустите приведенный выше код в обработчике кликов следующим образом:

$('el').click(function(e){
   console.log(e.clientX, e.clientY)
}

Они должны получить ваши значения x и y.

Answer 3

С: 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);
}

Answer 4

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

MarvinJ предоставляет метод image.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>