Getting the dimensions of an image element

Rails
1

I have a view file, “show.html.erb”, and a Javascript file,
“coordinate.js”.

In coordinate.js" I have methods to calculate the width and height of an
image.

How can I call those methods on the “Canvas” in my view.

And, below you can find the scripts of the two files:

  • show.html.erb

<%= javascript_include_tag “coordinate” %>

<%= notice %>

Name <%= @dicom.name %>

Image

<%= image_tag @dicom.photo.url , :id => 'dicom_image' %>

<%= update_page_tag do |page| page < <%= update_page_tag do |page| page < <%= link_to 'Edit', edit_dicom_path(@dicom) %> <%= link_to 'Back', dicoms_path %>
  • coordinate.js

function getWidth() {
var image = document.getElementById(“dicom_image”);
imageWidth = image.width;
return imageWidth;
//alert("Image Width is " + image.width);
}

function getHeight(){
var image = document.getElementById(“dicom_image”);
imageHeight = image.height;
return imageHeight;
//alert("Image Height is " + image.height);
}

function imageWidthAndHeight()
{
getWidth();
getHeight();
}

function getTopLeftCoordinate() {
x=document.getElementById(‘dicom_image’).offsetLeft
y=document.getElementById(‘dicom_image’).offsetTop
alert(x);
alert(y);
}

function getLeftCoordinate() {
left=document.getElementById(‘dicom_image’).offsetLeft
return left;
}

function getTopCoordinate() {
top= document.getElementById(‘dicom_image’).offsetTop
return top;
}

function drawImg(){
var canvas = document.getElementById(“draw”);
var context = canvas.getContext(“2d”);
var image = document.getElementById(“dicom_image”);
// render the image to the canvas., an then specify the coordinates
//(x,y) that specify where the image will be located at the canvas
context.drawImage(image, 0, 0);
}

function drawLine(){
var canvas = document.getElementById(‘draw’);
var context = canvas.getContext(‘2d’);
context.beginPath();
context.moveTo(getLeftCoordinate(), getTopCoordinate());
context.lineTo(100, 200);
context.strokeStyle = “#FFF”
context.stroke();
}

Thanks.

2

Since I’m using Paperclip, I will ask as follows:

I have the following in my model and view. What should I place instead
of ??? in the view (show.html.erb)?

*Model:

class Dicom < ActiveRecord::Base
has_attached_file :photo, :styles => {:original => [“100%”, :jpg]}

def getHeight()
uploaded_file = photo.queued_for_write[:original]
dimensions = Paperclip::Geometry.from_file(uploaded_file)
height = dimensions.height
return height
end

def getWidth()
uploaded_file = photo.queued_for_write[:original]
dimensions = Paperclip::Geometry.from_file(uploaded_file)
width = dimensions.width
return width
end
end

  • View:

<%= javascript_include_tag “coordinate” %>
" width="<%=????? %>" >

<%= notice %>

Name <%= @dicom.name %>

Image

<%= image_tag @dicom.photo.url , :id => 'dicom_image' %>

<%= update_page_tag do |page| page < <%= update_page_tag do |page| page < <%= link_to 'Edit', edit_dicom_path(@dicom) %> <%= link_to 'Back', dicoms_path %>