JS & Canvas - Draw Image to scale

[nomaam22]

Hello:

I am working with JQuery, and drawing images using Canvas (drawImage, translate, rotate) I am trying to draw an image and maintain its scale or aspect ratio so the image does not become distorted.

I have been working on a problem for many days now, I am writing a smartphone app and am having a problem displaying an image to scale, but also using the most area of the screen as possible.

For example:
-If the image is taller than it is wide and the phone is in portrait "tall" mode, then the image only has to be scaled, not rotated.

-If the image is taller than it is wide and the phone is in landscape "wide" mode, the image must be rotated and then scaled in order to maximize the displayed size

-If the image is wider than it is tall and the phone is in portrait mode, then the image has to be rotated and scaled.

-If the image is wider than it is tall and the phone is in landscape mode, then the image has to be only scaled, not rotated.

Seems simple enough, but I can't get it to work out at all. Does anyone have an example code which would do this?

Thank you.

 

[audiopro]

Which function is your code failing on?

Keith

http://www.studiosoft.co.uk

 

[BillyRayPreachersSon]

If it's detecting the orientation change that you're having trouble with, I wrote this handy post that you might find useful:

http://www.codecouch.com/2011/11/de...e-safari-on-ios-and-other-supported-browsers/

It shows how to rotate an 1136 x 880 image so its aspect ratio is always kept correct on an iPad. The same principal would apply to a canvas object.

In a nutshell, if all you need to do is know whether you are in landscape mode or portrait mode, the code needed is really quite small:

<script type="text/javascript">
	function updateOrientation() {
		document.body.setAttribute('orient', ['portrait',,'landscape'][window.orientation & 2]);
		window.scrollTo(0, 0);
	};
	window.addEventListener('orientationchange', updateOrientation, false);
	window.addEventListener('load', updateOrientation, false);
</script>

This will add an "orient" attribute to the body, which can be acted upon in CSS using either of these attribute selectors:

body[orient="landscape"] { ... }
body[orient="portrait"] { ... }

Alternatively, you can read the attribute in JavaScript using the getAttribute method.

You might find that using a class on the body is easier for you, and if so the code is easy enough to change.

There is one oddity I found, which I mention in the post along with this workaround: if I did not include an empty rule, iOS 4.3.3 on my iPad failed to resize my example image as expected:

body[orient="landscape"] {}

Hope this helps,

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

[blue]@[/blue] Twitter:

http://twitter.com/SleepyDrunkDan