mirror of
https://github.com/mosbth/cimage.git
synced 2025-07-30 21:20:11 +02:00
merged with master
This commit is contained in:
37
README.md
37
README.md
@@ -13,7 +13,7 @@ Image conversion on the fly using PHP
|
||||
About
|
||||
-------------------------------------
|
||||
|
||||
<img src="http://dbwebb.se/kod-exempel/cimage/webroot/img.php?src=kodim07.png&w=200&c=140,140,520,340&sharpen"/>
|
||||
<img src="https://cimage.se/cimage/imgd.php?src=example/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.
|
||||
|
||||
@@ -27,7 +27,10 @@ Documentation
|
||||
--------------------------------------
|
||||
|
||||
Read full documentation at:
|
||||
http://dbwebb.se/opensource/cimage
|
||||
<strike>http://dbwebb.se/opensource/cimage</strike>
|
||||
|
||||
New website is being setup at [cimage.se](https://cimage.se), to improve documentation (work is ongoing).
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -51,14 +54,14 @@ There are several ways of installing. You either install the whole project which
|
||||
|
||||
The [sourcode is available on GitHub](https://github.com/mosbth/cimage). Clone, fork or [download as zip](https://github.com/mosbth/cimage/archive/master.zip).
|
||||
|
||||
**Latest stable version is v0.7.9 released 2015-12-07.**
|
||||
**Latest stable version is v0.7.18 released 2016-08-09.**
|
||||
|
||||
I prefer cloning like this. Do switch to the latest stable version.
|
||||
|
||||
```bash
|
||||
git clone git://github.com/mosbth/cimage.git
|
||||
cd cimage
|
||||
git checkout v0.7.9
|
||||
git checkout v0.7.18
|
||||
```
|
||||
|
||||
Make the cache-directory writable by the webserver.
|
||||
@@ -81,7 +84,7 @@ There are some all-included bundles of `img.php` that can be downloaded and used
|
||||
Dowload the version of your choice like this.
|
||||
|
||||
```bash
|
||||
wget https://raw.githubusercontent.com/mosbth/cimage/v0.7.9/webroot/imgp.php
|
||||
wget https://raw.githubusercontent.com/mosbth/cimage/v0.7.18/webroot/imgp.php
|
||||
```
|
||||
|
||||
Open up the file in your editor and edit the array `$config`. Ensure that the paths to the image directory and the cache directory matches your environment, or create an own config-file for the script.
|
||||
@@ -103,7 +106,7 @@ Lets take some use cases to let you know when and how `img.php` might be useful.
|
||||
|
||||
### Make a thumbnail
|
||||
|
||||
<img src="http://dbwebb.se/kod-exempel/cimage/webroot/img.php?src=kodim04.png&w=80&h=80&cf">
|
||||
<img src="https://cimage.se/cimage/imgd.php?src=example/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.
|
||||
|
||||
@@ -117,7 +120,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="http://dbwebb.se/kod-exempel/cimage/webroot/img.php?src=issue36/me-270.jpg&w=250">
|
||||
<img src="https://cimage.se/cimage/imgd.php?src=example/issue36/me-270.jpg&w=250">
|
||||
|
||||
The original image is looking like this one, scaled down to a width of 250 pixels.
|
||||
|
||||
@@ -130,7 +133,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="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">
|
||||
<img src="https://cimage.se/cimage/imgd.php?src=example/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.
|
||||
|
||||
@@ -149,7 +152,7 @@ Try it out by pointing your browser to the test file `webroot/test/test.php`. It
|
||||
|
||||
###Process your first image
|
||||
|
||||
<img src="http://dbwebb.se/kod-exempel/cimage/webroot/img.php?src=kodim04.png&w=w2&a=40,0,50,0" alt=''>
|
||||
<img src="https://cimage.se/cimage/imgd.php?src=example/kodim04.png&w=w2&a=40,0,50,0" alt=''>
|
||||
|
||||
Try it yourself by opening up an image in your browser. Start with
|
||||
|
||||
@@ -203,7 +206,7 @@ Open an image through `img.php` by using its `src` attribute.
|
||||
|
||||
It looks like this.
|
||||
|
||||
<img src="http://dbwebb.se/kod-exempel/cimage/webroot/img.php?src=kodim13.png&w=w1&save-as=jpg">
|
||||
<img src="https://cimage.se/cimage/imgd.php?src=example/kodim13.png&w=w1&save-as=jpg">
|
||||
|
||||
All images are stored in a directory structure and you access them as:
|
||||
|
||||
@@ -217,7 +220,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=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=''> |
|
||||
| <img src=https://cimage.se/cimage/imgd.php?src=example/kodim13.png&w=150 alt=''> | <img src=https://cimage.se/cimage/imgd.php?src=example/kodim13.png&h=150 alt=''> | <img src=https://cimage.se/cimage/imgd.php?src=example/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.
|
||||
|
||||
@@ -232,10 +235,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=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=''> |
|
||||
| **Original.** The original image resized with a max width and max height.<br>`?w=300&h=150` | <img src=https://cimage.se/cimage/imgd.php?src=example/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=https://cimage.se/cimage/imgd.php?src=example/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=https://cimage.se/cimage/imgd.php?src=example/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=https://cimage.se/cimage/imgd.php?src=example/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.
|
||||
|
||||
@@ -252,7 +255,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=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=''>
|
||||
<img src=https://cimage.se/cimage/imgd.php?src=example/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.
|
||||
|
||||
@@ -435,7 +438,7 @@ For example, the following image is created like this:
|
||||
|
||||
> `&w=300&save-as=jpg`
|
||||
|
||||
<img src="http://dbwebb.se/kod-exempel/cimage/webroot/img.php?src=kodim24.png&w=300&save-as=jpg" alt=''>
|
||||
<img src="https://cimage.se/cimage/imgd.php?src=example/kodim24.png&w=300&save-as=jpg" alt=''>
|
||||
|
||||
Its JSON-representation is retrieved like this:
|
||||
|
||||
|
Reference in New Issue
Block a user