f



Ruby each loop only grabs first image when using getElementsbyClassName

I am using the Ruby Carrierwave gem and Fabric.js in my canvas app. I use C=
arrierWave 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=3D"canvas" width=3D"300" height=3D"550"></canvas>
 <% @images.each do |m| %>
  <%=3D image_tag m.photo_pic.url, :class =3D> "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 what the problem is.=20
=20
var canvas =3D new fabric.Canvas('canvas');
 $(".my-image").on('click',function() {
  var imgElement =3D document.getElementsByClassName("my-image")
  var imgInstance =3D new fabric.Image(imgElement, {
   left: 50,
   top: 50,
 });
 canvas.add(imgInstance);
 });

I think this could help out alot of people who are using Ruby and Fabric.js=
 in there apps.
0
patrick
7/10/2016 4:13:00 AM
comp.lang.ruby 48885 articles. 0 followers. Post Follow

2 Replies
572 Views

Similar Articles

[PageSpeed] 24

Sorry but I can only see @images in the each, and everywhere else it's referenced as my-image. 

Sayth 
0
Sayth
7/12/2016 1:32:53 AM
On Monday, July 11, 2016 at 9:33:04 PM UTC-4, Sayth Renshaw wrote:
> Sorry but I can only see @images in the each, and everywhere else it's referenced as my-image. 
> 
> Sayth

Thanks for the reply, sorry if it was confusing. I can't figure out why my Jquery code doesn't grab the image selected and places it in the canvas. 

if i put [4] at the end of var imgElement (as seen below) The 4th image from the data base will display and that all makes sense of course. But I don't know how to display the image the user specifically selected. 

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

Any ideas?

0
patrick
7/17/2016 1:07:58 PM
Reply: