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

Ответ 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 и event.offsetY, чтобы получить позицию. Затем это можно использовать для получения пикселя:

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 из любого домена. Это защищает от случаев, когда сайт обслуживает пользовательский объект изображения для зарегистрированного пользователя, и злоумышленник хочет прочитать изображение для получения информации. Вы можете решить эту проблему, либо показывая изображение с того же сервера, либо реализуя совместное использование ресурсов для разных источников.

Ответ 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 в прямую проверку, либо выполнить условный код внутри.

Повторяя свой вопрос, похоже, вы хотите, чтобы у вас была возможность указать, что человек нажимает. Это можно сделать довольно легко с помощью события jquery click. Просто запустите указанный выше код внутри обработчика кликов как такового:

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

Те должны захватить ваши значения x и y.

Ответ 3

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

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

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

Консольный выход:

(0,0): ПРОЗРАЧНО
(150 150): NOT_TRANSPARENT

var canvas = document.getElementById("canvas");
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>
<canvas id="canvas" width="500" height="344"></canvas>