JQuery игнорировать прозрачные области изображений

Question

Я хочу сделать что-то для того, что было сделано здесь:

http://www.cw -internetdienste.de / pixelselection /

Однако, это не сработает, если я просто скопирую файл pixelSelection.js с этого сайта. Я действительно хотел бы сделать свое, не просто что-то, что кто-то еще написал, но я не знаю, как это сделать.

Я пробовал .svg и сопоставление изображений вместе, но даже если я отображаю карту, я не могу навести фоновое изображение в прозрачной области переднего плана, и действительно сложно детально отобразить каждое изображение.

Answer 1

Да, старая версия моего скрипта была довольно глючной, я недавно обновил ее гораздо более настраиваемой и более чистой версией плагина jquery.Я также опубликовал это на github.

http://www.cw -internetdienste.de / pixelselection /

Возможно, новая версия может помочь вам в вашей проблеме.

Answer 2

Вы можете использовать ответ на этот вопрос , чтобы получить значения RGBA для пикселя изображения с помощью JavaScript, я назову это:

isTransparrent(imageUrl, x, y);

Затем, когда вы наводите курсор на изображение, вы можете проверить с помощью этой функции:

$('#some-image').hover(function(e) {
    var isTrans = isTransparent(
        this.src,
        e.pageX - $(this).pageX, // relative x position in image
        e.pageY - $(this).pageY  // relative y position in image
    );
    console.log(isTrans ? 'transparent pixel', 'not transparent pixel');
});