Fix ImageEditor Cropping - Cropping now crops the background image in…

…stead of the image + canvas (#10416) * fix crop * add changeset * add changeset --------- Co-authored-by: gradio-pr-bot <[email protected]>
gradio-app · Jan 24, 2025 · 3c2e12b · 3c2e12b
1 parent efd358a
commit 3c2e12b
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 24 deletions.
diff --git a/.changeset/open-teeth-give.md b/.changeset/open-teeth-give.md
@@ -0,0 +1,6 @@
+---
+"@gradio/imageeditor": patch
+"gradio": patch
+---
+
+feat:Fix ImageEditor Cropping - Cropping now crops the background image instead of the image + canvas
diff --git a/js/imageeditor/shared/ImageEditor.svelte b/js/imageeditor/shared/ImageEditor.svelte
@@ -103,7 +103,7 @@
 	export let canvas_height = undefined;
 
 	$: height = $editor_box.child_height;
-	$: canvas_height = $crop[3] * $editor_box.child_height + 1;
+	$: canvas_height = $editor_box.child_height + 1;
 
 	const crop = writable<[number, number, number, number]>([0, 0, 1, 1]);
 	const position_spring = spring(
@@ -250,10 +250,10 @@
 		if (!$editor_box) return;
 		const [l, t, w, h] = $crop;
 
-		const cx = l * $editor_box.child_width;
-		const cy = t * $editor_box.child_height;
-		const cw = w * $editor_box.child_width;
-		const ch = h * $editor_box.child_height;
+		const cx = 0;
+		const cy = 0;
+		const cw = $editor_box.child_width;
+		const ch = $editor_box.child_height;
 
 		const x = 0.5 * $editor_box.child_width - cx - cw / 2;
 		const y = 0.5 * $editor_box.child_height - cy - ch / 2;
@@ -269,10 +269,10 @@
 		return $pixi?.get_blobs(
 			$pixi.get_layers(),
 			new Rectangle(
-				Math.round(l * $dimensions[0]),
-				Math.round(t * $dimensions[1]),
-				Math.round(w * $dimensions[0]),
-				Math.round(h * $dimensions[1])
+				Math.round(0),
+				Math.round(0),
+				Math.round(1 * $dimensions[0]),
+				Math.round(1 * $dimensions[1])
 			),
 			$dimensions
 		);
@@ -381,14 +381,10 @@
 		<div
 			class="canvas"
 			class:no-border={!bg && $active_tool === "bg" && !history}
-			style:width="{$crop[2] * $editor_box.child_width + 1}px"
-			style:height="{$crop[3] * $editor_box.child_height + 1}px"
-			style:top="{$crop[1] * $editor_box.child_height +
-				($editor_box.child_top - $editor_box.parent_top) -
-				0.5}px"
-			style:left="{$crop[0] * $editor_box.child_width +
-				($editor_box.child_left - $editor_box.parent_left) -
-				0.5}px"
+			style:width="{$editor_box.child_width + 1}px"
+			style:height="{$editor_box.child_height + 1}px"
+			style:top="{$editor_box.child_top - $editor_box.parent_top - 0.5}px"
+			style:left="{$editor_box.child_left - $editor_box.parent_left - 0.5}px"
 		></div>
 	</div>
 </div>

diff --git a/js/imageeditor/shared/tools/Crop.svelte b/js/imageeditor/shared/tools/Crop.svelte
@@ -67,7 +67,7 @@
 		l_p = x_offset / $editor_box.child_width;
 		t_p = y_offset / $editor_box.child_height;
 
-		c = crop_canvas($pixi!.renderer, $pixi!.mask_container, crop, 0.2);
+		c = crop_canvas($pixi!.renderer, $pixi!.background_container, crop, 0.2);
 		c.start(...$dimensions, current_crop, false);
 
 		c.continue(
@@ -111,7 +111,7 @@
 
 			cropper = crop_canvas(
 				$pixi?.renderer,
-				$pixi.mask_container,
+				$pixi.background_container,
 				crop,
 				current_opacity
 			);

diff --git a/js/imageeditor/shared/tools/crop.ts b/js/imageeditor/shared/tools/crop.ts
@@ -26,7 +26,7 @@ export interface CropCommand extends Command {
 
 export function crop_canvas(
 	renderer: IRenderer,
-	mask_container: Container,
+	background_container: Container,
 	crop: Writable<[number, number, number, number]>,
 	current_opacity = 0
 ): CropCommand {
@@ -89,7 +89,7 @@ export function crop_canvas(
 
 			crop_mask(_width, _height, _previous_crop, _preview);
 			sprite = new Sprite(text);
-			mask_container.mask = sprite;
+			background_container.mask = sprite;
 			width = _width;
 			height = _height;
 			if (set_previous)
@@ -131,16 +131,14 @@ export function crop_canvas(
 				clean = true;
 			} else {
 				if (!stopped) {
-					alpha_spring.set(0);
+					alpha_spring.set(0, { hard: true });
 				}
-
 				crop.set([
 					final_crop[0] / width,
 					final_crop[1] / height,
 					final_crop[2] / width,
 					final_crop[3] / height
 				]);
-
 				clean = true;
 			}
 		}