A Derby JS component for editing images. It uses Derby Panzoom to edit images.
- Resize and crop images by panning and zooming.
- Display your image in a container smaller than the final image size.
- All of the features in jQuery Panzoom (transitions, etc.)
$ npm install d-image-edit --save
This component extends Derby Panzoom which, requires jQuery Panzoom in order to work. You must include the script on the page.
Create a view:
<index: element="image-edit">
<div as="container">
<img alt="" as="image" src="{{@src}}">
</div>
<!-- must use hidden/visible classes rather than {{if}} blocks -->
<div class="{{if !canScale}}hidden{{/if}}">
<button on-click="zoom(true)" type="button">Zoom out</button>
<input type="range" as="range">
<button on-click="zoom()" type="button">Zoom in</button>
</div>
Associate the view with the component:
app.use('image-edit', require('d-image-edit'));
Use the view:
<Scripts:>
<script src="jquery.panzoom.js">
<Body:>
<edit contain="invert" on-draw="save()" src="..."></edit>
image (Required) - The <img>
element that should contain the image source.
input - The <input type="file">
element that can select a new image.
range - The <input type="range">
element that can zoom in and out.
The following path data is available to the view implementing the component:
canScale - True if the computed max scale is greater than the min scale. Use this to conditionally display zoom in and zoom out controls.
from.image - The image used to draw the final image.
loading - True while the image is loading.
to.image - The final image.
debounce - The wait time before a re-draw occurs after a change.
filetype - The file type to draw the image as. Defaults to png.
size - The width and height of the final image.
width - The width of the final image. Overrides size.
height - The height of the final image. Overrides size.
clear() - Clear all image data.
clear() - Event emitted after the image is cleared.
draw(image) - Event emitted after a new image is drawn based on changes by panning or zooming.
load(image) - Event emitted after the image is loaded.
There are more options, events and functions. See Derby Panzoom.
Be careful about wrapping special elements such as input
and range
in {{if}}
blocks.
If the {{if}}
block evaluates to false then the server will not render the initial element and it won't be found by the component.
Use hidden
or visible
classes to toggle visibility instead.