Skip to content
forked from flyimg/flyimg

Image resizing and cropping on the fly base on ImageMagick+MozJPEG runs inside a Docker container

Notifications You must be signed in to change notification settings

baamenabar/fly-image

 
 

Repository files navigation

Flyimg

Build Status Code Climate Issue Count Test Coverage SensioLabsInsight

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.

Installation and setup

Requirements

You will need to have Docker on your machine. Optionally you can use Docker machine to create a virtual environment.

Instalation

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:

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:

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 values:

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.

mozjpeg bool

default: 1 - Use moz-jpeg compression library, if false it fallsback to the default Imagemagick compression algorithm.

quality int (0-100)

default: 90 - Sets the compression level for the output image.

width int

default: null - Sets the target width of the image. If not set, width will be calculated in order to keep aspect ratio.

height int

default: null - Sets the target height of the image. If not set, height will be calculated in order to keep aspect ratio.

Using width AND height

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.

crop bool

default: false - When both width and height are set, this allows the image to be cropped so it fills the width x height area.

gravity int

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)" ...

strip int

default: 1 - removes exif data and aditional color profile.

resize int

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 ...

filter int

default: Lanczos - Resizing algorithm, Triangle is a smoother lighter option

   [...] -filter Triangle

scale int

default: null - The "-scale" resize operator is a simplified, faster form of the resize command. Usefule for fast exact scaling of pixels.

refresh int

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.

Example of using AWS S3 Adapter:

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'
            ]
        ]
    ]
]);

Enable Restricted Domains:

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

Demo:

Our application is available here: flyimg.io

About

Image resizing and cropping on the fly base on ImageMagick+MozJPEG runs inside a Docker container

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • PHP 81.2%
  • Shell 11.5%
  • Nginx 7.3%