Клик по картинке на js

#javascript #jquery #canvas

Как сделать на js клик по картинке? попытался через jquery, но не срабатывает.



var cvs=document.getElementById("canvas"); // подключаем полотно для отображения кода
var ctx = cvs.getContext("2d"); 
var image1=new Image(); // добавляем картинку 

image1.src="https://cdn.pixabay.com/photo/2018/03/08/21/49/lighthouse-3209985_960_720.jpg";
 // адрес картинка

function  q92(){ 
    ctx.drawImage(image1,0,0); 
}

image1.onload=q92; // когда картинка загрузится отрисовываем её
image1.class="qwer";

$('.qwer').on("click", function() {// функция которая должна рабоатать при клике
но не работает 
  alert("adsads");
});

 



    

Ответы

Ответ 1

Image, который Вы создали, не вставлен в DOM страницы. Поэтому щелкнуть по нему -
невозможно. Канвас, напротив, является элементом DOM.



var cvs = document.getElementById("canvas"); // подключаем полотно для отображения кода

var ctx = cvs.getContext("2d");

var image1 = new Image(); // добавляем картинку 

image1.src = "https://cdn.pixabay.com/photo/2018/03/08/21/49/lighthouse-3209985_960_720.jpg";
// адрес картинка

function q92() {
  ctx.drawImage(image1, 0, 0);
}

image1.onload = q92; // когда картинка загрузится отрисовываем её

$(cvs).on("click", function() { // функция, которая должна работать при клике, и
работает 
  alert("adsads");
});








Без канваса:



var image1 = new Image(); // добавляем картинку 
image1.src = "https://cdn.pixabay.com/photo/2018/03/08/21/49/lighthouse-3209985_960_720.jpg";
// адрес картинка
document.body.appendChild(image1);

$(image1).on("click", function() { // функция, которая должна работать при клике,
и работает 
  alert("adsads");
});



Ответ 2

Определяем в какую конкретно картинку, нарисованную на канве произошел клик.

Этот метод называется picking часто используется в трехмерной графике для определения
что же под мышкой, для 2д тоже отлично подходит. 

Суть в том, чтобы параллельно с отрисовкой картинок на канве мы формируем дополнительный
буфер, в котором интересующие нас объекты (картинки) закодированы разным цветом-идентификатором,
а по клику берем цвет по координатам клика из пикинг-буфера.

UPD: добавил анимацию 



let imagesCanvas = document.querySelector('canvas');
let pickingCanvas = document.createElement('canvas');
pickingCanvas.width = imagesCanvas.width;
pickingCanvas.height = imagesCanvas.height;
let imgCtx = imagesCanvas.getContext('2d');
let pickCtx = pickingCanvas.getContext('2d');
imgCtx.strokeStyle = 'red';
imgCtx.lineWidth = 4;
let images = ['11', '22','33' ]
let loaded = [];
let current = -1;

// слушатель вешаем на канву
imagesCanvas.addEventListener('click', (e) => {
  // берем цвет по координатам и вычисляем из него индекс
  var i = pickCtx.getImageData(e.x, e.y, 1, 1).data["0"]-1; 
  current = loaded[i] ? i : -1;
})

load();// загружаем картинки

function load() {
  let name = images.shift();
  let img = new Image();
  img.crossOrigin = "anonymous";
  // вызываем загрузку следующей картинки, пока они все не будут загружены, 
  // тут надо предусмотреть onerror, и отрисовку, когда они все загрузятся
  img.onload = () => add() | images.length ? load() : requestAnimationFrame(draw);
  img.src = `https://picsum.photos/id/${name}/150/100`
  
  // добавляем инфо о картинке в массив
  function add() {
    loaded.push({
      name: name, img: img,
      // кодируем индекс картинки в цвет
      pickingColor: `rgb(${loaded.length+1},0,0)`,
      x: 50+loaded.length*120,
      y: 5+30*loaded.length,
      w: img.width, h: img.height
    });
  }
}
let t = 0;
function draw(dt) {
   pickCtx.clearRect(0, 0, imagesCanvas.width, imagesCanvas.height);
   imgCtx.clearRect(0, 0, imagesCanvas.width, imagesCanvas.height);
   loaded.forEach((img, i) => {
      img.x += (dt-t)*(i/10+1)/10;
      img.x = img.x > 600 ? 0 : img.x;
      
      // рисуем картинки на канве
      imgCtx.drawImage(img.img, img.x , img.y, img.w, img.h);
      i === current && imgCtx.strokeRect(img.x, img.y, img.w, img.h);
      
      // заполняем пикинг-буфер такими же по размеру прямоугольниками
      // как и картинки на канве и по тем же координатам
      pickCtx.fillStyle = img.pickingColor;
      pickCtx.fillRect(img.x, img.y, img.w, img.h);
      
   });
   t = dt;
   requestAnimationFrame(draw);
}
body{margin:0}





связанный ответ: https://ru.stackoverflow.com/a/988105/188366


Ответ 3

var cvs=document.getElementById("canvas"); // подключаем полотно для отображения кода
var ctx = cvs.getContext("2d"); 
var image1=new Image(); // добавляем картинку 

image1.src="https://cdn.pixabay.com/photo/2018/03/08/21/49/lighthouse-3209985_960_720.jpg";
 // адрес картинка

function  q92(){ 
    ctx.drawImage(image1,0,0); 
    image1.click();
}

image1.onload=q92; // когда картинка загрузится отрисовываем её
image1.class="qwer";

$(image1).on("click", function() {// функция которая должна рабоатать при клике но
не работает 
  alert("adsads");
});