Built-in image editor
On this page
Editing images right in a browser is the closest path for your app to receive better images. And those, in turn, provide higher engagement rates and conversions. The quality of visuals becomes an even greater concern when you want to perfect images sent by your users before they get to your site or app.
There are a dozen on-the-fly effects you can apply right away: crop, rotate, flip, adjust brightness, exposure, gamma, contrast, saturation, vibrance, warmth, apply photo filters, and just magical enhance.
How it works
Image operations available for application are based on our Image processing features. Editor outputs a CDN URL holding image UUIDs and operations applied by a user while editing in the form of URL directives.
Every image first gets to your Uploadcare storage. Then we show an image preview in the File Uploader dialog via a CDN URL provided on file upload. When a user applies image processing operations, we inject the corresponding URL directives. Once the editing is complete, editor outputs the new CDN URL which includes all the applied operations.
For example, if a user chooses to apply grayscale
and clicks rotate
once,
here is what we will get in the output:
https://ucarecdn.com/:UUID/-/preview/-/grayscale/-/rotate/270/
Note: The preview
operation will appear in the output URL by default due to
the image processing operation limitations.
Usage example
Image editor comes together with the File Uploader. Both Regular and Inline modes include a built-in cloud image editor.
<!-- Script connection: -->
<script type="module">
import * as LR from "https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.25.6/web/lr-cloud-image-editor.min.js";
LR.registerBlocks(LR);
const callback = (text) => (event) => {
console.log(`${text}`, event.detail);
alert(`${text}. See results in console.`);
};
const instance = document.querySelector('#my-editor');
instance.addEventListener('apply', callback('Apply'));
instance.addEventListener('cancel', callback('Cancel'));
instance.addEventListener('change', callback('Change'));
</script>
<!-- CSS context properties: -->
<style>
body {
height: 100vh;
width: 100vw;
margin: 0;
}
</style>
<!-- Config element: -->
<lr-config ctx-name="my-editor"></lr-config>
<!-- Cloud image editor element: -->
<lr-cloud-image-editor
id="my-editor"
css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.25.6/web/lr-cloud-image-editor.min.css"
uuid="7c167b79-9f27-4489-8032-3f3be1840605"
>
</lr-cloud-image-editor>
javascript
Configuration
Attributes
uuid
Type: string
Defines the UUID of the image to be edited. The image must be stored in your Uploadcare project.
cdn-url
Type: string
Defines the CDN URL of the image to be edited. The image must be stored in your Uploadcare project.
Events
apply
Type: CustomEvent<ApplyResult>
export type Transformations = {
enhance?: number | undefined
brightness?: number | undefined
exposure?: number | undefined
gamma?: number | undefined
contrast?: number | undefined
saturation?: number | undefined
vibrance?: number | undefined
warmth?: number | undefined
rotate?: number | undefined
mirror?: boolean | undefined
flip?: boolean | undefined
filter?:
| {
name: string
amount: number
}
| undefined
crop?:
| {
dimensions: [number, number]
coords: [number, number]
}
| undefined
}
export type ApplyResult = {
originalUrl: string
cdnUrlModifiers: string
cdnUrl: string
transformations: Transformations
}
ts
Fires when a user clicks the Apply
button. Returns an object with the
following properties:
originalUrl
— the original image URL (without any URL derectives applied)cdnUrlModifiers
— the URL directives applied by a usercdnUrl
— the URL of the edited imagetransformations
— the object with the applied image processing operations
change
Type: CustomEvent<ChangeResult>
export type ChangeResult = {
originalUrl: string
cdnUrlModifiers: string
cdnUrl: string
transformations: Transformations
}
ts
It fires when a user applies any transformation. The payload signature is the same as for apply
event.
cancel
Type: CustomEvent<void>
Fires when a user clicks the Cancel
button.