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

Groups > comp.lang.javascript > #30888

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

Show all headers | View raw

On Sunday, July 17, 2016 at 9:34:36 AM UTC-4, Martin Honnen wrote:
> 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);
> >  });
> >

It Worked! Your my Hero! Seriously. Thank you so much for posting this. I can't believe I didn't think about this, it was really driving me nuts. 

Thanks Again. Pat

Back to comp.lang.javascript | Previous | Next — Previous 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