Handle image cropping

package.json

@@ -38,6 +38,7 @@
   "dependencies": {
     "@zip.js/zip.js": "^2.7.20",
     "dexie": "^4.0.1-alpha.25",
-    "panzoom": "^9.4.3"
+    "panzoom": "^9.4.3",
+    "svelte-easy-crop": "^2.0.1"
   }
 }

src/lib/anki-connect/cropper.ts

@@ -0,0 +1,78 @@
+import { showSnackbar } from '$lib/util';
+import { writable } from 'svelte/store';
+import { blobToBase64 } from '.';
+
+type CropperModal = {
+  open: boolean;
+  image?: string;
+  sentence?: string;
+};
+
+export const cropperStore = writable<CropperModal | undefined>(undefined);
+
+export function showCropper(image: string, sentence: string) {
+  cropperStore.set({
+    open: true,
+    image,
+    sentence
+  });
+}
+
+async function createImage(url: string) {
+  return new Promise<HTMLImageElement>((resolve, reject) => {
+    const image = new Image();
+    image.addEventListener('load', () => resolve(image));
+    image.addEventListener('error', (error) => reject(error));
+    image.setAttribute('crossOrigin', 'anonymous'); // needed to avoid cross-origin issues on CodeSandbox
+    image.src = url;
+  });
+}
+
+function getRadianAngle(degreeValue: number) {
+  return (degreeValue * Math.PI) / 180;
+}
+
+export type Pixels = { width: number; height: number; x: number; y: number }
+
+export async function getCroppedImg(imageSrc: string, pixelCrop: Pixels, rotation = 0) {
+  const image = await createImage(imageSrc);
+  const canvas = new OffscreenCanvas(image.width, image.height);
+  const ctx = canvas.getContext('2d');
+
+  if (!ctx) {
+    showSnackbar('Error: crop failed')
+    return;
+  }
+
+  const maxSize = Math.max(image.width, image.height);
+  const safeArea = 2 * ((maxSize / 2) * Math.sqrt(2));
+
+  // set each dimensions to double largest dimension to allow for a safe area for the
+  // image to rotate in without being clipped by canvas context
+  canvas.width = safeArea;
+  canvas.height = safeArea;
+
+  // translate canvas context to a central location on image to allow rotating around the center.
+  ctx.translate(safeArea / 2, safeArea / 2);
+  ctx.rotate(getRadianAngle(rotation));
+  ctx.translate(-safeArea / 2, -safeArea / 2);
+
+  // draw rotated image and store data.
+  ctx.drawImage(image, safeArea / 2 - image.width * 0.5, safeArea / 2 - image.height * 0.5);
+  const data = ctx.getImageData(0, 0, safeArea, safeArea);
+
+  // set canvas width to final desired crop size - this will clear existing context
+  canvas.width = pixelCrop.width;
+  canvas.height = pixelCrop.height;
+
+  // paste generated rotate image with correct offsets for x,y crop values.
+  ctx.putImageData(
+    data,
+    Math.round(0 - safeArea / 2 + image.width * 0.5 - pixelCrop.x),
+    Math.round(0 - safeArea / 2 + image.height * 0.5 - pixelCrop.y)
+  );
+
+  const blob = await canvas.convertToBlob({ type: 'image/webp' });
+
+  return await blobToBase64(blob)
+}

src/lib/anki-connect/index.ts

@@ -2,9 +2,9 @@ import { settings } from "$lib/settings";
 import { showSnackbar } from "$lib/util"
 import { get } from "svelte/store";
 
+export * from './cropper'
+
 export async function ankiConnect(action: string, params: Record<string, any>) {
-
-
   try {
     const res = await fetch('http://127.0.0.1:8765', {
       method: 'POST',
@@ -42,7 +42,7 @@ export function getCardAgeInMin(id: number) {
   return Math.floor((Date.now() - id) / 60000);
 }
 
-async function blobToBase64(blob: Blob) {
+export async function blobToBase64(blob: Blob) {
   return new Promise<string | null>((resolve) => {
     const reader = new FileReader();
     reader.onloadend = () => resolve(reader.result as string);
@@ -64,11 +64,10 @@ export async function imageToWebp(source: File) {
   }
 }
 
-export async function updateLastCard(image: File, sentence: string) {
+export async function updateLastCard(imageData: string | null | undefined, sentence: string) {
   const {
     overwriteImage,
     enabled,
-    cropImage,
     grabSentence,
     pictureField,
     sentenceField
@@ -97,21 +96,14 @@ export async function updateLastCard(image: File, sentence: string) {
     fields[pictureField] = ''
   }
 
-  if (cropImage) {
+  if (imageData) {
-    console.log('image cropping here');
-  }
-
-  const picture = await imageToWebp(image)
-
-
-  if (picture) {
     ankiConnect('updateNoteFields', {
       note: {
         id,
         fields,
         picture: {
           filename: `_${id}.webp`,
-          data: picture.split(';base64,')[1],
+          data: imageData.split(';base64,')[1],
           fields: [pictureField],
         },
       },

src/lib/components/ConfirmationPopup.svelte

@@ -8,7 +8,9 @@
 
   onMount(() => {
     confirmationPopupStore.subscribe((value) => {
-      open = Boolean(value);
+      if (value) {
+        open = value.open;
+      }
     });
   });
 </script>

src/lib/components/Reader/Cropper.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { afterNavigate } from '$app/navigation';
+  import { cropperStore, getCroppedImg, updateLastCard, type Pixels } from '$lib/anki-connect';
+  import { Button, Modal, Spinner } from 'flowbite-svelte';
+  import { onMount } from 'svelte';
+  import Cropper from 'svelte-easy-crop';
+
+  let open = false;
+  let pixels: Pixels;
+  let loading = false;
+
+  afterNavigate(() => {
+    close();
+  });
+
+  onMount(() => {
+    cropperStore.subscribe((value) => {
+      if (value) {
+        open = value.open;
+      }
+    });
+  });
+
+  function close() {
+    loading = false;
+    cropperStore.set({ open: false });
+  }
+
+  async function onCrop() {
+    if ($cropperStore?.image && $cropperStore?.sentence && pixels) {
+      loading = true;
+      const imageData = await getCroppedImg($cropperStore.image, pixels);
+      updateLastCard(imageData, $cropperStore.sentence);
+      close();
+    }
+  }
+
+  function onCropComplete(e: any) {
+    pixels = e.detail.pixels;
+  }
+</script>
+
+<Modal title="Crop image" bind:open on:{close}>
+  {#if $cropperStore?.image && !loading}
+    <div class=" flex flex-col gap-2">
+      <div class="relative w-full h-[55svh] sm:h-[70svh]">
+        <Cropper
+          zoomSpeed={0.5}
+          maxZoom={10}
+          image={$cropperStore?.image}
+          on:cropcomplete={onCropComplete}
+        />
+      </div>
+      <Button on:click={onCrop}>Crop</Button>
+      <Button on:click={close} outline color="light">Close</Button>
+    </div>
+  {:else}
+    <div class="text-center"><Spinner /></div>
+  {/if}
+</Modal>

src/lib/components/Reader/Reader.svelte

@@ -7,6 +7,7 @@
   import MangaPage from './MangaPage.svelte';
   import { ChervonDoubleLeftSolid, ChervonDoubleRightSolid } from 'flowbite-svelte-icons';
   import { afterUpdate } from 'svelte';
+  import Cropper from './Cropper.svelte';
 
   const volume = $currentVolume;
   const pages = volume?.mokuroData.pages;
@@ -94,6 +95,7 @@
 
 <svelte:window on:resize={zoomDefault} />
 {#if volume && pages}
+  <Cropper />
   <Popover placement="bottom-end" trigger="click" triggeredBy="#page-num" class="z-20">
     <div class="flex flex-col gap-3">
       <div class="flex flex-row items-center gap-5 z-10">

src/lib/components/Reader/TextBoxes.svelte

@@ -2,7 +2,7 @@
   import { clamp, promptConfirmation } from '$lib/util';
   import type { Page } from '$lib/types';
   import { settings } from '$lib/settings';
-  import { updateLastCard } from '$lib/anki-connect';
+  import { imageToWebp, showCropper, updateLastCard } from '$lib/anki-connect';
 
   export let page: Page;
   export let src: File;
@@ -41,9 +41,15 @@
 
   async function onUpdateCard(lines: string[]) {
     if ($settings.ankiConnectSettings.enabled) {
-      promptConfirmation('Add image to last created anki card?', () =>
+      const sentence = lines.join(' ');
-        updateLastCard(src, lines.join(' '))
+      if ($settings.ankiConnectSettings.cropImage) {
-      );
+        showCropper(URL.createObjectURL(src), sentence);
+      } else {
+        promptConfirmation('Add image to last created anki card?', async () => {
+          const imageData = await imageToWebp(src);
+          updateLastCard(imageData, sentence);
+        });
+      }
     }
   }
 </script>
@@ -78,14 +84,12 @@
     font-size: 16pt;
     white-space: nowrap;
     border: 1px solid rgba(0, 0, 0, 0);
-    z-index: 1000;
   }
 
   .text-box:focus,
   .text-box:hover {
     background: rgb(255, 255, 255);
     border: 1px solid rgba(0, 0, 0, 0);
-    z-index: 999 !important;
   }
 
   .text-box p {