PHP Image Rendering Library
vby Muntasir Mamun
svo97_12 at yahoo.com
What it is?
PHP Image Rendering Library is a collection of intelligent functions dedicated for the transcoding of images to best fit in different mobile screens. Those who work with mobile CMS, rendering image for the mobile devices into suitable format and dimension is obviously a big point to be considered which consumes a big portion of the development time. WURFL is a great gift for the mobile CMS developers and is an XML configuration file which contains information about capabilities and features of several wireless devices. PHP Image Rendering Library is my small endeavor for the PHP developers. Based on the capability (ie. Supported image format, device screen width, height etc) retrieved from querying WURFL two basic functions are developed to make the image transcoding work for the mobile screens:
1. Format Conversion: The targeted image is converted into the format suitable for the requested mobile device. If the mobile device supports, the rendering function first tries to convert the image into JPG format. If JPG is not supported it tries to convert the image into GIF, PNG and at last WBMP respectively.
2. Image Dimensioning: The second and the major intelligent part of the rendering function is to take decision on the dimension of the resized image based on the aspect ratio of the main image and the mobile device’s screen resolution. The aspect ratio of the main image is kept unchanged.
How it works:
The rendering library is developed using PHP GD Library (for image manipulation) and WURFL (to get the device capabilities). Two basic functions act as the front-end of the library: convertImage ($imagepath) and convertImageUA($imagepath,$ua) where $imagepath is the relative path of the image and $ua is the user-agent of the mobile handset. Using convertImage ($imagepath) the function will read the user-agent from the HTTP headers and return the URL of the path of converted image. convertImageUA allows the developer to specify a user-agent, this is useful for testing and simulation purposes. The converted images will reside in a folder named Resized inside the folder where the actual image were. The priority for the image format are: JPG, GIF, PNG and then WBMP. That is if from WURFL returned capability lists it is seen that JPG is supported by the device then JPG is considered as the best suitable format for the device; otherwise GIF otherwise PNG and at last WBMP. Then taking the image size and the device screen resolution it is decided the best suitable image dimension of the image for that device.
Pre-Requisite:
1. You should be able to run PHP scripts.
2. MySQL should be installed
3 GD Library for PHP must be installed.
PHP4.3.x generally includes a version of GD Library by default. But to check whether it is turn on you can create a simple PHP page with the following code:
<?
Phpinfo();
?>
And if you run the code you will see something like as follows which ensures that GD Library is installed and enabled in your system. Visit http://www.php.net/gd for details on gd.
Downloads:
Source codes and the include files necessary for the PHP Image Rendering Library are provided here in a ZIP file (ImageAdapter.zip). As WURFL is a must for the rendering library to work with, so the WURFL PHP Library is included inside the ZIP file. The intention here is to help the developers the flavor of "UNZIP and EXECUTE". To get the detail knowledge about the WURFL PHP Library please visit http://wurfl.sourceforge.net/php/index.php.
So unzipping of this file(ImageAdapter.zip) you will get the following files and folders:
Source codes and the include files necessary for the PHP Image Rendering Library are provided here in a ZIP file (ImageAdapter.zip). As WURFL is a must for the rendering library to work with, so the WURFL PHP Library is included inside the ZIP file. The intention here is to help the developers the flavor of "UNZIP and EXECUTE". To get the detail knowledge about the WURFL PHP Library please visit http://wurfl.sourceforge.net/php/index.php.
So unzipping of this file(ImageAdapter.zip) you will get the following files and folders:
| SL # |
File/Folder |
Purpose |
Part Of |
| 1 |
/datadir |
The place where all data is stored (wurfl.xml, cache file, logs, etc) |
WURFL PHP Library |
| 2 |
/imgc |
Image folder. Some example images are here which are used in the example conversion. But the developers can put there images anywhere they like. This folder contains another folder Resized which holds the converted images. |
PHP Image Rendering Library |
| 3 |
/multicache |
If multicache is enabled this folder will hold the cache files. |
WURFL PHP Library |
| 4 |
wurfl_class.php wurfl_config.php wurfl_parser.php
|
Source codes for WURFL PHP Library |
WURFL PHP Library |
| 5 |
imageAdaptation.php |
This is actually the main implementation of the rendering and supporting functions. |
PHP Image Rendering Library |
| 6 |
example.php |
An example of the usage of the library. |
PHP Image Rendering Library |
| 7 |
simulator.php |
Source code for simulating the library against several user-agents (ie. devices). |
PHP Image Rendering Library |
QuickStart:
Now considering that you satisfy the pre-requisites please follow the following steps to run your first rendering:
1. Download the zip file and extract it into your PHP web root directory (generally htdocs folder).
2. Log in to your mySQL server. Execute the following scripts:
CREATE DATABASE capDB;
Use capDB;
CREATE TABLE `capability` (
`ua` varchar(250) NOT NULL default '',
`format` varchar(4) NOT NULL default '',
`devwidth` int(11) NOT NULL default '0',
`devheight` int(11) NOT NULL default '0'
);
Executing the above script will create a database named "capDB" and then will create a table named "capability" inside "capDB". This table will hold the user-agent wise necessary capabilities (ie. Image format, screen resolutions etc..).
3.Now you need to configure the file "DBConfig.php" which is in the folder "ImageAdapter" and is as follows:
$DBServer='localhost'; // It is generally 'localhost', '127.0.0.1'
// or any other location where your destined mySQL server is.
$DBase='capDB'; // Keep it unchanged
$DBUser='root'; // The user ID which you are using to
// connect to the mySQL server.
$DBPass='shuvo123'; // The password.
So do the necessary changes and save "DBConfig.php".
4. Now you are ready to test the code. If you want to check the usability from your PC then run the code http://YOUR_PHP_ROOT/ ImageAdapter/simulator.php. You can directly go to the code of simulator.php and you will see something like:
include('imageAdaptation.php');
$i='imgc/eye.jpg';
//$ua="Nokia6015i/1.0 (M101V0400.nep) UP.Browser/4.1.26l1.c.2.100";
//$ua="BlackBerry6230/4.0.0 Profile/MIDP-2.0 Configuration/CLDC-1.1";
$ua="Mozilla/4.0 (compatible; MSIE 4.01;
Windows CE; PPC; 240x320; HP iPAQ h6300)";
...
So here you can set any user-agent in $ua string and check the image output.
5. If you want to check the code in any real device then you have to upload the code folder and then go to the URL http://YOUR_UPLOADED_PATH/ ImageAdapter/example.php. I have tested with Nokia 6020 and 5200 and it worked error freely.
Example Conversion:
The main image:
The converted image for Nokia 5200:
Future Roadmap:
Some future feature roadmap is set for the product. They are:
- 1. Adapting image from remote server.
- 2. Watermarking rendered image.
- 3. Implementing Steganography.
Usage:
The PHP Image Rendering Library is FREE to use. In case you are using the library please update me in svo97_12@yahoo.com so that I can keep you in the loop to let you update about the next versions. Thanks to them who will find bug and report me in svo97_12@yahoo.com.
Wishlist:
Please update me about your wishlist regarding the rendering library in svo97_12@yahoo.com
Download here
Wishlist:
Please update me about your wishlist regarding the rendering library in svo97_12@yahoo.com
|