Как получить src изображений при нажатии на холст Fabric.js?

Я делаю сайт с Fabricjs. Один div будет холстом, а другой будет иметь множество изображений (сотни). Я хочу, чтобы вы могли нажимать на изображения, чтобы они появлялись на холсте. Мой вопрос: как я могу получить src изображений при нажатии, чтобы узел img попал в узел холста. Должен ли я создать массив addEventl ... для каждого изображения?Как получить src изображений при нажатии на холст Fabric.js?

(запись в JavaScript)

спасибо, как всегда :)

<!doctype html> 
<html lang="en";> 
<head> 
    <meta charset="utf-8" /> 
    <title>CustomCase</title> 
    <link rel="stylesheet" href="HeaderFooter.css"> 
    <link rel="stylesheet" href="SkapaDesign.css"> 
    <script src="Jquery.js"></script> 
    <script src="Fabric.js"></script> 
    <script src="Canvas.js"></script> 
</head> 
<body> 
    <div id="Wrapper"> 
     <header id="Header"> 
      <a href="http://www.inet.se/" id="HeaderLink1">Om Oss</a> 
      <a href="F%C3%A4rdigaDesigner.html" id="HeaderLink2">Välj Design</a> 
      <a href="Framsida.html" id="LogoLink"><img id="Logo" src=LogotypHemsida.png></a> 
      <a href="SkapaDesign.html" id="HeaderLink3">Skapa Design</a> 
      <a href="http://sv.reddit.com/" id="HeaderLink4">Hjälp</a> 
     </header> 

     <section id="Body"> 
      <img id="UpperShadow" src=NeråtSkugga.png> 

      <div id="LeftColumn"> 
       <div id="TextMode"> 
       </div> 
       <div id="CanvasContainer"> 
        <canvas id="Canvas" width="270px" height="519px"></canvas> 
       </div> 
       <div id="LayerMode"> 
       </div> 

       <div id="IPhoneMode"> 
       </div> 
      </div> 

      <div id="RightColumn"> 
       <div id="TextureMode"> 
       </div> 

       <div id="TextureFilter"> 
       </div> 

       <div id="TextureView"> 
        <div id="TextureViewInside"> 
         <div id="images"> 
          <img src="FärgadePapper.png"> 
          <img src="Hajar.png"> 
          <img src="Labyrint.png"> 
          <img src="Martini.png"> 
          <img src="FärgadePapper.png"> 
          <img src="Hajar.png"> 
          <img src="Labyrint.png"> 
          <img src="Martini.png"> 
          <img src="FärgadePapper.png"> 
          <img src="Hajar.png"> 
          <img src="Labyrint.png"> 
          <img src="Martini.png"> 
          <img src="FärgadePapper.png"> 
         </div> 
        </div> 
       </div> 
      </div> 

      <img id="LowerShadow" src=UppåtSkugga.png> 
     </section> 

     <footer id="Footer"> 
      <div id="FooterSpace"></div> 

      <div id="FooterColumnLeft"> 
       <a href="">Välj Design</a> 
       <a href="">Skapa Design</a> 
       <a href="">Om Oss</a> 
       <a href="">Hjälp</a> 
      </div> 

      <div id="FooterDevider"> 
      </div> 

      <div id="FooterColumnRight"> 
       <div id="Facebook"> 
        <img id="FacebookLogo" src=FacebookLogo.png> 
        <a href="">Gilla oss på Facebook</a> 
       </div> 
       <div id="Twitter"> 
        <img id="TwitterLogo" src=TwitterLogo.png> 
        <a href="">Följ oss på Twitter</a> 
       </div> 
      </div> 

      <div id="FooterSpace"></div> 
      <div id="BottomColor"></div> 
     </footer> 
    </div> 
</body> 
</html>

источник

2013-11-12 user2961869

не пишите _oncli ck = "getImageInfo (this)" _ для каждого img, # images img on click -> это даст вам attr изображения – thenewseattle

Где находится javascript? –

Вы не должны объявить OnClick для каждый img.

Попробуйте это: http://jsfiddle.net/cEh93/

$("#images img").click(function() { 
    var getsource = $(this).attr("src"); 
    alert(getsource); 
});

источник

2013-11-12 19:18:20 thenewseattle

Вам не нужно в onclick на каждом изображении, вы можете прикрепить обработчик событий JQuery для всех изображений и получить их src атрибут (это будет выводить изображение src на консоль, когда изображение щелкнули):

jQuery(document).ready(function() 
    jQuery("#images img").on("click", function() { 
     console.log(jQuery(this).attr('src')); 
    }); 
}); // ready

источник

2013-11-12 19:06:10

Я добавил код, но ничего не отображается на консоли ... – user2961869

Нужно ли рисовать изображение на холст, или вам нужно использовать тег 'img' где-то еще? –

Ничья в холст, но я думаю, что для этого мне нужно добавить img внутри холста, а также добавить его в javascript, но может быть неправильно. – user2961869

Вы можете установить извлечь из SRC только прикрепление событие для верхней DIV (с помощью JS), как это:

 <div id="images" onclick="getSelectedImageURL(event);"> 
         <input type="image" src="FärgadePapper.png"> 
         <img src="Hajar.png"> 
         <img src="Labyrint.png"> 
         <img src="Martini.png"> 
         <img src="FärgadePapper.png"> 
         <img src="Hajar.png"> 
         <img src="Labyrint.png"> 
         <img src="Martini.png"> 
         <img src="FärgadePapper.png"> 
         <img src="Hajar.png"> 
         <img src="Labyrint.png"> 
         <img src="Martini.png"> 
         <img src="FärgadePapper.png"> 
         <img src="Hajar.png"> 
         <img src="Labyrint.png"> 
         <img src="Martini.png"> 
        </div>

Чтобы получить текущее выбранное изображение SRC on click event ...

function getSelectedImageURL(event){ 
    if(event.target.localName.toUpperCase() == 'IMG') 
     alert(event.target.src); 
}

источник

2013-11-12 19:26:14

ничего не происходит, когда я нажимаю на изображения, никаких событий и ничего в консоли ... – user2961869

Вам нужно заменить " div id = images ". Сама функция вы можете протестировать в отдельном файле, создать файл:« test.js »и добавить в HEAD пути к файлу файл . Вы можете альтернативно открыть под ветвями DIV: и перезагрузить страницу, чтобы увидеть, как она работает. –

Как получить src изображений при нажатии на холст Fabric.js?

ответ

Смежные вопросы