# Getting the dimensions of an image element

**URL:** <https://www.ruby-forum.com/t/getting-the-dimensions-of-an-image-element/195070>\
**Category:** Rails\
**Created:** [September 16, 2010, 11:21am UTC](https://www.ruby-forum.com/t/getting-the-dimensions-of-an-image-element/195070 "2010-09-16T11:21:37Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![swengineer](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/97f17d/32.png) [@swengineer](https://www.ruby-forum.com/u/swengineer)\
**Post date:** [September 16, 2010, 11:21am UTC](https://www.ruby-forum.com/t/getting-the-dimensions-of-an-image-element/195070/1 "2010-09-16T11:21:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![swengineer](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/97f17d/32.png) [@swengineer](https://www.ruby-forum.com/u/swengineer)\
**Post date:** [September 16, 2010, 12:33pm UTC](https://www.ruby-forum.com/t/getting-the-dimensions-of-an-image-element/195070/2 "2010-09-16T12:33:11Z")

</div>

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 %\>