1
0
mirror of https://github.com/mosbth/cimage.git synced 2025-07-31 21:40:12 +02:00

for release 0.7

This commit is contained in:
Mikael Roos
2015-02-10 23:05:15 +01:00
parent e5ca711c8a
commit c32a594f62

View File

@@ -4,7 +4,7 @@ Image conversion on the fly using PHP
About
-------------------------------------
<img src="/kod-exempel/cimage/webroot/img.php?src=kodim07.png&w=200&c=140,140,520,340&sharpen"/>
<img src="http://dbwebb.se/kod-exempel/cimage/webroot/img.php?src=kodim07.png&w=200&c=140,140,520,340&sharpen"/>
`CImage` is a PHP class enabling resizing of images through scaling, cropping and filtering effects -- using PHP GD. The script `img.php` uses `CImage` to enable server-side image processing utilizing caching and optimization of the processed images.
@@ -88,7 +88,7 @@ Lets take some use cases to let you know when and how `img.php` might be useful.
### Make a thumbnail {#usecase-complex}
<img src="/kod-exempel/cimage/webroot/img.php?src=kodim04.png&w=80&h=80&cf">
<img src="http://dbwebb.se/kod-exempel/cimage/webroot/img.php?src=kodim04.png&w=80&h=80&cf">
Lets say you have a larger image and you want to make a smaller thumbnail of it with a size of 80x80 pixels. You simply take the image and add constraints on `width`, `height` and you use the resize strategy `crop-to-fit` to crops out the parts of the image that does not fit.
@@ -102,7 +102,7 @@ To produce such a thumbnail, create a link like this:
Perhaps you got an image from a friend. The image was taken with the iPhone and thus rotated.
<img src="/kod-exempel/cimage/webroot/img.php?src=issue36/me-270.jpg&w=250">
<img src="http://dbwebb.se/kod-exempel/cimage/webroot/img.php?src=issue36/me-270.jpg&w=250">
The original image is looking like this one, scaled down to a width of 250 pixels.
@@ -115,7 +115,7 @@ Lets call this *the URL-Photoshopper*. This is how the magic looks like.
> `img.php?src=issue36/me-270.jpg&w=100&h=100&cf&aro`
> `&rb=-25&a=8,30,30,38&f=grayscale&convolve=sharpen-alt`
<img src="/kod-exempel/cimage/webroot/img.php?src=issue36/me-270.jpg&w=100&h=100&cf&aro&rb=-25&a=8,30,30,38&f=grayscale&convolve=sharpen-alt">
<img src="http://dbwebb.se/kod-exempel/cimage/webroot/img.php?src=issue36/me-270.jpg&w=100&h=100&cf&aro&rb=-25&a=8,30,30,38&f=grayscale&convolve=sharpen-alt">
For myself, I use `img.php` to put up all images on my website, it gives me the power of affecting the resulting images - without opening up a photo-editing application.
@@ -134,7 +134,7 @@ Try it out by pointing your browser to the test file `webroot/test/test.php`. It
###Process your first image {#first}
<img src="/kod-exempel/cimage/webroot/img.php?src=kodim04.png&amp;w=w2&amp;a=40,0,50,0" alt=''>
<img src="http://dbwebb.se/kod-exempel/cimage/webroot/img.php?src=kodim04.png&amp;w=w2&amp;a=40,0,50,0" alt=''>
Try it yourself by opening up an image in your browser. Start with
@@ -188,7 +188,7 @@ Open an image through `img.php` by using its `src` attribute.
It looks like this.
<img src="/kod-exempel/cimage/webroot/img.php?src=kodim13.png&w=w1&save-as=jpg">
<img src="http://dbwebb.se/kod-exempel/cimage/webroot/img.php?src=kodim13.png&w=w1&save-as=jpg">
All images are stored in a directory structure and you access them as:
@@ -202,7 +202,7 @@ Create a thumbnail of the image by applying constraints on width and height, or
| `&width=150` | `&height=150` | `&w=150&h=150` |
|---------------------|---------------------|---------------------|
| <img src=/kod-exempel/cimage/webroot/img.php?src=kodim13.png&w=150 alt=''> | <img src=/kod-exempel/cimage/webroot/img.php?src=kodim13.png&h=150 alt=''> | <img src=/kod-exempel/cimage/webroot/img.php?src=kodim13.png&w=150&h=150 alt=''> |
| <img src=http://dbwebb.se/kod-exempel/cimage/webroot/img.php?src=kodim13.png&w=150 alt=''> | <img src=http://dbwebb.se/kod-exempel/cimage/webroot/img.php?src=kodim13.png&h=150 alt=''> | <img src=http://dbwebb.se/kod-exempel/cimage/webroot/img.php?src=kodim13.png&w=150&h=150 alt=''> |
By setting `width`, `height` or both, the image gets resized to be *not larger* than the defined dimensions *and* keeping its original aspect ratio.
@@ -217,10 +217,10 @@ Creating a thumbnail with a certain dimension of width and height, usually invol
| What | The image |
|---------------------|---------------------|
| **Original.** The original image resized with a max width and max height.<br>`?w=300&h=150` | <img src=/kod-exempel/cimage/webroot/img.php?src=kodim13.png&w=300&h=150 alt=''> |
| **Stretch.** Stretch the image so that the resulting image has the defined width and height.<br>`?w=300&h=150&stretch` | <img src=/kod-exempel/cimage/webroot/img.php?src=kodim13.png&w=300&h=150&stretch alt=''> |
| **Crop to fit.** Keep the aspect ratio and crop out the parts of the image that does not fit.<br>`?w=300&h=150&crop-to-fit` | <img src=/kod-exempel/cimage/webroot/img.php?src=kodim13.png&w=300&h=150&crop-to-fit alt=''> |
| **Fill to fit.** Keep the aspect ratio and fill then blank space with a background color.<br>`?w=300&h=150&fill-to-fit=006600` | <img src=/kod-exempel/cimage/webroot/img.php?src=kodim13.png&w=300&h=150&fill-to-fit=006600 alt=''> |
| **Original.** The original image resized with a max width and max height.<br>`?w=300&h=150` | <img src=http://dbwebb.se/kod-exempel/cimage/webroot/img.php?src=kodim13.png&w=300&h=150 alt=''> |
| **Stretch.** Stretch the image so that the resulting image has the defined width and height.<br>`?w=300&h=150&stretch` | <img src=http://dbwebb.se/kod-exempel/cimage/webroot/img.php?src=kodim13.png&w=300&h=150&stretch alt=''> |
| **Crop to fit.** Keep the aspect ratio and crop out the parts of the image that does not fit.<br>`?w=300&h=150&crop-to-fit` | <img src=http://dbwebb.se/kod-exempel/cimage/webroot/img.php?src=kodim13.png&w=300&h=150&crop-to-fit alt=''> |
| **Fill to fit.** Keep the aspect ratio and fill then blank space with a background color.<br>`?w=300&h=150&fill-to-fit=006600` | <img src=http://dbwebb.se/kod-exempel/cimage/webroot/img.php?src=kodim13.png&w=300&h=150&fill-to-fit=006600 alt=''> |
Learn to crop your images, creative cropping can make wonderful images from appearingly useless originals.
@@ -237,7 +237,7 @@ Fill to fit is useful when you have some image that must fit in a certain dimens
> `img.php?src=kodim13.png&w=600&aspect-ratio=4`
> `&crop-to-fit&sharpen&save-as=jpg&q=30`
<img src=/kod-exempel/cimage/webroot/img.php?src=kodim13.png&w=600&aspect-ratio=4&crop-to-fit&sharpen&save-as=jpg&q=30 alt=''>
<img src=http://dbwebb.se/kod-exempel/cimage/webroot/img.php?src=kodim13.png&w=600&aspect-ratio=4&crop-to-fit&sharpen&save-as=jpg&q=30 alt=''>
Here is a list of all parameters that you can use together with `img.php`, grouped by its basic intent of usage.
@@ -420,7 +420,7 @@ For example, the following image is created like this:
> `&w=300&save-as=jpg`
<img src=/kod-exempel/cimage/webroot/img.php?src=kodim24.png&w=300&save-as=jpg alt=''>
<img src=http://dbwebb.se/kod-exempel/cimage/webroot/img.php?src=kodim24.png&w=300&save-as=jpg alt=''>
Its JSON-representation is retrieved like this: