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

Groups > comp.lang.javascript > #30831 > unrolled thread

getElementsByClassName only inserts first image into canvas after ruby each loop

Back to article view | Back to comp.lang.javascript

Contents

  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

#30831 — getElementsByClassName only inserts first image into canvas after ruby each loop

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")
  var imgInstance = new fabric.Image(imgElement, {
   left: 50,
   top: 50,
 });
 canvas.add(imgInstance);
 });

[toc] | [next] | [standalone]

#30832

On Sat, 9 Jul 2016 21:07:24 -0700 (PDT), 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")
>   var imgInstance = new fabric.Image(imgElement, {
>    left: 50,
>    top: 50,
>  });
>  canvas.add(imgInstance);
>  });

Notice that the word "Elements" in getElementsByClassName() has an "s"
letter in it.

[toc] | [prev] | [next] | [standalone]

#30833

On Sunday, July 10, 2016 at 12:07:30 AM UTC-4, patrick lowry 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")
>   var imgInstance = new fabric.Image(imgElement, {
>    left: 50,
>    top: 50,
>  });
>  canvas.add(imgInstance);
>  });

thanks for responding, unfortunately that doesn't work either. 

i can do 

var imgElement = document.getElementsByClassName("my-image")[4]

and it will put the fourth image from the array onto the canvas, but I can't figure out a way to get the selected image to display 

[toc] | [prev] | [next] | [standalone]

#30834

On Sunday, July 10, 2016 at 12:07:30 AM UTC-4, patrick lowry 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")
>   var imgInstance = new fabric.Image(imgElement, {
>    left: 50,
>    top: 50,
>  });
>  canvas.add(imgInstance);
>  });

thanks for responding, unfortunately that doesn't work either. 

i can do 

var imgElement = document.getElementsByClassName("my-image")[4] 

and it will put the fourth image from the array onto the canvas, but I can't figure out a way to get the selected image to display

[toc] | [prev] | [next] | [standalone]

#30835

plowry05@gmail.com writes:

> 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")
>   var imgInstance = new fabric.Image(imgElement, {
>    left: 50,
>    top: 50,
>  });
>  canvas.add(imgInstance);
>  });

Looks like a lot of work (I've seen the correction you've posted).  The
normal way to operate on the clicked element is to access it though the
event object that is usually passed to the event handler.  But you seem
to be using a library (JQuery?) and I don't know anything about its
event handling.

-- 
Ben.

[toc] | [prev] | [next] | [standalone]

#30874

On Sunday, July 10, 2016 at 8:21:13 PM UTC-4, Ben Bacarisse wrote:
> plowry05@gmail.com writes:
> 
> > 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")
> >   var imgInstance = new fabric.Image(imgElement, {
> >    left: 50,
> >    top: 50,
> >  });
> >  canvas.add(imgInstance);
> >  });
> 
> Looks like a lot of work (I've seen the correction you've posted).  The
> normal way to operate on the clicked element is to access it though the
> event object that is usually passed to the event handler.  But you seem
> to be using a library (JQuery?) and I don't know anything about its
> event handling.
> 
> -- 
> Ben.

Would you mind providing an example of how to do this or an better explanation on how you would accomplish this? I have tried may different ways using this approach but nothing seems to work. Best Pat....appreciate all your help.

[toc] | [prev] | [next] | [standalone]

#30875

patrick lowry <plowry05@gmail.com> wrote on 16 Jul 2016 in
comp.lang.javascript: 

> On Sunday, July 10, 2016 at 8:21:13 PM UTC-4, Ben Bacarisse wrote:
>> plowry05@gmail.com writes:
>> 
>> > I am using the Ruby Carrierwave gem and Fabric.js in my canvas app. I
>> > u 
> se 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")
>> >   var imgInstance = new fabric.Image(imgElement, {
>> >    left: 50,
>> >    top: 50,
>> >  });
>> >  canvas.add(imgInstance);
>> >  });
>> 
>> Looks like a lot of work (I've seen the correction you've posted).  The
>> normal way to operate on the clicked element is to access it though the
>> event object that is usually passed to the event handler.  But you seem
>> to be using a library (JQuery?) and I don't know anything about its
>> event handling.
>> 

[please skip signatures on usenet]

> 
> Would you mind providing an example of how to do this or an better
> explanation on how you would accomplish this? I have tried may different
> ways using this approach but nothing seems to work. Best
> Pat....appreciate all your help. 
 
I don't understand a word of this non-js-stuff,
and I don't see the anchor or button clicked.

However:

"no matter what [.] I click it always displays the FIRST image"

suggests to me the page with the js-code is reloaded each time, 
as the click-code misses a ";return false;".


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#30876

patrick lowry <plowry05@gmail.com> writes:

> On Sunday, July 10, 2016 at 8:21:13 PM UTC-4, Ben Bacarisse wrote:
<snip>
>> ...  The
>> normal way to operate on the clicked element is to access it though the
>> event object that is usually passed to the event handler.
<snip>
> Would you mind providing an example of how to do this or an better
> explanation on how you would accomplish this? I have tried may
> different ways using this approach but nothing seems to work.

You are using JQuery, I think, and I don't know JQUery.  Here is a very
bare example In plain ECMAScript:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
     window.addEventListener(
          'load',
          function () {
               var odiv = document.getElementById('out');
               var as = document.getElementsByTagName('a');
               for (var i = 0; i < as.length; i++) {
                    as[i].addEventListener(
                         'click',
                         function (evt) {
                              odiv.innerHTML = evt.target.innerHTML;
                         },
                         false);
               }
          }
     },
     false);
    </script>
    <title>Click test</title>
  </head>
  <body>
    <div>
      <a>ONE</a>
      <a>TWO</a>
    </div>
    <div id=out></div>
  </body>
</html>


-- 
Ben.

[toc] | [prev] | [next] | [standalone]

#30878

On 16/07/2016 15:19, Ben Bacarisse wrote:
> Here is a very
> bare example In plain ECMAScript:
...
>                }
>           }
>      },
>      false);
>     </script>

Nice, but there is an extra closing curly brace.

-- 
Best wishes, Osmo

[toc] | [prev] | [next] | [standalone]

#30879

Osmo Saarikumpu <osmo@weppipakki.com> writes:

> On 16/07/2016 15:19, Ben Bacarisse wrote:
>> Here is a very
>> bare example In plain ECMAScript:
> ...
>>                }
>>           }
>>      },
>>      false);
>>     </script>
>
> Nice, but there is an extra closing curly brace.

Thanks for spotting that.  Even the indentation shows that there's one
too many so I don't know how I missed it.  Corrected:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
     window.addEventListener(
          'load',
          function () {
               var odiv = document.getElementById('out');
               var as = document.getElementsByTagName('a');
               for (var i = 0; i < as.length; i++) {
                    as[i].addEventListener(
                         'click',
                         function (evt) {
                              odiv.innerHTML = evt.target.innerHTML;
                         },
                         false);
               }
          },
          false);
    </script>
    <title>Click test</title>
  </head>
  <body>
    <div>
      <a>ONE</a>
      <a>TWO</a>
    </div>
    <div id=out></div>
  </body>
</html>

In case the OP missed the key part: the event handler is passed an event
object that has a 'target' property giving the element on which the
event fired.

-- 
Ben.

[toc] | [prev] | [next] | [standalone]

#30882

On 17.07.2016 at 14:42, Ben Bacarisse wrote:

> <!DOCTYPE html>
> <html>
>   <head>
>     <script type="text/javascript">
>      window.addEventListener(
>           'load',
>           function () {
>                var odiv = document.getElementById('out');
>                var as = document.getElementsByTagName('a');
>                for (var i = 0; i < as.length; i++) {
>                     as[i].addEventListener(
>                          'click',
>                          function (evt) {
>                               odiv.innerHTML = evt.target.innerHTML;

Don't we want to call `evt.preventDefault()`?

>                          },
>                          false);
>                }
>           },
>           false);
>     </script>
>     <title>Click test</title>
>   </head>
>   <body>
>     <div>
>       <a>ONE</a>
>       <a>TWO</a>
>     </div>
>     <div id=out></div>
>   </body>
> </html>

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#30883

"Christoph M. Becker" <cmbecker69@arcor.de> writes:

> On 17.07.2016 at 14:42, Ben Bacarisse wrote:
<snip>
>>      window.addEventListener(
>>           'load',
>>           function () {
>>                var odiv = document.getElementById('out');
>>                var as = document.getElementsByTagName('a');
>>                for (var i = 0; i < as.length; i++) {
>>                     as[i].addEventListener(
>>                          'click',
>>                          function (evt) {
>>                               odiv.innerHTML = evt.target.innerHTML;
>
> Don't we want to call `evt.preventDefault()`?

I general, yes, but I don't think it matters here (the anchor elements
have no attributes) and I was aiming for the least distraction.  Does it
matter in this case?

>>                          },
>>                          false);
>>                }
>>           },
>>           false);
<snip>

-- 
Ben.

[toc] | [prev] | [next] | [standalone]

#30886

On 17.07.2016 at 15:20, Ben Bacarisse wrote:

> "Christoph M. Becker" <cmbecker69@arcor.de> writes:
> 
>> On 17.07.2016 at 14:42, Ben Bacarisse wrote:
> <snip>
>>>      window.addEventListener(
>>>           'load',
>>>           function () {
>>>                var odiv = document.getElementById('out');
>>>                var as = document.getElementsByTagName('a');
>>>                for (var i = 0; i < as.length; i++) {
>>>                     as[i].addEventListener(
>>>                          'click',
>>>                          function (evt) {
>>>                               odiv.innerHTML = evt.target.innerHTML;
>>
>> Don't we want to call `evt.preventDefault()`?
> 
> I general, yes, but I don't think it matters here (the anchor elements
> have no attributes) and I was aiming for the least distraction.  Does it
> matter in this case?

Frankly, I don't know (probably not), because I always set href
attributes for a elements (except when I use the name attribute, but I
don't do this anymore).  Otherwise using an a element doesn't make much
sense to me; I'd prefer a span in that case.

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#30881

On Sunday, July 17, 2016 at 12:32:53 AM UTC-4, Osmo Saarikumpu wrote:
> On 16/07/2016 15:19, Ben Bacarisse wrote:
> > Here is a very
> > bare example In plain ECMAScript:
> ...
> >                }
> >           }
> >      },
> >      false);
> >     </script>
> 
> Nice, but there is an extra closing curly brace.
> 
> -- 
> Best wishes, Osmo

Hi Osmo, thanks for the reply. I am using Jquery and I just don't follow this approach. Fairly new to Javascript and Jquery. 

If i put a [4] at the end of imgElement I can get the 4th image from the iteration to the canvas which obviously make sense. But Im not sure how to add Bens approach to my existing code. Any ideas?

var canvas = new fabric.Canvas('canvas'); 
 $(".my-image").on('click',function() { 
  var imgElement = document.getElementsByClassName("my-image")[4] 
  var imgInstance = new fabric.Image(imgElement, { 
   left: 50, 
   top: 50, 
 }); 
 canvas.add(imgInstance); 
 }); 

[toc] | [prev] | [next] | [standalone]

#30880

On Saturday, July 16, 2016 at 8:19:50 AM UTC-4, Ben Bacarisse wrote:
> patrick lowry <plowry05@gmail.com> writes:
> 
> > On Sunday, July 10, 2016 at 8:21:13 PM UTC-4, Ben Bacarisse wrote:
> <snip>
> >> ...  The
> >> normal way to operate on the clicked element is to access it though the
> >> event object that is usually passed to the event handler.
> <snip>
> > Would you mind providing an example of how to do this or an better
> > explanation on how you would accomplish this? I have tried may
> > different ways using this approach but nothing seems to work.
> 
> You are using JQuery, I think, and I don't know JQUery.  Here is a very
> bare example In plain ECMAScript:
> 
> <!DOCTYPE html>
> <html>
>   <head>
>     <script type="text/javascript">
>      window.addEventListener(
>           'load',
>           function () {
>                var odiv = document.getElementById('out');
>                var as = document.getElementsByTagName('a');
>                for (var i = 0; i < as.length; i++) {
>                     as[i].addEventListener(
>                          'click',
>                          function (evt) {
>                               odiv.innerHTML = evt.target.innerHTML;
>                          },
>                          false);
>                }
>           }
>      },
>      false);
>     </script>
>     <title>Click test</title>
>   </head>
>   <body>
>     <div>
>       <a>ONE</a>
>       <a>TWO</a>
>     </div>
>     <div id=out></div>
>   </body>
> </html>
> 
> 
> -- 
> Ben.

Thanks Ben for the reply. I am using Jquery. Apologize i just don't follow and still can't seem to get it. If i put a [4] at the end of imgElement I can get the 4th image from the iteration to the canvas which obviously make sense. But Im not sure how to add your approach to what I have written. Any ideas? 

var canvas = new fabric.Canvas('canvas'); 
 $(".my-image").on('click',function() { 
  var imgElement = document.getElementsByClassName("my-image")[4] 
  var imgInstance = new fabric.Image(imgElement, { 
   left: 50, 
   top: 50, 
 }); 
 canvas.add(imgInstance); 
 });

[toc] | [prev] | [next] | [standalone]

#30884

patrick lowry <plowry05@gmail.com> writes:
<snip>
>
> Thanks Ben for the reply. I am using Jquery. Apologize i just don't
> follow and still can't seem to get it. If i put a [4] at the end of
> imgElement I can get the 4th image from the iteration to the canvas
> which obviously make sense. But Im not sure how to add your approach
> to what I have written. Any ideas?
>
> var canvas = new fabric.Canvas('canvas'); 
>  $(".my-image").on('click',function() { 
>   var imgElement = document.getElementsByClassName("my-image")[4]

If you want imgElement to be the element on which the event was raised
you could try

  $(".my-image").on('click',function(evt) { 
   var imgElement = evt.target;

<snip>
-- 
Ben.

[toc] | [prev] | [next] | [standalone]

#30885

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

[toc] | [prev] | [next] | [standalone]

#30888

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

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web