PhoenixKitWeb.Components.ImageEditor (phoenix_kit v2.29.1)

Copy Markdown View Source

Edits a stored image after upload — crop, rotate, flip, straighten, redact, brightness and contrast — through PhoenixKit.Modules.Storage.ImageEditing.

Everything is a server-rendered form, so the editor works with nothing but LiveView: numeric crop and region fields, buttons for the quarter turns, sliders for the rest. The ImageEditor hook adds drawing the crop and the redaction areas on the preview. The preview is CSS over the unedited original, so it is close to the result, not exact — tones in particular; the saved image is rendered by ImageMagick.

Usage

<.live_component
  module={PhoenixKitWeb.Components.ImageEditor}
  id={"image-editor-" <> @file.uuid}
  file={@file}
  scope={@phoenix_kit_current_scope}
  on_close={JS.push("close_image_editor")}
/>

Assigns

  • :file (required) — the PhoenixKit.Modules.Storage.File.
  • :scope — who is editing. ImageEditing decides whether they may (the owner, an Owner/Admin, a "media" permission holder).
  • :authorized (default false) — true when the host has already decided this user may manage the file, and scope is only who they are. MediaBrowser passes it for files inside its folder scope, as it does for rotating and deleting them.
  • :on_close — a Phoenix.LiveView.JS run by the close button. Without it there is no close button.

Keeping it current

Saving queues the rendering; the editor shows the progress until the file is processed. The host forwards the storage file events (see PhoenixKit.Modules.Storage.subscribe_to_file_events/0):

send_update(PhoenixKitWeb.Components.ImageEditor,
  id: editor_id,
  file_processed: file_uuid
)