Image resizing, cropping and compression on the fly with the impressive MozJPEG compression algorithm. A one Docker container to build your own Cloudinary-like service.
You pass the image URL and a set of keys with options, like size or compression. Flyimg will fetch the image, convert it, store it, cache it and serve it. The next time the request comes, it will serve the cached version.
The application is based on Silex microframework.
You will need to have Docker on your machine. Optionally you can use Docker machine to create a virtual environment.
Create the project with composer create
or clone it into your server.
composer create-project sadok-f/flyimg
CD into the folder and to build the images run:
docker build -t flyimg .
This will download and build the main image, It will take a few minutes. If you get some sort of error related to files not found by apt-get or simmilar, try this same command again.
Then run the container:
docker run -t -d -i -p 8080:80 -v /Users/s.ferjani/DockerProjects/flyimage:/var/www/html --name flyimg flyimg
Dockerfile run supervisord command which lunch 2 process nginx and php-fpm
Now, only for the first time you need to run composer install inside the main container:
docker exec -it flyimg composer install
Again, it will take a few minutes. Same as before, if you get some errors you should try running composer install
again. After it's done, you can navigate to your machine's IP in port 8080 (ex: http://192.168.99.100:8080/ ) an you should get a message saying: Hello from Docker!. This means fpm is ready to work.
You can test your image resizing service by navigating to: http://127.0.0.1:8080/upload/w_333,h_333,q_90/https://www.mozilla.org/media/img/firefox/firefox-256.e2c1fc556816.jpg
This is fetching an image from Mozilla, resizing it, saving it and serving it.
More configuration details below.
Storage files based on Flysystem which is a filesystem abstraction allows you to easily swap out a local filesystem for a remote one. Technical debt is reduced as is the chance of vendor lock-in.
Default storage is Local, but you can use other Adapters like AWS S3, Azure, FTP, Dropbox, ...
options_keys:
moz: mozjpeg
q: quality
unsh: unsharp
w: width
h: height
c: crop
bg: background
st: strip
rz: resize
g: gravity
th: thread
thb: thumbnail
f: filter
sc: scale
sf: sampling-factor
rf: refresh
default_options:
mozjpeg: 1
quality: 90
unsharp: null
width: null
height: null
crop: null
background: null
strip: 1
resize: null
gravity: Center
thread: 1
thumbnail: null
filter: Lanczos
scale: null
sampling-factor: 1x1
refresh: false
Most of these options are Imagemagick flags, many can get pretty advanced, use the Imagemagick docs.
default: 1 - Use moz-jpeg compression library, if false
it fallsback to the default Imagemagick compression algorithm.
default: 90 - Sets the compression level for the output image.
default: null - Sets the target width of the image. If not set, width will be calculated in order to keep aspect ratio.
default: null - Sets the target height of the image. If not set, height will be calculated in order to keep aspect ratio.
By default setting width and height together, works like defining a rectangle that will define a max-width and max-height and the image will scale propotionally to fit that area without cropping.
By default; width, height, or both will not scale up an image that is smaller than the defined dimentions.
default: false - When both width and height are set, this allows the image to be cropped so it fills the width x height area.
default: Center - When crop is applied, changing the gravity will define which part of the image is kept inside the crop area.
The basic options are: NorthWest
, North
, NorthEast
, West
, Center
, East
, SouthWest
, South
, SouthEast
.
[...] -gravity NorthWest ...
### background `color` (multiple formats)
**default: white** - Sets the background of the canvas for the cases where padding is added to the images. It suports hex, css color names, rgb. Only css color names are supported without quotation marks.
```sh
[...] -background red ...
[...] -background "#ff4455" ...
[...] -background "rgb(255,120,100)" ...
default: 1 - removes exif data and aditional color profile.
default: null - The alternative resizing method to -thumbnail.
### unsharp `radiusxsigma{+gain}{+threshold}`
**default: null** - Sharpens an image with a convolved Gausian operator. A good example `0.25x0.25+8+0.065`.
```sh
[...] -unsharp 0.25x0.25+8+0.065 ...
default: Lanczos - Resizing algorithm, Triangle is a smoother lighter option
[...] -filter Triangle
default: null - The "-scale" resize operator is a simplified, faster form of the resize command. Usefule for fast exact scaling of pixels.
default: false - Refresh will delete the local cached copy of the file requested and will generate the image again. Also it will send headers with the comand done on the image and the original image size.
in app.php:
$s3Client = \Aws\S3\S3Client::factory([
'credentials' => [
'key' => 'your-key',
'secret' => 'your-secret',
],
'region' => 'your-region',
'version' => 'latest|version',
]);
$app->register(new WyriHaximus\SliFly\FlysystemServiceProvider(), [
'flysystem.filesystems' => [
'upload_dir' => [
'adapter' => 'League\Flysystem\AwsS3v3\AwsS3Adapter',
'args' => [
$s3Client,
'your-bucket-name'
]
]
]
]);
Restricted domains disabled by default. This means that you can fetch a resource from any URL. To enable the domain restriction, change in config/parameters.yml
restricted_domains: true
After enabling, you need to put the white listed domains
whitelist_domains:
- www.domain-1.org
- www.domain-2.org
Our application is available here: flyimg.io