Full Featured
Result
You can right click on image and save it
Active layer's parameters
Plugin Options
| Name | Type | Default | Description |
|---|---|---|---|
| canvasWidth | number | Initial image's natural width | Canvas width |
| canvasHeight | number | Initial image's natural height | Canvas height |
| width | number | Initial image's natural width | Layer width |
| height | number | Initial image's natural height | Layer height |
| positionX | number | (Canvas width - Layer width) / 2 | Layer's left offset |
| positionY | number | (Canvas height - Layer height) / 2 | Layer's top offset |
| rotation | number | 0 | Layer's rotation angle in degree (0 to 359) |
| flipV | boolean | false | Is layer flipped vertically |
| flipH | boolean | false | Is layer flipped horizontally |
| opacity | number | 100 | Layer opacity in percentage (0 to 100) |
| move | boolean | true | Is layer movable |
| resize | boolean | true | Is layer resizable |
| rotate | boolean | true | Is layer rotatable |
| overflow | boolean | true | Display overflow |
| load | function | null | Onload callback for layer |
| error | function | null | Onerror callback for layer |
| change | function | null | General change event for all parameters |
| loading | function | null | Loading event of layers |
Plugin Methods
| Name | Arguments | Description |
|---|---|---|
| destroy | - | Destroys plugin and returns the initial image back. |
| get | - | Returns all layers |
| set | object opts required | Sets active layer's parameters |
| addLayer |
string src required
object opts optional
boolean silent optional
|
Adds a new layer |
| activateLayer |
number ind optional
boolean silent optional
|
Focuses the layer specified with index and triggers blur on others |
| removeLayer |
number ind optional
boolean silent optional
|
Removes the layer specified with index. Default is active layer |
| sendBack |
number ind optional
boolean silent optional
|
Sends the layer specified with index to back. Default is active layer |
| bringFront |
number ind optional
boolean silent optional
|
Brings the layer specified with index to front. Default is active layer |
| swap |
number i required
number j required
boolean silent optional
|
Swaps 2 layer specified with i and j indexes |
| change |
function callback optional
|
Binds a function for change event if "callback" argument is passed, triggers "change" event if not |
| loading |
function param optional
|
Binds a function for "loading event". |
| ready |
function param optional
|
Binds a function for "ready event". |
Browser Support
Tested in current releases of:
- Chrome
- Firefox
- Opera
And IE 9+.
IE 9 has some issues with flip action.
Releases
2016-05-30 1.0.1
- Documentation updated
- New example: Save to server
- New example: Bootstrap Modal
- New php script: save.php