optlsnd/app.js

## app.js
import * as LR from "https://cdn.jsdelivr.net/npm/@uploadcare/blocks@latest/web/lr-cloud-image-editor.min.js";
import { uploadFromUrl } from "https://cdn.jsdelivr.net/npm/@uploadcare/upload-client@6.12.1/dist/esm/index.browser.mjs";

LR.registerBlocks(LR);

// Get all image elements and add a "click" handler
const editableImages = document.querySelectorAll(".editable-image");
editableImages.forEach((image) => {
  image.addEventListener("click", editImage);
});

async function editImage() {
  // Preload image from a remote URL:
  // If the source image is not on Uploadcare, our API will download
  // and save it in your project
  // Otherwise, it will be loaded from Uploadcare CDN without making a new upload
  let cdnUrl;
  const imageUrl = this.src;
  if (imageUrl.indexOf("ucarecdn.com") === -1) {
    const fileInfo = await uploadFromUrl(imageUrl, {
      publicKey: "demopublickey",
    });
    cdnUrl = fileInfo.cdnUrl;
  } else {
    cdnUrl = imageUrl;
  }

  // Open the image in the widget's dialog for re-cropping
  const template = document.querySelector("#my-template");
  const fr = template.content.cloneNode(true);

  const editor = fr.querySelector("lr-cloud-image-editor");
  editor.setAttribute("cdn-url", cdnUrl);

  const dialog = fr.querySelector("dialog");
  document.body.append(fr);
  dialog.showModal();

  // Once a user has finished editing, you retrive the final URL
  // and CDN URL modifiers as a separate string to save them
  // in your DB/CMS
  editor.addEventListener("apply", (e) => {
    dialog.remove();

    console.log("Final URL: ", e.detail.cdnUrl);
    console.log("Modifiers: ", e.detail.cdnUrlModifiers);
    // Update image
    this.src = e.detail.cdnUrl;
  });

  editor.addEventListener("cancel", () => dialog.remove());
}

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Uploadcare test</title>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js" type="module"></script>
  </head>
  <body>
    <h1>Editable images</h1>
    <div>
      <p>Click on image to edit</p>
      <img
        src="https://images.unsplash.com/photo-1661547663251-297d10e13b3b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2745&q=80"
        class="editable-image"
      />
      <img
        src="https://images.unsplash.com/photo-1661587781420-dc427db4ccda?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
        class="editable-image"
      />
      <img
        src="https://images.unsplash.com/photo-1661493817330-fae405864560?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2942&q=80"
        class="editable-image"
      />
    </div>
    <template id="my-template">
      <dialog>
        <lr-config ctx-name="my-editor"></lr-config>
        <lr-cloud-image-editor ctx-name="my-editor" css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@latest/web/lr-cloud-image-editor.min.css"></<lr-cloud-image-editor>
      </dialog>
    </template>
  </body>
</html>
	import * as LR from "https://cdn.jsdelivr.net/npm/@uploadcare/blocks@latest/web/lr-cloud-image-editor.min.js";
	import { uploadFromUrl } from "https://cdn.jsdelivr.net/npm/@uploadcare/upload-client@6.12.1/dist/esm/index.browser.mjs";

	LR.registerBlocks(LR);

	// Get all image elements and add a "click" handler
	const editableImages = document.querySelectorAll(".editable-image");
	editableImages.forEach((image) => {
	image.addEventListener("click", editImage);
	});

	async function editImage() {
	// Preload image from a remote URL:
	// If the source image is not on Uploadcare, our API will download
	// and save it in your project
	// Otherwise, it will be loaded from Uploadcare CDN without making a new upload
	let cdnUrl;
	const imageUrl = this.src;
	if (imageUrl.indexOf("ucarecdn.com") === -1) {
	const fileInfo = await uploadFromUrl(imageUrl, {
	publicKey: "demopublickey",
	});
	cdnUrl = fileInfo.cdnUrl;
	} else {
	cdnUrl = imageUrl;
	}

	// Open the image in the widget's dialog for re-cropping
	const template = document.querySelector("#my-template");
	const fr = template.content.cloneNode(true);

	const editor = fr.querySelector("lr-cloud-image-editor");
	editor.setAttribute("cdn-url", cdnUrl);

	const dialog = fr.querySelector("dialog");
	document.body.append(fr);
	dialog.showModal();

	// Once a user has finished editing, you retrive the final URL
	// and CDN URL modifiers as a separate string to save them
	// in your DB/CMS
	editor.addEventListener("apply", (e) => {
	dialog.remove();

	console.log("Final URL: ", e.detail.cdnUrl);
	console.log("Modifiers: ", e.detail.cdnUrlModifiers);
	// Update image
	this.src = e.detail.cdnUrl;
	});

	editor.addEventListener("cancel", () => dialog.remove());
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Uploadcare test</title>
	<link rel="stylesheet" href="style.css" />
	<script src="app.js" type="module"></script>
	</head>
	<body>
	<h1>Editable images</h1>
	<div>
	<p>Click on image to edit</p>
	<img
	src="https://images.unsplash.com/photo-1661547663251-297d10e13b3b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2745&q=80"
	class="editable-image"
	/>
	<img
	src="https://images.unsplash.com/photo-1661587781420-dc427db4ccda?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
	class="editable-image"
	/>
	<img
	src="https://images.unsplash.com/photo-1661493817330-fae405864560?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2942&q=80"
	class="editable-image"
	/>
	</div>
	<template id="my-template">
	<dialog>
	<lr-config ctx-name="my-editor"></lr-config>
	<lr-cloud-image-editor ctx-name="my-editor" css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@latest/web/lr-cloud-image-editor.min.css"></<lr-cloud-image-editor>
	</dialog>
	</template>
	</body>
	</html>