>All Tutorials 
Ajax and .NET Ajax and .NET RSS XML
Ajax and ColdFusion Ajax and ColdFusion RSS XML
Ajax and Java Ajax and Java RSS XML
Ajax and PHP Ajax and PHP RSS XML
Ajax and SOA Ajax and SOA RSS XML
Ajax Goodies Ajax Goodies RSS XML
Ajax Tool Ajax Tool RSS XML
Facebook MockAjax Facebook MockAjax RSS XML
Google Web Toolkit Google Web Toolkit RSS XML
JavaScript Framework JavaScript Framework RSS XML
Ruby on Rails Ruby on Rails RSS XML
Technique Introduction Technique Introduction RSS XML
Without XMLHttpRequest Without XMLHttpRequest RSS XML
Yahoo! UI Yahoo! UI RSS XML

Ajax Image Manipulation - image width height screen aspect ajax ratio set

 
Registered tutorials: 501
Registered Users: 24390



Rating: 3.8 out of 5 votes cast


  
Category: JavaScript Framework

Ajax Image Manipulation

Digg this   Post to del.icio.us

Abstract: This tutorial shows how to create an Ajax image manipulation widget and makes it easy to handle image resize

After getting most of Send Me a Pic completed, I needed to figure out a way to handle the image scaling widget. The reason for needed this widget was that displaying images on cell phones causes a couple problems:

• Screen sizes are really small, even the large screen sizes are still only 320 x 240. Most are around 128px on their longest side.

• Aspect Ratios for cell phones are different for each model. Aspect Ratio is the ratio of the width of the screen divided by the height. aspect-ratio = width / height.

Both of these problems means that with out a way to scale and offset the image the photos would not show up correctly on the users phones.

Before Transform:

photo_bad.jpg

Above is how the image would look if it wasn’t resized. Notice all the space at the top and bottom. This looks the same as the Widescreen DVD playing on a regular TV set. Letterboxing the image is the most reasonable way to display the image at first because all of the image is displayed

After Transform:

photo_good.jpg

This image has been custom fit to enhance just the area of the image I wanted and fills the entire screen.



Read Full Tutorial...



Reviews:

Rate and Review This Site

No reviews yet


Statistic Information About this Resource:


Total Hits: 882
Unique Hits: 735


  Daily Weekly Monthly
  Unique Total Unique Total Unique Total
Average 2 2.2 8 9.9 29.1 37.3
Current 2 2 12 13 37 45
Previous 1 2 9 10 44 55
Jul 22 3 3 6 12 0 0
Jul 21 6 6 12 13 53 76
Jul 20 0 0 12 17 54 77
Jul 19 1 1 0 0 19 24
Jul 18 0 0 9 10 0 0
Jul 17 3 3 9 10 34 36
Jul 16 4 5 11 14 31 37
Jul 15 0 0 0 0 19 23
Highest 8 11 20 30 54 77


Script Execution Time: 11.91625 | SQL Queries: 10 | Members: 501
Ajax Tutorial Top List - Powered by Aardvark Topsites PHP 5.1.2