Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #30885

Re: getElementsByClassName only inserts first image into canvas after ruby each loop

Show all headers | View raw

On 10.07.2016 06:07, plowry05@gmail.com wrote:
> I am using the Ruby Carrierwave gem and Fabric.js in my canvas app. I use CarrierWave to assist on storing my images in the database and I use Ruby's .each iterator to display the images on the page(see below). It works great.
>
> <canvas id="canvas" width="300" height="550"></canvas>
>
>  <% @images.each do |m| %>
>   <%= image_tag m.photo_pic.url, :class => "my-image",  %>
>  <% end %>
>
> I then use a javascript function and fabric.js to display the images in my canvas.(see below) It works, However no matter what image I click it always displays the FIRST image into the canvas.For Example, if I click the 10th image that is displayed the first image will always be added to the canvas. I would like to click any image and have that particular image display in the canvas. Im not sure why getElementsByClassName only grabs the first image iterated
>
> var canvas = new fabric.Canvas('canvas');
>  $(".my-image").on('click',function() {
>   var imgElement = document.getElementsByClassName("my-image")

Make the above line

     var imgElement = this;

and the variable imgElement then holds a reference to the click HTML img 
element.

>   var imgInstance = new fabric.Image(imgElement, {
>    left: 50,
>    top: 50,
>  });
>  canvas.add(imgInstance);
>  });
>

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

getElementsByClassName only inserts first image into canvas after ruby each loop plowry05@gmail.com - 2016-07-09 21:07 -0700
  Re: getElementsByClassName only inserts first image into canvas after ruby each loop JJ <jj4public@vfemail.net> - 2016-07-10 20:16 +0700
  Re: getElementsByClassName only inserts first image into canvas after ruby each loop howtovideos3421@gmail.com - 2016-07-10 08:40 -0700
  Re: getElementsByClassName only inserts first image into canvas after ruby each loop patrick lowry <plowry05@gmail.com> - 2016-07-10 08:44 -0700
  Re: getElementsByClassName only inserts first image into canvas after ruby each loop Ben Bacarisse <ben.usenet@bsb.me.uk> - 2016-07-11 01:21 +0100
    Re: getElementsByClassName only inserts first image into canvas after ruby each loop patrick lowry <plowry05@gmail.com> - 2016-07-15 20:59 -0700
      Re: getElementsByClassName only inserts first image into canvas after ruby each loop "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-07-16 09:21 +0200
      Re: getElementsByClassName only inserts first image into canvas after ruby each loop Ben Bacarisse <ben.usenet@bsb.me.uk> - 2016-07-16 13:19 +0100
        Re: getElementsByClassName only inserts first image into canvas after ruby each loop Osmo Saarikumpu <osmo@weppipakki.com> - 2016-07-17 07:32 +0300
          Re: getElementsByClassName only inserts first image into canvas after ruby each loop Ben Bacarisse <ben.usenet@bsb.me.uk> - 2016-07-17 13:42 +0100
            Re: getElementsByClassName only inserts first image into canvas after ruby each loop "Christoph M. Becker" <cmbecker69@arcor.de> - 2016-07-17 15:06 +0200
              Re: getElementsByClassName only inserts first image into canvas after ruby each loop Ben Bacarisse <ben.usenet@bsb.me.uk> - 2016-07-17 14:20 +0100
                Re: getElementsByClassName only inserts first image into canvas after ruby each loop "Christoph M. Becker" <cmbecker69@arcor.de> - 2016-07-17 16:02 +0200
          Re: getElementsByClassName only inserts first image into canvas after ruby each loop patrick lowry <plowry05@gmail.com> - 2016-07-17 05:56 -0700
        Re: getElementsByClassName only inserts first image into canvas after ruby each loop patrick lowry <plowry05@gmail.com> - 2016-07-17 05:51 -0700
          Re: getElementsByClassName only inserts first image into canvas after ruby each loop Ben Bacarisse <ben.usenet@bsb.me.uk> - 2016-07-17 14:23 +0100
  Re: getElementsByClassName only inserts first image into canvas after ruby each loop Martin Honnen <martin.honnen@gmx.de> - 2016-07-17 15:34 +0200
    Re: getElementsByClassName only inserts first image into canvas after ruby each loop patrick lowry <plowry05@gmail.com> - 2016-07-17 18:03 -0700

csiph-web