Image canvas | image | Spatie

 SPATIE

  Image
========

spatie.be/open-source

  [Docs](https://spatie.be/docs)  [Image](https://spatie.be/docs/image/v2)  Image-manipulations  Image canvas

 Version   v3   v2   v1

 Other versions for crawler [v3](https://spatie.be/docs/image/v3) [v2](https://spatie.be/docs/image/v2) [v1](https://spatie.be/docs/image/v1)

- [ Introduction ](https://spatie.be/docs/image/v2/introduction)
- [ Postcardware ](https://spatie.be/docs/image/v2/postcardware)
- [ Installation and setup ](https://spatie.be/docs/image/v2/installation-and-setup)
- [ Questions & issues ](https://spatie.be/docs/image/v2/questions-and-issues)
- [ Changelog ](https://spatie.be/docs/image/v2/changelog)
- [ About us ](https://spatie.be/docs/image/v2/about-us)

Usage
-----

- [ Basic usage ](https://spatie.be/docs/image/v2/usage/basic-usage)
- [ Saving images ](https://spatie.be/docs/image/v2/usage/saving-images)
- [ Retrieving properties ](https://spatie.be/docs/image/v2/usage/retrieving-properties)
- [ Preparing manipulations ](https://spatie.be/docs/image/v2/usage/preparing-manipulations)
- [ Advanced manipulations ](https://spatie.be/docs/image/v2/usage/advanced-manipulations)

Image manipulations
-------------------

- [ Overview ](https://spatie.be/docs/image/v2/image-manipulations/overview)
- [ Resizing images ](https://spatie.be/docs/image/v2/image-manipulations/resizing-images)
- [ Optimizing images ](https://spatie.be/docs/image/v2/image-manipulations/optimizing-images)
- [ Adjustments ](https://spatie.be/docs/image/v2/image-manipulations/adjustments)
- [ Image canvas ](https://spatie.be/docs/image/v2/image-manipulations/image-canvas)
- [ Effects ](https://spatie.be/docs/image/v2/image-manipulations/effects)
- [ Watermarks ](https://spatie.be/docs/image/v2/image-manipulations/watermarks)

      You are viewing the documentation for **an older version** of this package. You can check the version you are using with the following command:

 `                                    composer show spatie/image                                                                                                                                                                                                                                    `

Image canvas
============

###  On this page

1. [ Background ](#content-background)
2. [ Border ](#content-border)
3. [ Orientation ](#content-orientation)
4. [ Flip ](#content-flip)

Background
--------------------------------------------------------------------------------------

The `background` method sets the background for transparent images.

The color can be a color name (see [all available color names](https://developer.mozilla.org/en/docs/Web/CSS/color_value#Color_keywords)) or hexadecimal RGB(A).

```
$image->background('darkgray');
```

![Darkgray background on PNG](../images/example-background.png)

Border
--------------------------------------------------------------------------

The `border` method adds border with a certain `$width`, `$color` and `$borderType` to the `Image`.

```
$image->border(15, '007698', Manipulations::BORDER_SHRINK);
```

![Border](../images/example-border.jpg)

### Border types

#### `Manipulations::BORDER_OVERLAY`

By default the border will be added as an overlay to the image.

#### `Manipulations::BORDER_SHRINK`

The `BORDER_SHRINK` type shrinks the image to fit the border around. The canvas size stays the same.

#### `Manipulations::BORDER_EXPAND`

The `BORDER_EXPAND` type adds the border to the outside of the image and thus expands the canvas.

Orientation
-----------------------------------------------------------------------------------------

The `orientation` method can be used to rotate the `Image` `90`, `180` or `270` degrees.

```
$image->orientation(Manipulations::ORIENTATION_180);
```

![Border](../images/example-orientation.jpg)

The accepted values are available as the following constants on the `Manipulations` class:

- `Manipulations::ORIENTATION_AUTO` (default EXIF orientation)
- `Manipulations::ORIENTATION_90`
- `Manipulations::ORIENTATION_180`
- `Manipulations::ORIENTATION_270`

Flip
--------------------------------------------------------------------

Flip/mirror an image 'horizontally', 'vertically' or 'both'.

```
$image->flip(Manipulations::FLIP_HORIZONTALLY);
```

![Border](../images/example-flip-horizontally.jpg)

The accepted values are available as the following constants on the `Manipulations` class:

- `Manipulations::FLIP_HORIZONTALLY`
- `Manipulations::FLIP_VERTICALLY`
- `Manipulations::FLIP_BOTH`