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

172

25 декабря 2019, 06:10

Как сделать на 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"); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<canvas id="canvas" width="1000" height="675"></canvas> <!-- полотно где отображается код -->

Answer 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"); 
});

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 
<canvas id="canvas" width="1000" height="675"></canvas>

Без канваса:

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"); 
});

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

Answer 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}

<canvas width="600" height="170"></canvas>

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

Answer 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"); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<canvas id="canvas" width="1000" height="675"></canvas> <!-- полотно где отображается код -->

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

slick слайдер контента

Всем привет, на базе slick делаю слайдер, так вот подскажите пожалуйста, как его настроить так, что бы при нажатии на кнопки левый слайдер (миниатюры)...

156

javascript