Built-in image editor

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 user
cdnUrl — the URL of the edited image
transformations — 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.