From 1300772f3663693b2c5fed3a7b3061b8857ac493 Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Mon, 13 Nov 2023 18:43:18 +0800
Subject: [PATCH 01/32] add canvas scan function

---
 src/utils/canvas-scan/index.ts  |  2 ++
 src/utils/canvas-scan/noise.svg | 17 +++++++++
 src/utils/canvas-scan/scan.ts   | 61 +++++++++++++++++++++++++++++++++
 src/utils/canvas-scan/types.ts  | 23 +++++++++++++
 4 files changed, 103 insertions(+)
 create mode 100644 src/utils/canvas-scan/index.ts
 create mode 100644 src/utils/canvas-scan/noise.svg
 create mode 100644 src/utils/canvas-scan/scan.ts
 create mode 100644 src/utils/canvas-scan/types.ts

diff --git a/src/utils/canvas-scan/index.ts b/src/utils/canvas-scan/index.ts
new file mode 100644
index 00000000..11de0943
--- /dev/null
+++ b/src/utils/canvas-scan/index.ts
@@ -0,0 +1,2 @@
+export { type ScanConfig, defaultConfig, colorspaces } from "./types";
+export { scanCanvas } from "./scan";
diff --git a/src/utils/canvas-scan/noise.svg b/src/utils/canvas-scan/noise.svg
new file mode 100644
index 00000000..872af524
--- /dev/null
+++ b/src/utils/canvas-scan/noise.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 700 700" width="700" height="700">
+    <defs>
+        <filter id="nnnoise-filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox"
+            primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
+            <feTurbulence type="fractalNoise" baseFrequency="0.102" numOctaves="4" seed="15" stitchTiles="stitch" x="0%"
+                y="0%" width="100%" height="100%" result="turbulence"></feTurbulence>
+            <feSpecularLighting surfaceScale="15" specularConstant="0.75" specularExponent="20" lighting-color="#000000"
+                x="0%" y="0%" width="100%" height="100%" in="turbulence" result="specularLighting">
+                <feDistantLight azimuth="3" elevation="100"></feDistantLight>
+            </feSpecularLighting>
+
+        </filter>
+    </defs>
+    <rect width="700" height="700" fill="transparent"></rect>
+    <rect width="700" height="700" fill="#000000" filter="url(#nnnoise-filter)"></rect>
+</svg>
\ No newline at end of file
diff --git a/src/utils/canvas-scan/scan.ts b/src/utils/canvas-scan/scan.ts
new file mode 100644
index 00000000..d726b66f
--- /dev/null
+++ b/src/utils/canvas-scan/scan.ts
@@ -0,0 +1,61 @@
+import type { ScanConfig } from "./types";
+import noiseSVG from "./noise.svg?url";
+
+export async function scanCanvas(
+  canvas: HTMLCanvasElement,
+  page: Blob,
+  config: ScanConfig
+): Promise<void> {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("Canvas not supported");
+  }
+
+  // load blob into image
+  const img = new Image();
+  img.src = URL.createObjectURL(page);
+  await new Promise((resolve, reject) => {
+    img.onload = resolve;
+    img.onerror = reject;
+  });
+  canvas.width = img.width;
+  canvas.height = img.height;
+
+  // fill white
+  ctx.fillStyle = "white";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+  // add blur
+  ctx.filter = `blur(${config.blur}px)`;
+  if (config.colorspace === "gray") {
+    ctx.filter += " grayscale(1)";
+  }
+
+  // rotate
+  ctx.translate(canvas.width / 2, canvas.height / 2);
+  ctx.rotate(
+    ((config.rotate + config.rotate_var * Math.random()) * Math.PI) / 180
+  );
+  ctx.translate(-canvas.width / 2, -canvas.height / 2);
+
+  ctx.drawImage(img, 0, 0);
+
+  const noiseImg = new Image();
+  noiseImg.src = noiseSVG;
+  await new Promise((resolve) => (noiseImg.onload = resolve));
+
+  // add noise
+  ctx.drawImage(
+    noiseImg,
+    -canvas.width,
+    -canvas.height,
+    canvas.width * 2,
+    canvas.height * 2
+  );
+
+  if (config.border) {
+    ctx.strokeStyle = "black";
+    ctx.lineWidth = 1;
+    ctx.strokeRect(0, 0, canvas.width, canvas.height);
+  }
+}
diff --git a/src/utils/canvas-scan/types.ts b/src/utils/canvas-scan/types.ts
new file mode 100644
index 00000000..cdf97f64
--- /dev/null
+++ b/src/utils/canvas-scan/types.ts
@@ -0,0 +1,23 @@
+export const colorspaces = ["gray", "sRGB"] as const;
+
+export interface ScanConfig {
+  rotate: number;
+  rotate_var: number;
+  colorspace: typeof colorspaces[number];
+  blur: number;
+  noise: number;
+  border: boolean;
+  scale: number;
+  output_format: "image/png" | "image/jpeg";
+}
+
+export const defaultConfig: ScanConfig = {
+  rotate: 1,
+  rotate_var: 0.5,
+  colorspace: "gray",
+  blur: 0.5,
+  noise: 0.25,
+  border: false,
+  scale: 2,
+  output_format: "image/jpeg",
+};

From 6af1580f73135ed66d0314e4abbac0171f80a194 Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Mon, 13 Nov 2023 18:44:42 +0800
Subject: [PATCH 02/32] add canvas scan

---
 src/router/index.ts          |  5 +++
 src/views/CanvasScanView.vue | 84 ++++++++++++++++++++++++++++++++++++
 2 files changed, 89 insertions(+)
 create mode 100644 src/views/CanvasScanView.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index cb03cf86..a1d05ef9 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -14,6 +14,11 @@ const router = createRouter({
       name: "scan",
       component: () => import("@/views/ScanView.vue"),
     },
+    {
+      path: "/canvas-scan",
+      name: "canvas-scan",
+      component: () => import("@/views/CanvasScanView.vue"),
+    },
     // catch all redirect to /
     {
       path: "/:pathMatch(.*)*",
diff --git a/src/views/CanvasScanView.vue b/src/views/CanvasScanView.vue
new file mode 100644
index 00000000..ab77fbbc
--- /dev/null
+++ b/src/views/CanvasScanView.vue
@@ -0,0 +1,84 @@
+<template>
+  <MainContainer>
+    <div style="margin-bottom: 25px">
+      <BackToIndex />
+    </div>
+    <n-grid
+      x-gap="25"
+      y-gap="25"
+      :cols="12"
+      item-responsive
+      responsive="screen"
+    >
+      <n-grid-item span="12 s:5 m:4 l:3">
+        <ScanSettingsCard
+          @update:pdfInfo="(info) => (pdfInfo = info)"
+          @update:page="(page) => (previewPage = page)"
+          @action:preview="preview"
+          v-model:config="config"
+          :pdfInstance="pdfInstance"
+          :scanInstance="scanInstance"
+        />
+      </n-grid-item>
+      <n-grid-item span="12 s:7 m:8 l:9">
+        <SideBySidePreview
+          :page="previewPage"
+          :pdfInstance="pdfInstance"
+          :scanInstance="scanInstance"
+        />
+      </n-grid-item>
+    </n-grid>
+  </MainContainer>
+</template>
+
+<script lang="ts" setup>
+import { NGrid, NGridItem } from "naive-ui";
+import MainContainer from "@/components/MainContainer.vue";
+import type { ScanConfig } from "@/utils/scan";
+import { defaultConfig } from "@/utils/scan";
+import SideBySidePreview from "@/components/preview/SideBySidePreview.vue";
+import ScanSettingsCard from "@/components/ScanSettings/ScanSettingsCard.vue";
+import { ref, computed } from "vue";
+import PDFURL from "@/assets/examples/pdfs/test.pdf";
+import { PDF } from "@/utils/pdf";
+import { Scan } from "@/utils/scan";
+import type { PDFInfoType } from "@/utils/pdf";
+import BackToIndex from "@/components/buttons/BackToIndex.vue";
+import { useHead } from "@vueuse/head";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+useHead({
+  title: t("base.scanTitle") + " - " + t("base.title"),
+  meta: [{ name: "description", content: t("base.description") }],
+});
+
+const pdfInfo = ref({
+  source: PDFURL,
+  filename: "test.pdf",
+} as PDFInfoType);
+
+const config = ref(defaultConfig);
+const previewConfig = ref(
+  JSON.parse(JSON.stringify(config.value)) as ScanConfig
+);
+const previewPage = ref(1);
+const pdfInstance = computed(() => {
+  return new PDF(pdfInfo.value, previewConfig.value.scale);
+});
+
+let controller = new AbortController();
+
+const scanInstance = computed(() => {
+  controller.abort();
+  controller = new AbortController();
+  const signal = controller.signal;
+
+  return new Scan(pdfInstance.value, previewConfig.value, signal);
+});
+
+function preview() {
+  // Otherwise the previewConfig and config will be the same Object
+  previewConfig.value = JSON.parse(JSON.stringify(config.value)) as ScanConfig;
+}
+</script>

From bbf812fb3f7e03c6f95eae84f94fe820a3bb933e Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Mon, 13 Nov 2023 19:03:41 +0800
Subject: [PATCH 03/32] canvas scan settings

---
 .../canvas-scan-settings/ScanSettingsCard.vue | 62 ++++++++++++++++++
 .../settings/BlurSetting.vue                  | 38 +++++++++++
 .../settings/BorderSetting.vue                | 40 ++++++++++++
 .../settings/ColorspaceSetting.vue            | 65 +++++++++++++++++++
 .../settings/NoiseSetting.vue                 | 60 +++++++++++++++++
 .../settings/RotateSetting.vue                | 44 +++++++++++++
 .../settings/RotateVarianceSetting.vue        | 62 ++++++++++++++++++
 .../settings/ScaleSetting.vue                 | 38 +++++++++++
 .../settings/dark-noise.svg                   |  1 +
 .../canvas-scan-settings/settings/noise.svg   |  1 +
 10 files changed, 411 insertions(+)
 create mode 100644 src/components/canvas-scan/canvas-scan-settings/ScanSettingsCard.vue
 create mode 100644 src/components/canvas-scan/canvas-scan-settings/settings/BlurSetting.vue
 create mode 100644 src/components/canvas-scan/canvas-scan-settings/settings/BorderSetting.vue
 create mode 100644 src/components/canvas-scan/canvas-scan-settings/settings/ColorspaceSetting.vue
 create mode 100644 src/components/canvas-scan/canvas-scan-settings/settings/NoiseSetting.vue
 create mode 100644 src/components/canvas-scan/canvas-scan-settings/settings/RotateSetting.vue
 create mode 100644 src/components/canvas-scan/canvas-scan-settings/settings/RotateVarianceSetting.vue
 create mode 100644 src/components/canvas-scan/canvas-scan-settings/settings/ScaleSetting.vue
 create mode 100644 src/components/canvas-scan/canvas-scan-settings/settings/dark-noise.svg
 create mode 100644 src/components/canvas-scan/canvas-scan-settings/settings/noise.svg

diff --git a/src/components/canvas-scan/canvas-scan-settings/ScanSettingsCard.vue b/src/components/canvas-scan/canvas-scan-settings/ScanSettingsCard.vue
new file mode 100644
index 00000000..76cef796
--- /dev/null
+++ b/src/components/canvas-scan/canvas-scan-settings/ScanSettingsCard.vue
@@ -0,0 +1,62 @@
+<template>
+  <n-card
+    :segmented="{
+      content: true,
+      footer: 'soft',
+    }"
+  >
+    <n-collapse :default-expanded-names="['Settings']">
+      <template #header-extra>
+        <n-icon><ChevronDown12Regular /></n-icon>
+      </template>
+      <template #arrow>
+        <n-icon style="margin-right: 2px">
+          <AreaCustom />
+        </n-icon>
+      </template>
+      <n-collapse-item :title="t('settings.settings')" name="Settings">
+        <!-- Scan Settings -->
+        <n-space :size="40" style="margin-bottom: 10px">
+          <ColorspaceSetting v-model:colorspace="config.colorspace" />
+          <BorderSetting v-model:border="config.border" />
+        </n-space>
+
+        <RotateSetting v-model:rotate="config.rotate" />
+        <RotateVarianceSetting v-model:rotate_var="config.rotate_var" />
+        <BlurSetting v-model:blur="config.blur" />
+        <NoiseSetting v-model:noise="config.noise" />
+        <ScaleSetting v-model:scale="config.scale" />
+      </n-collapse-item>
+    </n-collapse>
+  </n-card>
+</template>
+
+<script lang="ts" setup>
+import { NCard, NSpace, NCollapse, NCollapseItem, NIcon } from "naive-ui";
+import { AreaCustom } from "@vicons/carbon";
+import { ChevronDown12Regular } from "@vicons/fluent";
+
+import BorderSetting from "./settings/BorderSetting.vue";
+import RotateSetting from "./settings/RotateSetting.vue";
+import RotateVarianceSetting from "./settings/RotateVarianceSetting.vue";
+import ColorspaceSetting from "./settings/ColorspaceSetting.vue";
+import BlurSetting from "./settings/BlurSetting.vue";
+import NoiseSetting from "./settings/NoiseSetting.vue";
+import ScaleSetting from "./settings/ScaleSetting.vue";
+
+import type { ScanConfig } from "@/utils/canvas-scan";
+import { useI18n } from "vue-i18n";
+import { useVModel } from "@vueuse/core";
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  config: ScanConfig;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:config", config: ScanConfig): void;
+}>();
+
+const config = useVModel(props, "config", emit);
+</script>
diff --git a/src/components/canvas-scan/canvas-scan-settings/settings/BlurSetting.vue b/src/components/canvas-scan/canvas-scan-settings/settings/BlurSetting.vue
new file mode 100644
index 00000000..6103635f
--- /dev/null
+++ b/src/components/canvas-scan/canvas-scan-settings/settings/BlurSetting.vue
@@ -0,0 +1,38 @@
+<template>
+  <n-form-item :label="t('settings.blur')" :show-feedback="false">
+    <template #label>
+      <span :style="style">
+        {{ t("settings.blur") }}
+      </span>
+    </template>
+    <n-slider v-model:value="blur_computed" :max="1" :min="0" :step="0.01" />
+  </n-form-item>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import { NFormItem, NSlider } from "naive-ui";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+type blurType = number;
+
+const props = defineProps<{
+  blur: blurType;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:blur", value: blurType): void;
+}>();
+
+const blur_computed = computed({
+  get: () => props.blur,
+  set: (value) => emit("update:blur", value),
+});
+
+const style = computed(() => {
+  return {
+    filter: `blur(${blur_computed.value}px)`,
+  };
+});
+</script>
diff --git a/src/components/canvas-scan/canvas-scan-settings/settings/BorderSetting.vue b/src/components/canvas-scan/canvas-scan-settings/settings/BorderSetting.vue
new file mode 100644
index 00000000..8e999b36
--- /dev/null
+++ b/src/components/canvas-scan/canvas-scan-settings/settings/BorderSetting.vue
@@ -0,0 +1,40 @@
+<template>
+  <n-form-item :show-feedback="false">
+    <template #label>
+      <span :style="style">{{ t("settings.border.label") }}</span>
+    </template>
+    <NSwitch v-model:value="borderSwitch"></NSwitch>
+  </n-form-item>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import { NFormItem, NSwitch } from "naive-ui";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+type borderType = boolean;
+
+const props = defineProps<{
+  border: borderType;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:border", value: borderType): void;
+}>();
+
+const borderSwitch = computed({
+  get: () => props.border == true,
+  set: (border) => emit("update:border", border ? true : false),
+});
+
+const style = computed(() => {
+  if (borderSwitch.value) {
+    return {
+      outline: "1px solid var(--n-label-text-color)",
+    };
+  } else {
+    return {};
+  }
+});
+</script>
diff --git a/src/components/canvas-scan/canvas-scan-settings/settings/ColorspaceSetting.vue b/src/components/canvas-scan/canvas-scan-settings/settings/ColorspaceSetting.vue
new file mode 100644
index 00000000..5dfe4db6
--- /dev/null
+++ b/src/components/canvas-scan/canvas-scan-settings/settings/ColorspaceSetting.vue
@@ -0,0 +1,65 @@
+<template>
+  <n-form-item :label="t('settings.colorspace.label')" :show-feedback="false">
+    <template #label>
+      <n-gradient-text :gradient="linearGradient" v-show="colorspaceSwitch">
+        {{ t("settings.colorspace.label") }}
+      </n-gradient-text>
+      <n-text v-show="!colorspaceSwitch">{{
+        t("settings.colorspace.label")
+      }}</n-text>
+    </template>
+    <NSwitch v-model:value="colorspaceSwitch" :rail-style="railStyle">
+      <template #checked>{{ t("settings.colorspace.colorful") }}</template>
+      <template #unchecked>{{ t("settings.colorspace.grayscale") }}</template>
+    </NSwitch>
+  </n-form-item>
+</template>
+
+<script lang="ts" setup>
+import { type CSSProperties, computed } from "vue";
+import { NFormItem, NSwitch, NGradientText, NText } from "naive-ui";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+type colorspaceType = "sRGB" | "gray";
+
+const props = defineProps<{
+  colorspace: colorspaceType;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:colorspace", value: colorspaceType): void;
+}>();
+
+const colorspaceSwitch = computed({
+  get: () => props.colorspace !== "gray",
+  set: (colorspace) => emit("update:colorspace", colorspace ? "sRGB" : "gray"),
+});
+
+const linearGradient =
+  "linear-gradient(to right top, #845ec2, #a55dbd, #c15db5, #d95fab, #ec64a0, #f76e91, #fd7b84, #ff8a7a, #ffa26e, #ffbd66, #ffda65, #f9f871)";
+
+const railStyle = ({
+  focused,
+  checked,
+}: {
+  focused: boolean;
+  checked: boolean;
+}) => {
+  const style: CSSProperties = {};
+  if (checked) {
+    // If colorspace is colorful, the rail is colored.
+    // get random color from array
+    style.background = linearGradient;
+    if (focused) {
+      style.boxShadow = "0 0 0 2px #FF6F9140";
+    }
+  } else {
+    style.background = "#000000";
+    if (focused) {
+      style.boxShadow = "0 0 0 2px #00000040";
+    }
+  }
+  return style;
+};
+</script>
diff --git a/src/components/canvas-scan/canvas-scan-settings/settings/NoiseSetting.vue b/src/components/canvas-scan/canvas-scan-settings/settings/NoiseSetting.vue
new file mode 100644
index 00000000..b72f025c
--- /dev/null
+++ b/src/components/canvas-scan/canvas-scan-settings/settings/NoiseSetting.vue
@@ -0,0 +1,60 @@
+<template>
+  <n-form-item :show-feedback="false">
+    <template #label>
+      <span :style="style" class="noise">
+        {{ t("settings.noise") }}
+      </span>
+    </template>
+    <n-slider v-model:value="noise_computed" :max="1" :min="0" :step="0.01" />
+  </n-form-item>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import { NFormItem, NSlider } from "naive-ui";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+type noiseType = number;
+
+const props = defineProps<{
+  noise: noiseType;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:noise", value: noiseType): void;
+}>();
+
+const noise_computed = computed({
+  get: () => props.noise,
+  set: (value) => emit("update:noise", value),
+});
+
+const style = computed(() => {
+  return {
+    "--noise-opacity": noise_computed.value,
+  };
+});
+</script>
+
+<style scoped>
+.noise {
+  position: relative;
+  z-index: 1;
+  overflow: hidden; /*if you want to crop the image*/
+}
+.noise:before {
+  z-index: -1;
+  position: absolute;
+  left: 0;
+  top: 0;
+  content: url("./noise.svg");
+  opacity: var(--noise-opacity);
+}
+
+@media (prefers-color-scheme: dark) {
+  .noise:before {
+    content: url("./dark-noise.svg");
+  }
+}
+</style>
diff --git a/src/components/canvas-scan/canvas-scan-settings/settings/RotateSetting.vue b/src/components/canvas-scan/canvas-scan-settings/settings/RotateSetting.vue
new file mode 100644
index 00000000..3c40e5ed
--- /dev/null
+++ b/src/components/canvas-scan/canvas-scan-settings/settings/RotateSetting.vue
@@ -0,0 +1,44 @@
+<template>
+  <n-form-item :show-feedback="false">
+    <template #label>
+      <span :style="style">{{ t("settings.rotate") }}</span>
+    </template>
+    <n-slider
+      v-model:value="rotate_computed"
+      :max="10"
+      :min="-10"
+      :step="0.1"
+      :format-tooltip="formatTooltip"
+    />
+  </n-form-item>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import { NFormItem, NSlider } from "naive-ui";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+type rotateType = number;
+
+const props = defineProps<{
+  rotate: rotateType;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:rotate", value: rotateType): void;
+}>();
+
+const rotate_computed = computed({
+  get: () => props.rotate,
+  set: (value) => emit("update:rotate", value),
+});
+
+const formatTooltip = (value: number) => `${value}°`;
+
+const style = computed(() => {
+  return {
+    transform: `rotate(${rotate_computed.value}deg)`,
+  };
+});
+</script>
diff --git a/src/components/canvas-scan/canvas-scan-settings/settings/RotateVarianceSetting.vue b/src/components/canvas-scan/canvas-scan-settings/settings/RotateVarianceSetting.vue
new file mode 100644
index 00000000..4fa548ca
--- /dev/null
+++ b/src/components/canvas-scan/canvas-scan-settings/settings/RotateVarianceSetting.vue
@@ -0,0 +1,62 @@
+<template>
+  <n-form-item :show-feedback="false">
+    <template #label>
+      <span
+        v-for="(character, i) in characters"
+        :key="i"
+        :style="characterStyle[i]"
+      >
+        {{ character }}
+      </span>
+    </template>
+    <n-slider
+      v-model:value="rotate_var_computed"
+      :max="10"
+      :min="0"
+      :step="0.1"
+      :format-tooltip="formatTooltip"
+    />
+  </n-form-item>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import { NFormItem, NSlider } from "naive-ui";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+type rotate_varType = number;
+
+const props = defineProps<{
+  rotate_var: rotate_varType;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:rotate_var", value: rotate_varType): void;
+}>();
+
+const rotate_var_computed = computed({
+  get: () => props.rotate_var,
+  set: (value) => emit("update:rotate_var", value),
+});
+
+const formatTooltip = (value: number) => `±${value}°`;
+
+const label = t("settings.rotateVariance");
+// split label into characters
+const characters = label.split("");
+const amplifier = 2;
+const degrees = computed(() => {
+  return characters.map(() => {
+    return (Math.random() * 2 - 1) * rotate_var_computed.value * amplifier;
+  });
+});
+
+const characterStyle = computed(() => {
+  return degrees.value.map((degree) => {
+    return {
+      transform: `rotate(${degree}deg)`,
+    };
+  });
+});
+</script>
diff --git a/src/components/canvas-scan/canvas-scan-settings/settings/ScaleSetting.vue b/src/components/canvas-scan/canvas-scan-settings/settings/ScaleSetting.vue
new file mode 100644
index 00000000..c2a9cfbf
--- /dev/null
+++ b/src/components/canvas-scan/canvas-scan-settings/settings/ScaleSetting.vue
@@ -0,0 +1,38 @@
+<template>
+  <n-form-item :show-feedback="false">
+    <template #label>
+      <span>{{ t("settings.scale") }}</span>
+    </template>
+    <n-slider
+      v-model:value="scale"
+      :max="3"
+      :min="1"
+      :step="0.5"
+      :format-tooltip="formatTooltip"
+    />
+  </n-form-item>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import { NFormItem, NSlider } from "naive-ui";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+type scaleType = number;
+
+const props = defineProps<{
+  scale: scaleType;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:scale", value: scaleType): void;
+}>();
+
+const scale = computed({
+  get: () => props.scale,
+  set: (value) => emit("update:scale", value),
+});
+
+const formatTooltip = (value: number) => `${value}x`;
+</script>
diff --git a/src/components/canvas-scan/canvas-scan-settings/settings/dark-noise.svg b/src/components/canvas-scan/canvas-scan-settings/settings/dark-noise.svg
new file mode 100644
index 00000000..1336662b
--- /dev/null
+++ b/src/components/canvas-scan/canvas-scan-settings/settings/dark-noise.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><filter id="a" x="0" y="0"><feTurbulence type="fractalNoise" baseFrequency=".75" stitchTiles="stitch"/></filter><path fill="#101014" d="M0 0h300v300H0z"/><path filter="url(#a)" opacity=".8" d="M0 0h300v300H0z"/></svg>
\ No newline at end of file
diff --git a/src/components/canvas-scan/canvas-scan-settings/settings/noise.svg b/src/components/canvas-scan/canvas-scan-settings/settings/noise.svg
new file mode 100644
index 00000000..b27e76c1
--- /dev/null
+++ b/src/components/canvas-scan/canvas-scan-settings/settings/noise.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><filter id="a" x="0" y="0"><feTurbulence type="fractalNoise" baseFrequency=".75" stitchTiles="stitch"/></filter><path fill="#fff" d="M0 0h300v300H0z"/><path filter="url(#a)" opacity=".8" d="M0 0h300v300H0z"/></svg>
\ No newline at end of file

From 4ddde059d18e3cfc96b6c5d56c679da6fa7ccadd Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Mon, 13 Nov 2023 19:14:19 +0800
Subject: [PATCH 04/32] add PDF upload

---
 src/components/pdf-upload/PDFUpload.vue | 52 +++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 src/components/pdf-upload/PDFUpload.vue

diff --git a/src/components/pdf-upload/PDFUpload.vue b/src/components/pdf-upload/PDFUpload.vue
new file mode 100644
index 00000000..a25871fc
--- /dev/null
+++ b/src/components/pdf-upload/PDFUpload.vue
@@ -0,0 +1,52 @@
+<template>
+  <n-card
+    :segmented="{
+      content: true,
+      footer: 'soft',
+    }"
+  >
+    <n-button text @click="onClick">
+      <template #icon>
+        <n-icon>
+          <Attach16Regular />
+        </n-icon>
+      </template>
+      <n-text v-if="pdf">
+        <n-ellipsis style="max-width: 14em">{{ pdf.name }}</n-ellipsis>
+      </n-text>
+      <n-text v-else>
+        {{ t("settings.pdfSelectLabel") }}
+      </n-text>
+    </n-button>
+  </n-card>
+</template>
+
+<script lang="ts" setup>
+import { NButton, NIcon, NText, NEllipsis, NCard } from "naive-ui";
+import { Attach16Regular } from "@vicons/fluent";
+import { fileOpen } from "browser-fs-access";
+
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+import { useVModel } from "@vueuse/core";
+
+const props = defineProps<{
+  pdf: File | undefined;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:pdf", info: File | undefined): void;
+}>();
+
+const pdf = useVModel(props, "pdf", emit);
+
+async function onClick() {
+  const file = await fileOpen({
+    description: "PDF Files",
+    mimeTypes: ["application/pdf"],
+    extensions: [".pdf"],
+  });
+  pdf.value = file;
+}
+</script>

From 323a14c5bc16960485182010b380386fd0c1109f Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Mon, 13 Nov 2023 19:52:57 +0800
Subject: [PATCH 05/32] add pdf preview canvas

---
 .../preview/pdf-preview/PDFPreviewCanvas.vue  | 55 +++++++++++++++++++
 src/utils/pdf/draw-on-canvas.ts               | 32 +++++++++++
 2 files changed, 87 insertions(+)
 create mode 100644 src/components/canvas-scan/preview/pdf-preview/PDFPreviewCanvas.vue
 create mode 100644 src/utils/pdf/draw-on-canvas.ts

diff --git a/src/components/canvas-scan/preview/pdf-preview/PDFPreviewCanvas.vue b/src/components/canvas-scan/preview/pdf-preview/PDFPreviewCanvas.vue
new file mode 100644
index 00000000..d79bfd68
--- /dev/null
+++ b/src/components/canvas-scan/preview/pdf-preview/PDFPreviewCanvas.vue
@@ -0,0 +1,55 @@
+<template>
+  <canvas ref="canvas"></canvas>
+</template>
+
+<script lang="ts" setup>
+import { ref, toRef, watch } from "vue";
+import { computedAsync } from "@vueuse/core";
+import { standardFontDataFactory } from "@/utils/pdf/standardFontDataFactory";
+import { getDocument } from "@/utils/pdf/getDocument";
+import { drawOnCanvas } from "@/utils/pdf/draw-on-canvas";
+
+const canvas = ref<HTMLCanvasElement | null>(null);
+const controller = ref<AbortController>(new AbortController());
+
+const props = defineProps<{
+  pdf: Blob;
+  page: number;
+  scale: number;
+}>();
+
+const page = toRef(props, "page");
+const scale = toRef(props, "scale");
+
+const pdfDocument = computedAsync(async () => {
+  const array = new Uint8Array(await props.pdf.arrayBuffer());
+  const pdfDocument = await getDocument({
+    data: array,
+    StandardFontDataFactory: standardFontDataFactory,
+  }).promise;
+  return () => pdfDocument;
+});
+
+const draw = async () => {
+  if (!canvas.value) return;
+  if (!pdfDocument.value) return;
+
+  canvas.value.getContext("2d")?.reset();
+  controller.value.abort();
+  controller.value = new AbortController();
+
+  await drawOnCanvas(
+    canvas.value,
+    pdfDocument.value(),
+    props.page,
+    props.scale,
+    {
+      signal: controller.value.signal,
+    }
+  );
+};
+
+watch(page, draw);
+watch(scale, draw);
+watch(pdfDocument, draw);
+</script>
diff --git a/src/utils/pdf/draw-on-canvas.ts b/src/utils/pdf/draw-on-canvas.ts
new file mode 100644
index 00000000..711fa9da
--- /dev/null
+++ b/src/utils/pdf/draw-on-canvas.ts
@@ -0,0 +1,32 @@
+import type { PDFDocumentProxy } from "pdfjs-dist/types/src/pdf";
+
+export async function drawOnCanvas(
+  canvas: HTMLCanvasElement,
+  pdfDocument: PDFDocumentProxy,
+  page: number,
+  scale: number,
+  options?: {
+    signal?: AbortSignal;
+  }
+): Promise<void> {
+  console.log(pdfDocument);
+  const pdfPage = await pdfDocument.getPage(page);
+
+  if (options?.signal?.aborted) {
+    throw new DOMException("Aborted", "AbortError");
+  }
+
+  const viewport = pdfPage.getViewport({ scale });
+  const width = viewport.width;
+  const height = viewport.height;
+
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+
+  const renderTask = pdfPage.render({
+    canvasContext: ctx as object,
+    viewport,
+  });
+  await renderTask.promise;
+}

From 8cf4c00c2d8152c0b03f3c341c310df75e5d28e1 Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Mon, 13 Nov 2023 20:00:52 +0800
Subject: [PATCH 06/32] add side-by-side preview

---
 .../canvas-scan/preview/SideBySidePreview.vue | 22 +++++++++++++++++++
 .../preview/pdf-preview/PDFPreviewCanvas.vue  |  9 +++++++-
 2 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 src/components/canvas-scan/preview/SideBySidePreview.vue

diff --git a/src/components/canvas-scan/preview/SideBySidePreview.vue b/src/components/canvas-scan/preview/SideBySidePreview.vue
new file mode 100644
index 00000000..864675e9
--- /dev/null
+++ b/src/components/canvas-scan/preview/SideBySidePreview.vue
@@ -0,0 +1,22 @@
+<template>
+  <n-grid cols="1 m:2" x-gap="25px" y-gap="25px" responsive="screen">
+    <n-grid-item>
+      <n-card>
+        <template #cover>
+          <slot name="pdf" />
+        </template>
+      </n-card>
+    </n-grid-item>
+    <n-grid-item>
+      <n-card>
+        <template #cover>
+          <slot name="scan" />
+        </template>
+      </n-card>
+    </n-grid-item>
+  </n-grid>
+</template>
+
+<script lang="ts" setup>
+import { NGrid, NGridItem, NCard } from "naive-ui";
+</script>
diff --git a/src/components/canvas-scan/preview/pdf-preview/PDFPreviewCanvas.vue b/src/components/canvas-scan/preview/pdf-preview/PDFPreviewCanvas.vue
index d79bfd68..352045b4 100644
--- a/src/components/canvas-scan/preview/pdf-preview/PDFPreviewCanvas.vue
+++ b/src/components/canvas-scan/preview/pdf-preview/PDFPreviewCanvas.vue
@@ -1,5 +1,5 @@
 <template>
-  <canvas ref="canvas"></canvas>
+  <canvas ref="canvas" class="canvas"></canvas>
 </template>
 
 <script lang="ts" setup>
@@ -53,3 +53,10 @@ watch(page, draw);
 watch(scale, draw);
 watch(pdfDocument, draw);
 </script>
+
+<style scoped>
+.canvas {
+  width: 100%;
+  height: 100%;
+}
+</style>

From c77d972a6e0a1784a61fb5a90b9ed9443aeb5ba0 Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Mon, 13 Nov 2023 20:32:44 +0800
Subject: [PATCH 07/32] ImagePreview

---
 .../canvas-scan/preview/ImagePreview.vue      |  25 ++++
 .../preview/pdf-preview/PDFPreviewCanvas.vue  |  62 ---------
 src/utils/pdf-new/PDF.ts                      | 118 ++++++++++++++++++
 src/utils/pdf-new/getDocument.ts              |   5 +
 src/utils/pdf-new/index.ts                    |   2 +
 src/utils/pdf-new/standardFontDataFactory.ts  |  38 ++++++
 6 files changed, 188 insertions(+), 62 deletions(-)
 create mode 100644 src/components/canvas-scan/preview/ImagePreview.vue
 delete mode 100644 src/components/canvas-scan/preview/pdf-preview/PDFPreviewCanvas.vue
 create mode 100644 src/utils/pdf-new/PDF.ts
 create mode 100644 src/utils/pdf-new/getDocument.ts
 create mode 100644 src/utils/pdf-new/index.ts
 create mode 100644 src/utils/pdf-new/standardFontDataFactory.ts

diff --git a/src/components/canvas-scan/preview/ImagePreview.vue b/src/components/canvas-scan/preview/ImagePreview.vue
new file mode 100644
index 00000000..c39b5513
--- /dev/null
+++ b/src/components/canvas-scan/preview/ImagePreview.vue
@@ -0,0 +1,25 @@
+<template>
+  <n-image :src="imageURL" v-if="imageURL" />
+  <n-skeleton v-else height="70vh" />
+</template>
+
+<script lang="ts" setup>
+import { NImage, NSkeleton } from "naive-ui";
+import { toRef } from "vue";
+import { useObjectUrl } from "@vueuse/core";
+
+const props = defineProps<{
+  image?: Blob;
+}>();
+
+const image = toRef(props, "image");
+
+const imageURL = useObjectUrl(image);
+</script>
+
+<style scoped>
+.preview {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/canvas-scan/preview/pdf-preview/PDFPreviewCanvas.vue b/src/components/canvas-scan/preview/pdf-preview/PDFPreviewCanvas.vue
deleted file mode 100644
index 352045b4..00000000
--- a/src/components/canvas-scan/preview/pdf-preview/PDFPreviewCanvas.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <canvas ref="canvas" class="canvas"></canvas>
-</template>
-
-<script lang="ts" setup>
-import { ref, toRef, watch } from "vue";
-import { computedAsync } from "@vueuse/core";
-import { standardFontDataFactory } from "@/utils/pdf/standardFontDataFactory";
-import { getDocument } from "@/utils/pdf/getDocument";
-import { drawOnCanvas } from "@/utils/pdf/draw-on-canvas";
-
-const canvas = ref<HTMLCanvasElement | null>(null);
-const controller = ref<AbortController>(new AbortController());
-
-const props = defineProps<{
-  pdf: Blob;
-  page: number;
-  scale: number;
-}>();
-
-const page = toRef(props, "page");
-const scale = toRef(props, "scale");
-
-const pdfDocument = computedAsync(async () => {
-  const array = new Uint8Array(await props.pdf.arrayBuffer());
-  const pdfDocument = await getDocument({
-    data: array,
-    StandardFontDataFactory: standardFontDataFactory,
-  }).promise;
-  return () => pdfDocument;
-});
-
-const draw = async () => {
-  if (!canvas.value) return;
-  if (!pdfDocument.value) return;
-
-  canvas.value.getContext("2d")?.reset();
-  controller.value.abort();
-  controller.value = new AbortController();
-
-  await drawOnCanvas(
-    canvas.value,
-    pdfDocument.value(),
-    props.page,
-    props.scale,
-    {
-      signal: controller.value.signal,
-    }
-  );
-};
-
-watch(page, draw);
-watch(scale, draw);
-watch(pdfDocument, draw);
-</script>
-
-<style scoped>
-.canvas {
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/src/utils/pdf-new/PDF.ts b/src/utils/pdf-new/PDF.ts
new file mode 100644
index 00000000..fd7d6cf2
--- /dev/null
+++ b/src/utils/pdf-new/PDF.ts
@@ -0,0 +1,118 @@
+import type { PDFDocumentProxy } from "pdfjs-dist/types/src/pdf";
+import { standardFontDataFactory } from "./standardFontDataFactory";
+
+export interface PDFPageInfo {
+  blob: Blob;
+  page: number;
+  height: number;
+  width: number;
+  scale: number;
+  dpi: number;
+}
+
+export interface PDFInfoType {
+  source: string;
+  filename: string;
+}
+
+export interface PDFRenderer {
+  renderPage(page: number, scale: number): Promise<PDFPageInfo>;
+  getNumPages(): Promise<number>;
+}
+
+export class PDF implements PDFRenderer {
+  private readonly pdf: File;
+
+  private pdfDocument?: PDFDocumentProxy;
+  private readonly initPromise: Promise<void>;
+  private readonly pagePromises: Map<string, Promise<PDFPageInfo>> = new Map();
+
+  constructor(pdf: File) {
+    this.pdf = pdf;
+    this.initPromise = this.init();
+  }
+
+  async init() {
+    const { getDocument } = await import("./getDocument");
+    const url = URL.createObjectURL(this.pdf);
+    const pdfDocument = await getDocument({
+      url: url,
+      StandardFontDataFactory: standardFontDataFactory,
+    }).promise;
+    this.pdfDocument = pdfDocument;
+  }
+
+  private async getDocument(): Promise<PDFDocumentProxy> {
+    await this.initPromise;
+    if (!this.pdfDocument) {
+      throw new Error("PDF document is not initialized");
+    }
+    return this.pdfDocument;
+  }
+
+  async getNumPages(): Promise<number> {
+    await this.initPromise;
+    return this.pdfDocument.numPages;
+  }
+
+  async renderPage(page: number, scale: number): Promise<PDFPageInfo> {
+    const promise = this.pagePromises.get(`${page}-${scale}`);
+    if (promise) {
+      return await promise;
+    }
+
+    const pageInfoPromise = this.renderPageRaw(page, scale);
+    this.pagePromises.set(`${page}-${scale}`, pageInfoPromise);
+
+    return await pageInfoPromise;
+  }
+
+  private async renderPageRaw(
+    page: number,
+    scale: number
+  ): Promise<PDFPageInfo> {
+    await this.initPromise;
+
+    const dpi = scale * 72;
+    const pdfDocument = await this.getDocument();
+    const pdfPage = await pdfDocument.getPage(page);
+    const viewport = pdfPage.getViewport({ scale });
+    const width = viewport.width;
+    const height = viewport.height;
+
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    const renderTask = pdfPage.render({
+      canvasContext: ctx as object,
+      viewport,
+    });
+    await renderTask.promise;
+
+    const blob: Blob = await new Promise((resolve, reject) => {
+      canvas.toBlob((blob) => {
+        if (blob) {
+          resolve(blob);
+        } else {
+          reject(new Error("Canvas to Blob failed"));
+        }
+      });
+    });
+
+    canvas.remove();
+
+    const pageInfo = {
+      blob,
+      page,
+      height,
+      width,
+      scale,
+      dpi,
+    };
+
+    pdfPage.cleanup();
+
+    return pageInfo;
+  }
+}
diff --git a/src/utils/pdf-new/getDocument.ts b/src/utils/pdf-new/getDocument.ts
new file mode 100644
index 00000000..b020d26f
--- /dev/null
+++ b/src/utils/pdf-new/getDocument.ts
@@ -0,0 +1,5 @@
+import pdfJsWorkerURL from "pdfjs-dist/build/pdf.worker.min.js?url";
+import { GlobalWorkerOptions, getDocument } from "pdfjs-dist";
+GlobalWorkerOptions.workerSrc = pdfJsWorkerURL;
+
+export { getDocument };
diff --git a/src/utils/pdf-new/index.ts b/src/utils/pdf-new/index.ts
new file mode 100644
index 00000000..36f41de7
--- /dev/null
+++ b/src/utils/pdf-new/index.ts
@@ -0,0 +1,2 @@
+export { PDF } from "./PDF";
+export type { PDFInfoType } from "./PDF";
diff --git a/src/utils/pdf-new/standardFontDataFactory.ts b/src/utils/pdf-new/standardFontDataFactory.ts
new file mode 100644
index 00000000..7ca3423e
--- /dev/null
+++ b/src/utils/pdf-new/standardFontDataFactory.ts
@@ -0,0 +1,38 @@
+export interface StandardFontDataFactoryType {
+  fetch: (req: { filename: string }) => Promise<Uint8Array>;
+}
+
+export class standardFontDataFactory {
+  async fetch(req: { filename: string }): Promise<Uint8Array> {
+    const { filename } = req;
+    const url = getFontURL(filename);
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch font: ${url}`);
+    }
+
+    return new Uint8Array(await response.arrayBuffer());
+  }
+}
+
+function getFontURL(filename: string) {
+  if (filename.endsWith(".pfb")) {
+    const base = filename.slice(0, -4);
+
+    return new URL(
+      `../../../node_modules/pdfjs-dist/standard_fonts/${base}.pfb`,
+      import.meta.url
+    ).href;
+  }
+
+  if (filename.endsWith(".ttf")) {
+    const base = filename.slice(0, -4);
+
+    return new URL(
+      `../../../node_modules/pdfjs-dist/standard_fonts/${base}.ttf`,
+      import.meta.url
+    ).href;
+  }
+
+  throw new Error(`Unknown font filename: ${filename}`);
+}

From 1b54afe1ea7ecccfe8f54ac9b386d10eccbd7fa4 Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Mon, 13 Nov 2023 20:45:26 +0800
Subject: [PATCH 08/32] add preview compare

---
 .../canvas-scan/preview/PreviewCompare.vue    | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 src/components/canvas-scan/preview/PreviewCompare.vue

diff --git a/src/components/canvas-scan/preview/PreviewCompare.vue b/src/components/canvas-scan/preview/PreviewCompare.vue
new file mode 100644
index 00000000..b12f92ed
--- /dev/null
+++ b/src/components/canvas-scan/preview/PreviewCompare.vue
@@ -0,0 +1,52 @@
+<template>
+  <SideBySidePreview>
+    <template #pdf>
+      <ImagePreview :image="image.blob" v-if="image" />
+    </template>
+  </SideBySidePreview>
+</template>
+
+<script lang="ts" setup>
+import SideBySidePreview from "./SideBySidePreview.vue";
+import ImagePreview from "./ImagePreview.vue";
+import { ref } from "vue";
+import { computedAsync } from "@vueuse/core";
+
+const page = ref(1);
+
+interface PDFRenderer {
+  renderPage(
+    page: number,
+    scale: number
+  ): Promise<{
+    blob: Blob;
+    height: number;
+    width: number;
+  }>;
+  getNumPages(): Promise<number>;
+}
+
+const props = defineProps<{
+  pdfRenderer?: PDFRenderer;
+  scale: number;
+}>();
+
+const image = computedAsync(async () => {
+  if (!props.pdfRenderer)
+    return {
+      blob: undefined,
+      height: undefined,
+      width: undefined,
+    };
+
+  const { blob, height, width } = await props.pdfRenderer.renderPage(
+    page.value,
+    props.scale
+  );
+  return {
+    blob,
+    height,
+    width,
+  };
+});
+</script>

From 7ca5d2759a35679f9ee7afe194209095fcc1fd40 Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Mon, 13 Nov 2023 21:00:28 +0800
Subject: [PATCH 09/32] add canvas scanner

---
 .../canvas-scan/preview/PreviewCompare.vue    | 25 +++++++
 src/utils/canvas-scan/index.ts                |  1 +
 src/utils/canvas-scan/scanner.ts              | 40 +++++++++++
 src/views/CanvasScanView.vue                  | 70 ++++++++-----------
 4 files changed, 94 insertions(+), 42 deletions(-)
 create mode 100644 src/utils/canvas-scan/scanner.ts

diff --git a/src/components/canvas-scan/preview/PreviewCompare.vue b/src/components/canvas-scan/preview/PreviewCompare.vue
index b12f92ed..df59cf75 100644
--- a/src/components/canvas-scan/preview/PreviewCompare.vue
+++ b/src/components/canvas-scan/preview/PreviewCompare.vue
@@ -3,6 +3,9 @@
     <template #pdf>
       <ImagePreview :image="image.blob" v-if="image" />
     </template>
+    <template #scan>
+      <ImagePreview :image="scanImage.blob" v-if="scanImage" />
+    </template>
   </SideBySidePreview>
 </template>
 
@@ -26,8 +29,17 @@ interface PDFRenderer {
   getNumPages(): Promise<number>;
 }
 
+interface ScanRenderer {
+  renderPage(image: Blob): Promise<{
+    blob: Blob;
+    height: number;
+    width: number;
+  }>;
+}
+
 const props = defineProps<{
   pdfRenderer?: PDFRenderer;
+  scanRenderer?: ScanRenderer;
   scale: number;
 }>();
 
@@ -49,4 +61,17 @@ const image = computedAsync(async () => {
     width,
   };
 });
+
+const scanImage = computedAsync(async () => {
+  if (!props.scanRenderer || !image.value.blob) return;
+
+  const { blob, height, width } = await props.scanRenderer.renderPage(
+    image.value.blob
+  );
+  return {
+    blob,
+    height,
+    width,
+  };
+});
 </script>
diff --git a/src/utils/canvas-scan/index.ts b/src/utils/canvas-scan/index.ts
index 11de0943..7c7c544f 100644
--- a/src/utils/canvas-scan/index.ts
+++ b/src/utils/canvas-scan/index.ts
@@ -1,2 +1,3 @@
 export { type ScanConfig, defaultConfig, colorspaces } from "./types";
 export { scanCanvas } from "./scan";
+export { CanvasScanner } from "./scanner";
diff --git a/src/utils/canvas-scan/scanner.ts b/src/utils/canvas-scan/scanner.ts
new file mode 100644
index 00000000..e758ad8b
--- /dev/null
+++ b/src/utils/canvas-scan/scanner.ts
@@ -0,0 +1,40 @@
+import { scanCanvas } from "./scan";
+import type { ScanConfig } from "./types";
+
+interface ScanRenderer {
+  renderPage(image: Blob): Promise<{
+    blob: Blob;
+    height: number;
+    width: number;
+  }>;
+}
+
+export class CanvasScanner implements ScanRenderer {
+  config: ScanConfig;
+
+  constructor(config: ScanConfig) {
+    this.config = config;
+  }
+
+  async renderPage(image: Blob): Promise<{
+    blob: Blob;
+    height: number;
+    width: number;
+  }> {
+    const canvas = document.createElement("canvas");
+    await scanCanvas(canvas, image, this.config);
+    const blob = await new Promise<Blob>((resolve, reject) =>
+      canvas.toBlob((blob) => {
+        if (blob) {
+          resolve(blob);
+        } else {
+          reject(new Error("Canvas to Blob failed"));
+        }
+      }, this.config.output_format)
+    );
+    const height = canvas.height;
+    const width = canvas.width;
+    canvas.remove();
+    return { blob, height, width };
+  }
+}
diff --git a/src/views/CanvasScanView.vue b/src/views/CanvasScanView.vue
index ab77fbbc..def681a6 100644
--- a/src/views/CanvasScanView.vue
+++ b/src/views/CanvasScanView.vue
@@ -11,20 +11,17 @@
       responsive="screen"
     >
       <n-grid-item span="12 s:5 m:4 l:3">
-        <ScanSettingsCard
-          @update:pdfInfo="(info) => (pdfInfo = info)"
-          @update:page="(page) => (previewPage = page)"
-          @action:preview="preview"
-          v-model:config="config"
-          :pdfInstance="pdfInstance"
-          :scanInstance="scanInstance"
-        />
+        <n-space vertical>
+          <PDFUpload v-model:pdf="pdf" />
+
+          <ScanSettingsCard v-model:config="config" />
+        </n-space>
       </n-grid-item>
       <n-grid-item span="12 s:7 m:8 l:9">
-        <SideBySidePreview
-          :page="previewPage"
-          :pdfInstance="pdfInstance"
-          :scanInstance="scanInstance"
+        <PreviewCompare
+          :pdfRenderer="pdfRenderer"
+          :scanRenderer="scanRenderer"
+          :scale="config.scale"
         />
       </n-grid-item>
     </n-grid>
@@ -32,20 +29,21 @@
 </template>
 
 <script lang="ts" setup>
-import { NGrid, NGridItem } from "naive-ui";
+import { NGrid, NGridItem, NSpace } from "naive-ui";
 import MainContainer from "@/components/MainContainer.vue";
-import type { ScanConfig } from "@/utils/scan";
-import { defaultConfig } from "@/utils/scan";
-import SideBySidePreview from "@/components/preview/SideBySidePreview.vue";
-import ScanSettingsCard from "@/components/ScanSettings/ScanSettingsCard.vue";
-import { ref, computed } from "vue";
+import { type ScanConfig, defaultConfig } from "@/utils/canvas-scan";
+import ScanSettingsCard from "@/components/canvas-scan/canvas-scan-settings/ScanSettingsCard.vue";
+import PDFUpload from "@/components/pdf-upload/PDFUpload.vue";
+import { ref, computed, onMounted } from "vue";
 import PDFURL from "@/assets/examples/pdfs/test.pdf";
-import { PDF } from "@/utils/pdf";
-import { Scan } from "@/utils/scan";
 import type { PDFInfoType } from "@/utils/pdf";
 import BackToIndex from "@/components/buttons/BackToIndex.vue";
 import { useHead } from "@vueuse/head";
 import { useI18n } from "vue-i18n";
+import { PDF } from "@/utils/pdf-new";
+import PreviewCompare from "@/components/canvas-scan/preview/PreviewCompare.vue";
+import { CanvasScanner } from "@/utils/canvas-scan";
+
 const { t } = useI18n();
 
 useHead({
@@ -53,32 +51,20 @@ useHead({
   meta: [{ name: "description", content: t("base.description") }],
 });
 
-const pdfInfo = ref({
-  source: PDFURL,
-  filename: "test.pdf",
-} as PDFInfoType);
+const pdf = ref<File | undefined>(undefined);
 
-const config = ref(defaultConfig);
-const previewConfig = ref(
-  JSON.parse(JSON.stringify(config.value)) as ScanConfig
-);
-const previewPage = ref(1);
-const pdfInstance = computed(() => {
-  return new PDF(pdfInfo.value, previewConfig.value.scale);
+onMounted(async () => {
+  const response = await fetch(PDFURL);
+  const blob = await response.blob();
+  pdf.value = new File([blob], "test.pdf");
 });
 
-let controller = new AbortController();
-
-const scanInstance = computed(() => {
-  controller.abort();
-  controller = new AbortController();
-  const signal = controller.signal;
+const config = ref<ScanConfig>(defaultConfig);
+const pdfRenderer = computed(() => {
+  if (!pdf.value) return;
 
-  return new Scan(pdfInstance.value, previewConfig.value, signal);
+  return new PDF(pdf.value);
 });
 
-function preview() {
-  // Otherwise the previewConfig and config will be the same Object
-  previewConfig.value = JSON.parse(JSON.stringify(config.value)) as ScanConfig;
-}
+const scanRenderer = computed(() => new CanvasScanner(config.value));
 </script>

From f7ec99d48164c71da29cc42f493887dd88d80cd2 Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Mon, 13 Nov 2023 21:04:15 +0800
Subject: [PATCH 10/32] deep watch scanRenderer

---
 src/views/CanvasScanView.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/views/CanvasScanView.vue b/src/views/CanvasScanView.vue
index def681a6..444859bb 100644
--- a/src/views/CanvasScanView.vue
+++ b/src/views/CanvasScanView.vue
@@ -34,9 +34,8 @@ import MainContainer from "@/components/MainContainer.vue";
 import { type ScanConfig, defaultConfig } from "@/utils/canvas-scan";
 import ScanSettingsCard from "@/components/canvas-scan/canvas-scan-settings/ScanSettingsCard.vue";
 import PDFUpload from "@/components/pdf-upload/PDFUpload.vue";
-import { ref, computed, onMounted } from "vue";
+import { ref, computed, onMounted, watch } from "vue";
 import PDFURL from "@/assets/examples/pdfs/test.pdf";
-import type { PDFInfoType } from "@/utils/pdf";
 import BackToIndex from "@/components/buttons/BackToIndex.vue";
 import { useHead } from "@vueuse/head";
 import { useI18n } from "vue-i18n";
@@ -66,5 +65,12 @@ const pdfRenderer = computed(() => {
   return new PDF(pdf.value);
 });
 
-const scanRenderer = computed(() => new CanvasScanner(config.value));
+const scanRenderer = ref(new CanvasScanner(config.value));
+watch(
+  config,
+  (newConfig) => {
+    scanRenderer.value = new CanvasScanner(newConfig);
+  },
+  { deep: true }
+);
 </script>

From 66904587663447b894aac9edb6b4820e4d5505b2 Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Mon, 13 Nov 2023 21:09:24 +0800
Subject: [PATCH 11/32] add abort signal to scanner

---
 .../canvas-scan/preview/PreviewCompare.vue    | 16 ++++++++++++--
 src/utils/canvas-scan/scan.ts                 | 14 +++++++++++-
 src/utils/canvas-scan/scanner.ts              | 22 +++++++++++++++++--
 3 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/src/components/canvas-scan/preview/PreviewCompare.vue b/src/components/canvas-scan/preview/PreviewCompare.vue
index df59cf75..71f36de2 100644
--- a/src/components/canvas-scan/preview/PreviewCompare.vue
+++ b/src/components/canvas-scan/preview/PreviewCompare.vue
@@ -30,7 +30,12 @@ interface PDFRenderer {
 }
 
 interface ScanRenderer {
-  renderPage(image: Blob): Promise<{
+  renderPage(
+    image: Blob,
+    options?: {
+      signal?: AbortSignal;
+    }
+  ): Promise<{
     blob: Blob;
     height: number;
     width: number;
@@ -62,11 +67,18 @@ const image = computedAsync(async () => {
   };
 });
 
+let controller = new AbortController();
+
 const scanImage = computedAsync(async () => {
+  controller.abort();
+  controller = new AbortController();
   if (!props.scanRenderer || !image.value.blob) return;
 
   const { blob, height, width } = await props.scanRenderer.renderPage(
-    image.value.blob
+    image.value.blob,
+    {
+      signal: controller.signal,
+    }
   );
   return {
     blob,
diff --git a/src/utils/canvas-scan/scan.ts b/src/utils/canvas-scan/scan.ts
index d726b66f..5639125a 100644
--- a/src/utils/canvas-scan/scan.ts
+++ b/src/utils/canvas-scan/scan.ts
@@ -4,8 +4,13 @@ import noiseSVG from "./noise.svg?url";
 export async function scanCanvas(
   canvas: HTMLCanvasElement,
   page: Blob,
-  config: ScanConfig
+  config: ScanConfig,
+  signal?: AbortSignal
 ): Promise<void> {
+  if (signal?.aborted) {
+    throw new Error("Aborted");
+  }
+
   const ctx = canvas.getContext("2d");
   if (!ctx) {
     throw new Error("Canvas not supported");
@@ -18,6 +23,10 @@ export async function scanCanvas(
     img.onload = resolve;
     img.onerror = reject;
   });
+  if (signal?.aborted) {
+    throw new Error("Aborted");
+  }
+
   canvas.width = img.width;
   canvas.height = img.height;
 
@@ -43,6 +52,9 @@ export async function scanCanvas(
   const noiseImg = new Image();
   noiseImg.src = noiseSVG;
   await new Promise((resolve) => (noiseImg.onload = resolve));
+  if (signal?.aborted) {
+    throw new Error("Aborted");
+  }
 
   // add noise
   ctx.drawImage(
diff --git a/src/utils/canvas-scan/scanner.ts b/src/utils/canvas-scan/scanner.ts
index e758ad8b..4d021a7e 100644
--- a/src/utils/canvas-scan/scanner.ts
+++ b/src/utils/canvas-scan/scanner.ts
@@ -2,7 +2,12 @@ import { scanCanvas } from "./scan";
 import type { ScanConfig } from "./types";
 
 interface ScanRenderer {
-  renderPage(image: Blob): Promise<{
+  renderPage(
+    image: Blob,
+    options?: {
+      signal?: AbortSignal;
+    }
+  ): Promise<{
     blob: Blob;
     height: number;
     width: number;
@@ -16,13 +21,26 @@ export class CanvasScanner implements ScanRenderer {
     this.config = config;
   }
 
-  async renderPage(image: Blob): Promise<{
+  async renderPage(
+    image: Blob,
+    options?: {
+      signal?: AbortSignal;
+    }
+  ): Promise<{
     blob: Blob;
     height: number;
     width: number;
   }> {
+    if (options?.signal?.aborted) {
+      throw new Error("Aborted");
+    }
+
     const canvas = document.createElement("canvas");
     await scanCanvas(canvas, image, this.config);
+    if (options?.signal?.aborted) {
+      throw new Error("Aborted");
+    }
+
     const blob = await new Promise<Blob>((resolve, reject) =>
       canvas.toBlob((blob) => {
         if (blob) {

From cbd3e639e3117b07f3f7db5751cbedb264db2c6c Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Mon, 13 Nov 2023 21:16:15 +0800
Subject: [PATCH 12/32] add pagination

---
 .../canvas-scan/preview/PreviewCompare.vue    | 31 ++++++++++++++-----
 .../canvas-scan/preview/PreviewPagination.vue | 27 ++++++++++++++++
 2 files changed, 50 insertions(+), 8 deletions(-)
 create mode 100644 src/components/canvas-scan/preview/PreviewPagination.vue

diff --git a/src/components/canvas-scan/preview/PreviewCompare.vue b/src/components/canvas-scan/preview/PreviewCompare.vue
index 71f36de2..2d6a7ba8 100644
--- a/src/components/canvas-scan/preview/PreviewCompare.vue
+++ b/src/components/canvas-scan/preview/PreviewCompare.vue
@@ -1,12 +1,19 @@
 <template>
-  <SideBySidePreview>
-    <template #pdf>
-      <ImagePreview :image="image.blob" v-if="image" />
-    </template>
-    <template #scan>
-      <ImagePreview :image="scanImage.blob" v-if="scanImage" />
-    </template>
-  </SideBySidePreview>
+  <n-space vertical>
+    <SideBySidePreview>
+      <template #pdf>
+        <ImagePreview :image="image.blob" v-if="image" />
+      </template>
+      <template #scan>
+        <ImagePreview :image="scanImage.blob" v-if="scanImage" />
+      </template>
+    </SideBySidePreview>
+    <PreviewPagination
+      v-model:page="page"
+      :numPages="numPages"
+      v-if="numPages >= 2"
+    />
+  </n-space>
 </template>
 
 <script lang="ts" setup>
@@ -14,6 +21,8 @@ import SideBySidePreview from "./SideBySidePreview.vue";
 import ImagePreview from "./ImagePreview.vue";
 import { ref } from "vue";
 import { computedAsync } from "@vueuse/core";
+import PreviewPagination from "./PreviewPagination.vue";
+import { NSpace } from "naive-ui";
 
 const page = ref(1);
 
@@ -86,4 +95,10 @@ const scanImage = computedAsync(async () => {
     width,
   };
 });
+
+const numPages = computedAsync(async () => {
+  page.value = 1;
+  if (!props.pdfRenderer) return 1;
+  return await props.pdfRenderer.getNumPages();
+}, 1);
 </script>
diff --git a/src/components/canvas-scan/preview/PreviewPagination.vue b/src/components/canvas-scan/preview/PreviewPagination.vue
new file mode 100644
index 00000000..be12c062
--- /dev/null
+++ b/src/components/canvas-scan/preview/PreviewPagination.vue
@@ -0,0 +1,27 @@
+<template>
+  <n-space justify="center">
+    <n-pagination
+      v-model:page="page"
+      :page-count="numPages"
+      v-show="numPages >= 2"
+      :page-slot="5"
+      size="small"
+    />
+  </n-space>
+</template>
+
+<script lang="ts" setup>
+import { NPagination, NSpace } from "naive-ui";
+import { useVModel } from "@vueuse/core";
+
+const props = defineProps<{
+  page: number;
+  numPages: number;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:page", page: number): void;
+}>();
+
+const page = useVModel(props, "page", emit);
+</script>

From 32777be747669659217e45ee181135075dcadc4d Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Tue, 14 Nov 2023 10:37:28 +0800
Subject: [PATCH 13/32] add noise i18n

---
 src/locale/en/settings.ts    | 1 +
 src/locale/zh-CN/settings.ts | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/locale/en/settings.ts b/src/locale/en/settings.ts
index d70d6d2a..221727a9 100644
--- a/src/locale/en/settings.ts
+++ b/src/locale/en/settings.ts
@@ -1,6 +1,7 @@
 export const settings = {
   settings: "Customization",
   attenuate: "Noise",
+  noise: "Noise",
   blur: "Blur",
   border: {
     label: "Border",
diff --git a/src/locale/zh-CN/settings.ts b/src/locale/zh-CN/settings.ts
index 5eb27664..a598c2a4 100644
--- a/src/locale/zh-CN/settings.ts
+++ b/src/locale/zh-CN/settings.ts
@@ -1,6 +1,7 @@
 export const settings = {
   settings: "扫描设置",
   attenuate: "噪点",
+  noise: "噪点",
   blur: "模糊",
   border: {
     label: "边框",

From e77ad805674c51a0a657c4f3c52f6c322f608277 Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Tue, 14 Nov 2023 10:45:55 +0800
Subject: [PATCH 14/32] add scan actions card

---
 .../scan-actions/ScanActionsCard.vue          | 26 +++++++++++++++++++
 src/views/CanvasScanView.vue                  |  3 +++
 2 files changed, 29 insertions(+)
 create mode 100644 src/components/scan-actions/ScanActionsCard.vue

diff --git a/src/components/scan-actions/ScanActionsCard.vue b/src/components/scan-actions/ScanActionsCard.vue
new file mode 100644
index 00000000..8ffde471
--- /dev/null
+++ b/src/components/scan-actions/ScanActionsCard.vue
@@ -0,0 +1,26 @@
+<template>
+  <n-card size="small">
+    <n-space justify="space-around" size="large">
+      <n-button text @click="emit('action:generate')">
+        <template #icon>
+          <n-icon>
+            <DocumentDownload />
+          </n-icon>
+        </template>
+        {{ t("actions.save") }}
+      </n-button>
+    </n-space>
+  </n-card>
+</template>
+
+<script lang="ts" setup>
+import { NCard, NSpace, NIcon, NButton } from "naive-ui";
+import { DocumentDownload } from "@vicons/carbon";
+
+const emit = defineEmits<{
+  (e: "action:generate"): void;
+}>();
+
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+</script>
diff --git a/src/views/CanvasScanView.vue b/src/views/CanvasScanView.vue
index 444859bb..c30baa56 100644
--- a/src/views/CanvasScanView.vue
+++ b/src/views/CanvasScanView.vue
@@ -15,6 +15,8 @@
           <PDFUpload v-model:pdf="pdf" />
 
           <ScanSettingsCard v-model:config="config" />
+
+          <ScanActionsCard />
         </n-space>
       </n-grid-item>
       <n-grid-item span="12 s:7 m:8 l:9">
@@ -42,6 +44,7 @@ import { useI18n } from "vue-i18n";
 import { PDF } from "@/utils/pdf-new";
 import PreviewCompare from "@/components/canvas-scan/preview/PreviewCompare.vue";
 import { CanvasScanner } from "@/utils/canvas-scan";
+import ScanActionsCard from "@/components/scan-actions/ScanActionsCard.vue";
 
 const { t } = useI18n();
 

From 4f28b235ce5a9b7752a88d85cb8dd0f57d34d946 Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Tue, 14 Nov 2023 13:27:36 +0800
Subject: [PATCH 15/32] add download Save

---
 src/composables/save-scanned-pdf/index.ts | 65 +++++++++++++++++++++++
 src/views/CanvasScanView.vue              | 16 +++++-
 2 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 src/composables/save-scanned-pdf/index.ts

diff --git a/src/composables/save-scanned-pdf/index.ts b/src/composables/save-scanned-pdf/index.ts
new file mode 100644
index 00000000..151379a3
--- /dev/null
+++ b/src/composables/save-scanned-pdf/index.ts
@@ -0,0 +1,65 @@
+import type { Ref } from "vue";
+import { get } from "@vueuse/core";
+
+interface PDFRenderer {
+  renderPage(
+    page: number,
+    scale: number
+  ): Promise<{
+    blob: Blob;
+  }>;
+  getNumPages(): Promise<number>;
+}
+
+interface ScanRenderer {
+  renderPage(image: Blob): Promise<{
+    blob: Blob;
+    height: number;
+    width: number;
+  }>;
+}
+
+export function useSaveScannedPDF(
+  pdfRenderer: PDFRenderer | undefined | Ref<PDFRenderer | undefined>,
+  scanRenderer: ScanRenderer | undefined | Ref<ScanRenderer | undefined>,
+  scale: Ref<number> | number
+) {
+  const save = async () => {
+    const pdf = get(pdfRenderer);
+    const scan = get(scanRenderer);
+    const scale_ = get(scale);
+
+    if (!pdf || !scan) {
+      throw new Error("No PDF or Scan Renderer");
+    }
+
+    const numPages = await pdf.getNumPages();
+    console.log(`Number of pages: ${numPages} at scale ${scale_}x`);
+
+    // generate pdf pages 1...n
+    const pages = Array.from({ length: numPages }, (_, i) => i + 1);
+
+    const pdfPages = await Promise.all(
+      pages.map(async (page) => {
+        const { blob } = await pdf.renderPage(page, scale_);
+        return blob;
+      })
+    );
+
+    // generate scan pages
+    const scanPages = await Promise.all(
+      pdfPages.map(async (pdfPage) => {
+        const info = await scan.renderPage(pdfPage);
+        return { ...info, dpi: scale_ * 72 };
+      })
+    );
+
+    // generate pdf from scan pages
+    const { imagesToPDF } = await import("@/utils/images-to-pdf");
+    const pdfDocument = await imagesToPDF(scanPages);
+
+    return pdfDocument;
+  };
+
+  return { save };
+}
diff --git a/src/views/CanvasScanView.vue b/src/views/CanvasScanView.vue
index c30baa56..a2258e84 100644
--- a/src/views/CanvasScanView.vue
+++ b/src/views/CanvasScanView.vue
@@ -16,7 +16,7 @@
 
           <ScanSettingsCard v-model:config="config" />
 
-          <ScanActionsCard />
+          <ScanActionsCard @action:generate="downloadSave" />
         </n-space>
       </n-grid-item>
       <n-grid-item span="12 s:7 m:8 l:9">
@@ -45,6 +45,7 @@ import { PDF } from "@/utils/pdf-new";
 import PreviewCompare from "@/components/canvas-scan/preview/PreviewCompare.vue";
 import { CanvasScanner } from "@/utils/canvas-scan";
 import ScanActionsCard from "@/components/scan-actions/ScanActionsCard.vue";
+import { useSaveScannedPDF } from "@/composables/save-scanned-pdf";
 
 const { t } = useI18n();
 
@@ -76,4 +77,17 @@ watch(
   },
   { deep: true }
 );
+
+const scale = computed(() => config.value.scale);
+
+const { save } = useSaveScannedPDF(pdfRenderer, scanRenderer, scale);
+const downloadSave = async () => {
+  const pdfBlob = await save();
+  const url = URL.createObjectURL(pdfBlob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = "scanned.pdf";
+  link.click();
+  URL.revokeObjectURL(url);
+};
 </script>

From a7aa967846d45b17848d77f1987d4402dbf423d7 Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Tue, 14 Nov 2023 13:45:45 +0800
Subject: [PATCH 16/32] add progress

---
 .../SaveButtonCard.vue}                       | 13 +++-
 src/composables/save-scanned-pdf/index.ts     | 76 ++++++++++++-------
 src/views/CanvasScanView.vue                  | 14 +++-
 3 files changed, 68 insertions(+), 35 deletions(-)
 rename src/components/{scan-actions/ScanActionsCard.vue => save-button/SaveButtonCard.vue} (66%)

diff --git a/src/components/scan-actions/ScanActionsCard.vue b/src/components/save-button/SaveButtonCard.vue
similarity index 66%
rename from src/components/scan-actions/ScanActionsCard.vue
rename to src/components/save-button/SaveButtonCard.vue
index 8ffde471..fad596f8 100644
--- a/src/components/scan-actions/ScanActionsCard.vue
+++ b/src/components/save-button/SaveButtonCard.vue
@@ -1,13 +1,13 @@
 <template>
-  <n-card size="small">
+  <n-card size="small" class="animated-border">
     <n-space justify="space-around" size="large">
-      <n-button text @click="emit('action:generate')">
+      <n-button text @click="emit('save')" :disabled="saving">
         <template #icon>
           <n-icon>
             <DocumentDownload />
           </n-icon>
         </template>
-        {{ t("actions.save") }}
+        {{ t("actions.save") }} ({{ progress }})
       </n-button>
     </n-space>
   </n-card>
@@ -17,8 +17,13 @@
 import { NCard, NSpace, NIcon, NButton } from "naive-ui";
 import { DocumentDownload } from "@vicons/carbon";
 
+defineProps<{
+  progress?: number;
+  saving?: boolean;
+}>();
+
 const emit = defineEmits<{
-  (e: "action:generate"): void;
+  (e: "save"): void;
 }>();
 
 import { useI18n } from "vue-i18n";
diff --git a/src/composables/save-scanned-pdf/index.ts b/src/composables/save-scanned-pdf/index.ts
index 151379a3..4fd1e1f5 100644
--- a/src/composables/save-scanned-pdf/index.ts
+++ b/src/composables/save-scanned-pdf/index.ts
@@ -1,5 +1,6 @@
 import type { Ref } from "vue";
 import { get } from "@vueuse/core";
+import { ref, computed } from "vue";
 
 interface PDFRenderer {
   renderPage(
@@ -24,42 +25,61 @@ export function useSaveScannedPDF(
   scanRenderer: ScanRenderer | undefined | Ref<ScanRenderer | undefined>,
   scale: Ref<number> | number
 ) {
+  const finishedPages = ref(0);
+  const totalPages = ref(0);
+  const progress = computed(() => {
+    if (totalPages.value === 0) {
+      return 0;
+    }
+    return finishedPages.value / totalPages.value;
+  });
+
+  const saving = ref(false);
+
   const save = async () => {
-    const pdf = get(pdfRenderer);
-    const scan = get(scanRenderer);
-    const scale_ = get(scale);
+    try {
+      finishedPages.value = 0;
+      totalPages.value = 0;
+      saving.value = true;
 
-    if (!pdf || !scan) {
-      throw new Error("No PDF or Scan Renderer");
-    }
+      const pdf = get(pdfRenderer);
+      const scan = get(scanRenderer);
+      const scale_ = get(scale);
 
-    const numPages = await pdf.getNumPages();
-    console.log(`Number of pages: ${numPages} at scale ${scale_}x`);
+      if (!pdf || !scan) {
+        throw new Error("No PDF or Scan Renderer");
+      }
 
-    // generate pdf pages 1...n
-    const pages = Array.from({ length: numPages }, (_, i) => i + 1);
+      const numPages = await pdf.getNumPages();
 
-    const pdfPages = await Promise.all(
-      pages.map(async (page) => {
-        const { blob } = await pdf.renderPage(page, scale_);
-        return blob;
-      })
-    );
+      totalPages.value = numPages;
 
-    // generate scan pages
-    const scanPages = await Promise.all(
-      pdfPages.map(async (pdfPage) => {
-        const info = await scan.renderPage(pdfPage);
-        return { ...info, dpi: scale_ * 72 };
-      })
-    );
+      // generate pdf pages 1...n
+      const pages = Array.from({ length: numPages }, (_, i) => i + 1);
+      const scanPages = await Promise.all(
+        pages.map(async (page) => {
+          const pdfPage = (await pdf.renderPage(page, scale_)).blob;
+          const scanPage = await scan.renderPage(pdfPage);
+          finishedPages.value += 1;
+          return {
+            ...scanPage,
+            dpi: scale_ * 72,
+          };
+        })
+      );
 
-    // generate pdf from scan pages
-    const { imagesToPDF } = await import("@/utils/images-to-pdf");
-    const pdfDocument = await imagesToPDF(scanPages);
+      // generate pdf from scan pages
+      const { imagesToPDF } = await import("@/utils/images-to-pdf");
+      const pdfDocument = await imagesToPDF(scanPages);
 
-    return pdfDocument;
+      return pdfDocument;
+    } catch (e) {
+      console.error(e);
+      throw e;
+    } finally {
+      saving.value = false;
+    }
   };
 
-  return { save };
+  return { save, progress, saving };
 }
diff --git a/src/views/CanvasScanView.vue b/src/views/CanvasScanView.vue
index a2258e84..1cadd93b 100644
--- a/src/views/CanvasScanView.vue
+++ b/src/views/CanvasScanView.vue
@@ -16,7 +16,11 @@
 
           <ScanSettingsCard v-model:config="config" />
 
-          <ScanActionsCard @action:generate="downloadSave" />
+          <SaveButtonCard
+            @save="downloadSave"
+            :progress="progress"
+            :saving="saving"
+          />
         </n-space>
       </n-grid-item>
       <n-grid-item span="12 s:7 m:8 l:9">
@@ -44,7 +48,7 @@ import { useI18n } from "vue-i18n";
 import { PDF } from "@/utils/pdf-new";
 import PreviewCompare from "@/components/canvas-scan/preview/PreviewCompare.vue";
 import { CanvasScanner } from "@/utils/canvas-scan";
-import ScanActionsCard from "@/components/scan-actions/ScanActionsCard.vue";
+import SaveButtonCard from "@/components/save-button/SaveButtonCard.vue";
 import { useSaveScannedPDF } from "@/composables/save-scanned-pdf";
 
 const { t } = useI18n();
@@ -80,7 +84,11 @@ watch(
 
 const scale = computed(() => config.value.scale);
 
-const { save } = useSaveScannedPDF(pdfRenderer, scanRenderer, scale);
+const { save, progress, saving } = useSaveScannedPDF(
+  pdfRenderer,
+  scanRenderer,
+  scale
+);
 const downloadSave = async () => {
   const pdfBlob = await save();
   const url = URL.createObjectURL(pdfBlob);

From 5860cf5681e6c820c6265102d85c20c5788b3150 Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Tue, 14 Nov 2023 13:52:45 +0800
Subject: [PATCH 17/32] add progress to save button card

---
 src/components/save-button/SaveButtonCard.vue | 27 +++++++++++++++----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/save-button/SaveButtonCard.vue b/src/components/save-button/SaveButtonCard.vue
index fad596f8..6159bf3d 100644
--- a/src/components/save-button/SaveButtonCard.vue
+++ b/src/components/save-button/SaveButtonCard.vue
@@ -1,5 +1,9 @@
 <template>
-  <n-card size="small" class="animated-border">
+  <n-card
+    size="small"
+    class="animated-progress"
+    :style="{ '--progress': (progress ?? 0) * 100 + '%' }"
+  >
     <n-space justify="space-around" size="large">
       <n-button text @click="emit('save')" :disabled="saving">
         <template #icon>
@@ -7,7 +11,7 @@
             <DocumentDownload />
           </n-icon>
         </template>
-        {{ t("actions.save") }} ({{ progress }})
+        {{ t("actions.save") }}
       </n-button>
     </n-space>
   </n-card>
@@ -16,6 +20,8 @@
 <script lang="ts" setup>
 import { NCard, NSpace, NIcon, NButton } from "naive-ui";
 import { DocumentDownload } from "@vicons/carbon";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
 
 defineProps<{
   progress?: number;
@@ -25,7 +31,18 @@ defineProps<{
 const emit = defineEmits<{
   (e: "save"): void;
 }>();
-
-import { useI18n } from "vue-i18n";
-const { t } = useI18n();
 </script>
+
+<style scoped>
+.animated-progress::before {
+  content: "";
+  width: var(--progress);
+  height: 3px;
+  background-color: var(--n-color-target);
+
+  position: absolute;
+  bottom: 0px;
+
+  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+</style>

From bb4ad22cd42c159b4e7da25b27dad2c6cb9f0a21 Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Tue, 14 Nov 2023 14:04:20 +0800
Subject: [PATCH 18/32] generate noise svg on the fly

---
 src/utils/canvas-scan/noise-svg.ts | 24 ++++++++++++++++++++
 src/utils/canvas-scan/noise.svg    | 17 --------------
 src/utils/canvas-scan/scan.ts      | 36 +++++++++++++++++-------------
 3 files changed, 45 insertions(+), 32 deletions(-)
 create mode 100644 src/utils/canvas-scan/noise-svg.ts
 delete mode 100644 src/utils/canvas-scan/noise.svg

diff --git a/src/utils/canvas-scan/noise-svg.ts b/src/utils/canvas-scan/noise-svg.ts
new file mode 100644
index 00000000..efdfa535
--- /dev/null
+++ b/src/utils/canvas-scan/noise-svg.ts
@@ -0,0 +1,24 @@
+// https://fffuel.co/nnnoise/
+
+export function getNoiseSVG(noise: number): string {
+  return `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
+  xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 700 700" width="700" height="700">
+  <defs>
+      <filter id="nnnoise-filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox"
+          primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
+          <feTurbulence type="fractalNoise" baseFrequency="0.102" numOctaves="4" seed="15" stitchTiles="stitch" x="0%"
+              y="0%" width="100%" height="100%" result="turbulence"></feTurbulence>
+          <feSpecularLighting surfaceScale="15" specularConstant="${
+            noise * 3
+          }" specularExponent="20" lighting-color="#7957A8"
+              x="0%" y="0%" width="100%" height="100%" in="turbulence" result="specularLighting">
+              <feDistantLight azimuth="3" elevation="100"></feDistantLight>
+          </feSpecularLighting>
+          <feColorMatrix type="saturate" values="0" x="0%" y="0%" width="100%" height="100%" in="specularLighting"
+              result="colormatrix"></feColorMatrix>
+      </filter>
+  </defs>
+  <rect width="700" height="700" fill="transparent"></rect>
+  <rect width="700" height="700" fill="#7957a8" filter="url(#nnnoise-filter)"></rect>
+</svg>`;
+}
diff --git a/src/utils/canvas-scan/noise.svg b/src/utils/canvas-scan/noise.svg
deleted file mode 100644
index 872af524..00000000
--- a/src/utils/canvas-scan/noise.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
-    xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 700 700" width="700" height="700">
-    <defs>
-        <filter id="nnnoise-filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox"
-            primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
-            <feTurbulence type="fractalNoise" baseFrequency="0.102" numOctaves="4" seed="15" stitchTiles="stitch" x="0%"
-                y="0%" width="100%" height="100%" result="turbulence"></feTurbulence>
-            <feSpecularLighting surfaceScale="15" specularConstant="0.75" specularExponent="20" lighting-color="#000000"
-                x="0%" y="0%" width="100%" height="100%" in="turbulence" result="specularLighting">
-                <feDistantLight azimuth="3" elevation="100"></feDistantLight>
-            </feSpecularLighting>
-
-        </filter>
-    </defs>
-    <rect width="700" height="700" fill="transparent"></rect>
-    <rect width="700" height="700" fill="#000000" filter="url(#nnnoise-filter)"></rect>
-</svg>
\ No newline at end of file
diff --git a/src/utils/canvas-scan/scan.ts b/src/utils/canvas-scan/scan.ts
index 5639125a..ccc498f3 100644
--- a/src/utils/canvas-scan/scan.ts
+++ b/src/utils/canvas-scan/scan.ts
@@ -1,5 +1,5 @@
 import type { ScanConfig } from "./types";
-import noiseSVG from "./noise.svg?url";
+import { getNoiseSVG } from "./noise-svg";
 
 export async function scanCanvas(
   canvas: HTMLCanvasElement,
@@ -49,21 +49,27 @@ export async function scanCanvas(
 
   ctx.drawImage(img, 0, 0);
 
-  const noiseImg = new Image();
-  noiseImg.src = noiseSVG;
-  await new Promise((resolve) => (noiseImg.onload = resolve));
-  if (signal?.aborted) {
-    throw new Error("Aborted");
-  }
+  if (config.noise !== 0) {
+    const noiseSVG = getNoiseSVG(config.noise);
+    const noiseSVGBlob = new Blob([noiseSVG], { type: "image/svg+xml" });
+    const noiseSVGURL = URL.createObjectURL(noiseSVGBlob);
 
-  // add noise
-  ctx.drawImage(
-    noiseImg,
-    -canvas.width,
-    -canvas.height,
-    canvas.width * 2,
-    canvas.height * 2
-  );
+    const noiseImg = new Image();
+    noiseImg.src = noiseSVGURL;
+    await new Promise((resolve) => (noiseImg.onload = resolve));
+    if (signal?.aborted) {
+      throw new Error("Aborted");
+    }
+
+    // add noise
+    ctx.drawImage(
+      noiseImg,
+      -canvas.width,
+      -canvas.height,
+      canvas.width * 2,
+      canvas.height * 2
+    );
+  }
 
   if (config.border) {
     ctx.strokeStyle = "black";

From e21499a5d300e856f7c49a60d7d4f0b17b0fd638 Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Tue, 14 Nov 2023 14:08:01 +0800
Subject: [PATCH 19/32] rename to scan-canvas

---
 src/utils/canvas-scan/index.ts                    | 1 -
 src/utils/canvas-scan/{scan.ts => scan-canvas.ts} | 0
 src/utils/canvas-scan/scanner.ts                  | 2 +-
 3 files changed, 1 insertion(+), 2 deletions(-)
 rename src/utils/canvas-scan/{scan.ts => scan-canvas.ts} (100%)

diff --git a/src/utils/canvas-scan/index.ts b/src/utils/canvas-scan/index.ts
index 7c7c544f..c90e612c 100644
--- a/src/utils/canvas-scan/index.ts
+++ b/src/utils/canvas-scan/index.ts
@@ -1,3 +1,2 @@
 export { type ScanConfig, defaultConfig, colorspaces } from "./types";
-export { scanCanvas } from "./scan";
 export { CanvasScanner } from "./scanner";
diff --git a/src/utils/canvas-scan/scan.ts b/src/utils/canvas-scan/scan-canvas.ts
similarity index 100%
rename from src/utils/canvas-scan/scan.ts
rename to src/utils/canvas-scan/scan-canvas.ts
diff --git a/src/utils/canvas-scan/scanner.ts b/src/utils/canvas-scan/scanner.ts
index 4d021a7e..cd701d3e 100644
--- a/src/utils/canvas-scan/scanner.ts
+++ b/src/utils/canvas-scan/scanner.ts
@@ -1,4 +1,4 @@
-import { scanCanvas } from "./scan";
+import { scanCanvas } from "./scan-canvas";
 import type { ScanConfig } from "./types";
 
 interface ScanRenderer {

From 9be9f222e187d1a154fd14e8b2925f447c56f65a Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Tue, 14 Nov 2023 14:45:59 +0800
Subject: [PATCH 20/32] use offscreen canvas

---
 src/utils/canvas-scan/scan-canvas.ts | 36 +++++++++-------------
 src/utils/canvas-scan/scanner.ts     | 46 +++++++++++++++++-----------
 2 files changed, 43 insertions(+), 39 deletions(-)

diff --git a/src/utils/canvas-scan/scan-canvas.ts b/src/utils/canvas-scan/scan-canvas.ts
index ccc498f3..0f6affff 100644
--- a/src/utils/canvas-scan/scan-canvas.ts
+++ b/src/utils/canvas-scan/scan-canvas.ts
@@ -2,7 +2,7 @@ import type { ScanConfig } from "./types";
 import { getNoiseSVG } from "./noise-svg";
 
 export async function scanCanvas(
-  canvas: HTMLCanvasElement,
+  canvas_: HTMLCanvasElement | OffscreenCanvas,
   page: Blob,
   config: ScanConfig,
   signal?: AbortSignal
@@ -11,28 +11,28 @@ export async function scanCanvas(
     throw new Error("Aborted");
   }
 
-  const ctx = canvas.getContext("2d");
+  // Note: Hack to get around TS error
+  const canvas = canvas_ as HTMLCanvasElement;
+  const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
   if (!ctx) {
     throw new Error("Canvas not supported");
   }
 
   // load blob into image
-  const img = new Image();
-  img.src = URL.createObjectURL(page);
-  await new Promise((resolve, reject) => {
-    img.onload = resolve;
-    img.onerror = reject;
-  });
+  const img = await createImageBitmap(page);
   if (signal?.aborted) {
     throw new Error("Aborted");
   }
 
-  canvas.width = img.width;
-  canvas.height = img.height;
+  const width = img.width;
+  const height = img.height;
+
+  canvas.width = width;
+  canvas.height = height;
 
   // fill white
   ctx.fillStyle = "white";
-  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.fillRect(0, 0, width, height);
 
   // add blur
   ctx.filter = `blur(${config.blur}px)`;
@@ -41,11 +41,11 @@ export async function scanCanvas(
   }
 
   // rotate
-  ctx.translate(canvas.width / 2, canvas.height / 2);
+  ctx.translate(width / 2, height / 2);
   ctx.rotate(
     ((config.rotate + config.rotate_var * Math.random()) * Math.PI) / 180
   );
-  ctx.translate(-canvas.width / 2, -canvas.height / 2);
+  ctx.translate(-width / 2, -height / 2);
 
   ctx.drawImage(img, 0, 0);
 
@@ -62,18 +62,12 @@ export async function scanCanvas(
     }
 
     // add noise
-    ctx.drawImage(
-      noiseImg,
-      -canvas.width,
-      -canvas.height,
-      canvas.width * 2,
-      canvas.height * 2
-    );
+    ctx.drawImage(noiseImg, -width, -height, width * 2, height * 2);
   }
 
   if (config.border) {
     ctx.strokeStyle = "black";
     ctx.lineWidth = 1;
-    ctx.strokeRect(0, 0, canvas.width, canvas.height);
+    ctx.strokeRect(0, 0, width, height);
   }
 }
diff --git a/src/utils/canvas-scan/scanner.ts b/src/utils/canvas-scan/scanner.ts
index cd701d3e..45dc51cb 100644
--- a/src/utils/canvas-scan/scanner.ts
+++ b/src/utils/canvas-scan/scanner.ts
@@ -35,24 +35,34 @@ export class CanvasScanner implements ScanRenderer {
       throw new Error("Aborted");
     }
 
-    const canvas = document.createElement("canvas");
-    await scanCanvas(canvas, image, this.config);
-    if (options?.signal?.aborted) {
-      throw new Error("Aborted");
-    }
+    if ("OffscreenCanvas" in window) {
+      // TODO: use web worker
+      const canvas = new OffscreenCanvas(10, 10);
+      await scanCanvas(canvas, image, this.config);
+      const blob = await canvas.convertToBlob();
+      const height = canvas.height;
+      const width = canvas.width;
+      return { blob, height, width };
+    } else {
+      const canvas = document.createElement("canvas");
+      await scanCanvas(canvas, image, this.config);
+      if (options?.signal?.aborted) {
+        throw new Error("Aborted");
+      }
 
-    const blob = await new Promise<Blob>((resolve, reject) =>
-      canvas.toBlob((blob) => {
-        if (blob) {
-          resolve(blob);
-        } else {
-          reject(new Error("Canvas to Blob failed"));
-        }
-      }, this.config.output_format)
-    );
-    const height = canvas.height;
-    const width = canvas.width;
-    canvas.remove();
-    return { blob, height, width };
+      const blob = await new Promise<Blob>((resolve, reject) =>
+        canvas.toBlob((blob) => {
+          if (blob) {
+            resolve(blob);
+          } else {
+            reject(new Error("Canvas to Blob failed"));
+          }
+        }, this.config.output_format)
+      );
+      const height = canvas.height;
+      const width = canvas.width;
+      canvas.remove();
+      return { blob, height, width };
+    }
   }
 }

From 3068a8aec1936253f9a043e159a0f7ceb68b1df7 Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Tue, 14 Nov 2023 14:52:53 +0800
Subject: [PATCH 21/32] make ts happy

---
 src/components/pdf-upload/PDFUpload.vue | 4 +---
 src/utils/pdf-new/PDF.ts                | 4 ++++
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/pdf-upload/PDFUpload.vue b/src/components/pdf-upload/PDFUpload.vue
index a25871fc..bff4c105 100644
--- a/src/components/pdf-upload/PDFUpload.vue
+++ b/src/components/pdf-upload/PDFUpload.vue
@@ -25,12 +25,10 @@
 import { NButton, NIcon, NText, NEllipsis, NCard } from "naive-ui";
 import { Attach16Regular } from "@vicons/fluent";
 import { fileOpen } from "browser-fs-access";
-
+import { useVModel } from "@vueuse/core";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n();
 
-import { useVModel } from "@vueuse/core";
-
 const props = defineProps<{
   pdf: File | undefined;
 }>();
diff --git a/src/utils/pdf-new/PDF.ts b/src/utils/pdf-new/PDF.ts
index fd7d6cf2..b9ae07f6 100644
--- a/src/utils/pdf-new/PDF.ts
+++ b/src/utils/pdf-new/PDF.ts
@@ -52,6 +52,10 @@ export class PDF implements PDFRenderer {
 
   async getNumPages(): Promise<number> {
     await this.initPromise;
+    if (!this.pdfDocument) {
+      throw new Error("PDF document is not initialized");
+    }
+
     return this.pdfDocument.numPages;
   }
 

From 4e59c43b6e723e54cf04f006cc89aba5464d139c Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Tue, 14 Nov 2023 14:54:31 +0800
Subject: [PATCH 22/32] make ts happy

---
 src/utils/canvas-scan/scanner.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/utils/canvas-scan/scanner.ts b/src/utils/canvas-scan/scanner.ts
index 45dc51cb..4b8bfe7a 100644
--- a/src/utils/canvas-scan/scanner.ts
+++ b/src/utils/canvas-scan/scanner.ts
@@ -37,6 +37,8 @@ export class CanvasScanner implements ScanRenderer {
 
     if ("OffscreenCanvas" in window) {
       // TODO: use web worker
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       const canvas = new OffscreenCanvas(10, 10);
       await scanCanvas(canvas, image, this.config);
       const blob = await canvas.convertToBlob();

From ea838f381a486598897ef23a65d42a0fb5f06581 Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Tue, 14 Nov 2023 14:56:19 +0800
Subject: [PATCH 23/32] canvas.convertToBlob use output format

---
 src/utils/canvas-scan/scanner.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/utils/canvas-scan/scanner.ts b/src/utils/canvas-scan/scanner.ts
index 4b8bfe7a..2327b475 100644
--- a/src/utils/canvas-scan/scanner.ts
+++ b/src/utils/canvas-scan/scanner.ts
@@ -41,7 +41,9 @@ export class CanvasScanner implements ScanRenderer {
       // @ts-ignore
       const canvas = new OffscreenCanvas(10, 10);
       await scanCanvas(canvas, image, this.config);
-      const blob = await canvas.convertToBlob();
+      const blob = await canvas.convertToBlob({
+        type: this.config.output_format,
+      });
       const height = canvas.height;
       const width = canvas.width;
       return { blob, height, width };

From faa0efba6360ce32f2338b1d24c161034d927dad Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Tue, 14 Nov 2023 14:59:44 +0800
Subject: [PATCH 24/32] update output filename

---
 src/views/CanvasScanView.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/views/CanvasScanView.vue b/src/views/CanvasScanView.vue
index 1cadd93b..eaa1e376 100644
--- a/src/views/CanvasScanView.vue
+++ b/src/views/CanvasScanView.vue
@@ -93,8 +93,11 @@ const downloadSave = async () => {
   const pdfBlob = await save();
   const url = URL.createObjectURL(pdfBlob);
   const link = document.createElement("a");
+  const originalFilename = pdf.value?.name ?? "doc.pdf";
+  const filename = `${originalFilename.replace(/\.[^/.]+$/, "")}-scan.pdf`;
+
   link.href = url;
-  link.download = "scanned.pdf";
+  link.download = filename;
   link.click();
   URL.revokeObjectURL(url);
 };

From 6312dc3654ef92293d3ff83a6cfa140b39e3b79e Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Tue, 14 Nov 2023 15:14:36 +0800
Subject: [PATCH 25/32] rename example pdf file

---
 src/views/CanvasScanView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/CanvasScanView.vue b/src/views/CanvasScanView.vue
index eaa1e376..64e9f78c 100644
--- a/src/views/CanvasScanView.vue
+++ b/src/views/CanvasScanView.vue
@@ -63,7 +63,7 @@ const pdf = ref<File | undefined>(undefined);
 onMounted(async () => {
   const response = await fetch(PDFURL);
   const blob = await response.blob();
-  pdf.value = new File([blob], "test.pdf");
+  pdf.value = new File([blob], "example.pdf");
 });
 
 const config = ref<ScanConfig>(defaultConfig);

From 766a37561722de8a4cb96fa1b40de821d0a6a322 Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Tue, 14 Nov 2023 15:19:27 +0800
Subject: [PATCH 26/32] fix image preview aspect-ratio

---
 src/components/canvas-scan/preview/ImagePreview.vue   | 9 ++++++++-
 src/components/canvas-scan/preview/PreviewCompare.vue | 4 ++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/canvas-scan/preview/ImagePreview.vue b/src/components/canvas-scan/preview/ImagePreview.vue
index c39b5513..45b5aff2 100644
--- a/src/components/canvas-scan/preview/ImagePreview.vue
+++ b/src/components/canvas-scan/preview/ImagePreview.vue
@@ -1,6 +1,8 @@
 <template>
   <n-image :src="imageURL" v-if="imageURL" />
-  <n-skeleton v-else height="70vh" />
+  <div v-else class="image-placeholder">
+    <n-skeleton width="100%" height="100%" />
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -22,4 +24,9 @@ const imageURL = useObjectUrl(image);
   width: 100%;
   height: 100%;
 }
+
+.image-placeholder {
+  width: 100%;
+  aspect-ratio: 409.88 / 530.42;
+}
 </style>
diff --git a/src/components/canvas-scan/preview/PreviewCompare.vue b/src/components/canvas-scan/preview/PreviewCompare.vue
index 2d6a7ba8..f3436bb2 100644
--- a/src/components/canvas-scan/preview/PreviewCompare.vue
+++ b/src/components/canvas-scan/preview/PreviewCompare.vue
@@ -2,10 +2,10 @@
   <n-space vertical>
     <SideBySidePreview>
       <template #pdf>
-        <ImagePreview :image="image.blob" v-if="image" />
+        <ImagePreview :image="image?.blob" />
       </template>
       <template #scan>
-        <ImagePreview :image="scanImage.blob" v-if="scanImage" />
+        <ImagePreview :image="scanImage?.blob" />
       </template>
     </SideBySidePreview>
     <PreviewPagination

From 2098e96dfde44a5be13efa39e71051a638648962 Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Tue, 14 Nov 2023 15:21:16 +0800
Subject: [PATCH 27/32] update defaultConfig

---
 src/utils/canvas-scan/types.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils/canvas-scan/types.ts b/src/utils/canvas-scan/types.ts
index cdf97f64..87bb94fb 100644
--- a/src/utils/canvas-scan/types.ts
+++ b/src/utils/canvas-scan/types.ts
@@ -15,8 +15,8 @@ export const defaultConfig: ScanConfig = {
   rotate: 1,
   rotate_var: 0.5,
   colorspace: "gray",
-  blur: 0.5,
-  noise: 0.25,
+  blur: 0.3,
+  noise: 0.1,
   border: false,
   scale: 2,
   output_format: "image/jpeg",

From ed0c2eb6a3a43aa92e6c7396eec74c076eced34d Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Tue, 14 Nov 2023 15:28:06 +0800
Subject: [PATCH 28/32] update pdf-upload

---
 src/components/pdf-upload/PDFUpload.vue | 49 ++++++++++++++-----------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/src/components/pdf-upload/PDFUpload.vue b/src/components/pdf-upload/PDFUpload.vue
index bff4c105..edcac19e 100644
--- a/src/components/pdf-upload/PDFUpload.vue
+++ b/src/components/pdf-upload/PDFUpload.vue
@@ -1,29 +1,36 @@
 <template>
-  <n-card
-    :segmented="{
-      content: true,
-      footer: 'soft',
-    }"
-  >
-    <n-button text @click="onClick">
-      <template #icon>
-        <n-icon>
-          <Attach16Regular />
-        </n-icon>
-      </template>
-      <n-text v-if="pdf">
-        <n-ellipsis style="max-width: 14em">{{ pdf.name }}</n-ellipsis>
-      </n-text>
-      <n-text v-else>
-        {{ t("settings.pdfSelectLabel") }}
-      </n-text>
-    </n-button>
+  <n-card>
+    <n-space vertical>
+      <n-button text @click="onClick">
+        <template #icon>
+          <n-icon>
+            <Attach16Regular />
+          </n-icon>
+        </template>
+        <n-text v-if="pdf">
+          <n-ellipsis style="max-width: 14em">{{ pdf.name }}</n-ellipsis>
+        </n-text>
+        <n-text v-else>
+          {{ t("settings.pdfSelectLabel") }}
+        </n-text>
+      </n-button>
+      <n-button text @click="onClick">
+        <template #icon>
+          <n-icon>
+            <FolderOpen16Regular />
+          </n-icon>
+        </template>
+        <n-text>
+          {{ t("settings.pdfSelectLabel") }}
+        </n-text>
+      </n-button>
+    </n-space>
   </n-card>
 </template>
 
 <script lang="ts" setup>
-import { NButton, NIcon, NText, NEllipsis, NCard } from "naive-ui";
-import { Attach16Regular } from "@vicons/fluent";
+import { NButton, NIcon, NText, NEllipsis, NCard, NSpace } from "naive-ui";
+import { Attach16Regular, FolderOpen16Regular } from "@vicons/fluent";
 import { fileOpen } from "browser-fs-access";
 import { useVModel } from "@vueuse/core";
 import { useI18n } from "vue-i18n";

From 988fe4c1899bbeef58ed9c135b141be6e34d491e Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Tue, 14 Nov 2023 15:38:45 +0800
Subject: [PATCH 29/32] add brightness and contrast

---
 .../canvas-scan-settings/ScanSettingsCard.vue |  4 ++
 .../settings/BrightnessSetting.vue            | 43 +++++++++++++++++++
 .../settings/ContrastSetting.vue              | 43 +++++++++++++++++++
 src/locale/en/settings.ts                     |  2 +
 src/locale/zh-CN/settings.ts                  |  2 +
 src/utils/canvas-scan/scan-canvas.ts          |  6 +++
 src/utils/canvas-scan/types.ts                |  4 ++
 7 files changed, 104 insertions(+)
 create mode 100644 src/components/canvas-scan/canvas-scan-settings/settings/BrightnessSetting.vue
 create mode 100644 src/components/canvas-scan/canvas-scan-settings/settings/ContrastSetting.vue

diff --git a/src/components/canvas-scan/canvas-scan-settings/ScanSettingsCard.vue b/src/components/canvas-scan/canvas-scan-settings/ScanSettingsCard.vue
index 76cef796..4add73d4 100644
--- a/src/components/canvas-scan/canvas-scan-settings/ScanSettingsCard.vue
+++ b/src/components/canvas-scan/canvas-scan-settings/ScanSettingsCard.vue
@@ -23,6 +23,8 @@
 
         <RotateSetting v-model:rotate="config.rotate" />
         <RotateVarianceSetting v-model:rotate_var="config.rotate_var" />
+        <BrightnessSetting v-model:brightness="config.brightness" />
+        <ContrastSetting v-model:contrast="config.contrast" />
         <BlurSetting v-model:blur="config.blur" />
         <NoiseSetting v-model:noise="config.noise" />
         <ScaleSetting v-model:scale="config.scale" />
@@ -43,6 +45,8 @@ import ColorspaceSetting from "./settings/ColorspaceSetting.vue";
 import BlurSetting from "./settings/BlurSetting.vue";
 import NoiseSetting from "./settings/NoiseSetting.vue";
 import ScaleSetting from "./settings/ScaleSetting.vue";
+import BrightnessSetting from "./settings/BrightnessSetting.vue";
+import ContrastSetting from "./settings/ContrastSetting.vue";
 
 import type { ScanConfig } from "@/utils/canvas-scan";
 import { useI18n } from "vue-i18n";
diff --git a/src/components/canvas-scan/canvas-scan-settings/settings/BrightnessSetting.vue b/src/components/canvas-scan/canvas-scan-settings/settings/BrightnessSetting.vue
new file mode 100644
index 00000000..559ccdc6
--- /dev/null
+++ b/src/components/canvas-scan/canvas-scan-settings/settings/BrightnessSetting.vue
@@ -0,0 +1,43 @@
+<template>
+  <n-form-item :label="t('settings.brightness')" :show-feedback="false">
+    <template #label>
+      <span :style="style">
+        {{ t("settings.brightness") }}
+      </span>
+    </template>
+    <n-slider
+      v-model:value="brightness_computed"
+      :max="2"
+      :min="0"
+      :step="0.01"
+    />
+  </n-form-item>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import { NFormItem, NSlider } from "naive-ui";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+type brightnessType = number;
+
+const props = defineProps<{
+  brightness: brightnessType;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:brightness", value: brightnessType): void;
+}>();
+
+const brightness_computed = computed({
+  get: () => props.brightness,
+  set: (value) => emit("update:brightness", value),
+});
+
+const style = computed(() => {
+  return {
+    filter: `brightness(${brightness_computed.value})`,
+  };
+});
+</script>
diff --git a/src/components/canvas-scan/canvas-scan-settings/settings/ContrastSetting.vue b/src/components/canvas-scan/canvas-scan-settings/settings/ContrastSetting.vue
new file mode 100644
index 00000000..91734928
--- /dev/null
+++ b/src/components/canvas-scan/canvas-scan-settings/settings/ContrastSetting.vue
@@ -0,0 +1,43 @@
+<template>
+  <n-form-item :label="t('settings.contrast')" :show-feedback="false">
+    <template #label>
+      <span :style="style">
+        {{ t("settings.contrast") }}
+      </span>
+    </template>
+    <n-slider
+      v-model:value="contrast_computed"
+      :max="2"
+      :min="0"
+      :step="0.01"
+    />
+  </n-form-item>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import { NFormItem, NSlider } from "naive-ui";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+type contrastType = number;
+
+const props = defineProps<{
+  contrast: contrastType;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:contrast", value: contrastType): void;
+}>();
+
+const contrast_computed = computed({
+  get: () => props.contrast,
+  set: (value) => emit("update:contrast", value),
+});
+
+const style = computed(() => {
+  return {
+    filter: `contrast(${contrast_computed.value})`,
+  };
+});
+</script>
diff --git a/src/locale/en/settings.ts b/src/locale/en/settings.ts
index 221727a9..c42dcf93 100644
--- a/src/locale/en/settings.ts
+++ b/src/locale/en/settings.ts
@@ -18,4 +18,6 @@ export const settings = {
   pdfSelectLabel: "Select PDF",
   pdfNoSelectMessage: "No PDF selected",
   scale: "Resolution",
+  brightness: "Brightness",
+  contrast: "Contrast",
 };
diff --git a/src/locale/zh-CN/settings.ts b/src/locale/zh-CN/settings.ts
index a598c2a4..7c820960 100644
--- a/src/locale/zh-CN/settings.ts
+++ b/src/locale/zh-CN/settings.ts
@@ -18,4 +18,6 @@ export const settings = {
   pdfSelectLabel: "选择 PDF 文件",
   pdfNoSelectMessage: "尚未选择 PDF 文件",
   scale: "分辨率",
+  brightness: "亮度",
+  contrast: "对比度",
 };
diff --git a/src/utils/canvas-scan/scan-canvas.ts b/src/utils/canvas-scan/scan-canvas.ts
index 0f6affff..3c36e44d 100644
--- a/src/utils/canvas-scan/scan-canvas.ts
+++ b/src/utils/canvas-scan/scan-canvas.ts
@@ -40,6 +40,12 @@ export async function scanCanvas(
     ctx.filter += " grayscale(1)";
   }
 
+  // add brightness
+  ctx.filter += ` brightness(${config.brightness})`;
+
+  // add contrast
+  ctx.filter += ` contrast(${config.contrast})`;
+
   // rotate
   ctx.translate(width / 2, height / 2);
   ctx.rotate(
diff --git a/src/utils/canvas-scan/types.ts b/src/utils/canvas-scan/types.ts
index 87bb94fb..de00b1af 100644
--- a/src/utils/canvas-scan/types.ts
+++ b/src/utils/canvas-scan/types.ts
@@ -8,6 +8,8 @@ export interface ScanConfig {
   noise: number;
   border: boolean;
   scale: number;
+  brightness: number;
+  contrast: number;
   output_format: "image/png" | "image/jpeg";
 }
 
@@ -19,5 +21,7 @@ export const defaultConfig: ScanConfig = {
   noise: 0.1,
   border: false,
   scale: 2,
+  brightness: 1,
+  contrast: 1,
   output_format: "image/jpeg",
 };

From 80e63a7482c2cebbc9e10c42279f9ba832a1a25e Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Tue, 14 Nov 2023 15:44:44 +0800
Subject: [PATCH 30/32] add display: block to image preview n-image

---
 src/components/canvas-scan/preview/ImagePreview.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/canvas-scan/preview/ImagePreview.vue b/src/components/canvas-scan/preview/ImagePreview.vue
index 45b5aff2..65180da3 100644
--- a/src/components/canvas-scan/preview/ImagePreview.vue
+++ b/src/components/canvas-scan/preview/ImagePreview.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-image :src="imageURL" v-if="imageURL" />
+  <n-image :src="imageURL" v-if="imageURL" style="display: block" />
   <div v-else class="image-placeholder">
     <n-skeleton width="100%" height="100%" />
   </div>

From baca6312e7eb6ea1e5b2fa7bd29acd3782f6c2a1 Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Tue, 14 Nov 2023 16:20:30 +0800
Subject: [PATCH 31/32] add pdf info card

---
 package-lock.json                       | 14 ++++++++++
 package.json                            |  1 +
 src/components/pdf-upload/PDFInfo.vue   | 34 +++++++++++++++++++++++++
 src/components/pdf-upload/PDFUpload.vue | 26 +++----------------
 src/views/CanvasScanView.vue            |  4 ++-
 5 files changed, 55 insertions(+), 24 deletions(-)
 create mode 100644 src/components/pdf-upload/PDFInfo.vue

diff --git a/package-lock.json b/package-lock.json
index 61447b5e..99c523ea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "browser-fs-access": "^0.29.5",
+        "filesize": "^10.1.0",
         "jspdf": "^2.5.1",
         "magica": "^0.2.17",
         "magica-re-export": "^1.0.9",
@@ -4932,6 +4933,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/filesize": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-10.1.0.tgz",
+      "integrity": "sha512-GTLKYyBSDz3nPhlLVPjPWZCnhkd9TrrRArNcy8Z+J2cqScB7h2McAzR6NBX6nYOoWafql0roY8hrocxnZBv9CQ==",
+      "engines": {
+        "node": ">= 10.4.0"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -11916,6 +11925,11 @@
         }
       }
     },
+    "filesize": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-10.1.0.tgz",
+      "integrity": "sha512-GTLKYyBSDz3nPhlLVPjPWZCnhkd9TrrRArNcy8Z+J2cqScB7h2McAzR6NBX6nYOoWafql0roY8hrocxnZBv9CQ=="
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
diff --git a/package.json b/package.json
index 17012846..c5f79275 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "browser-fs-access": "^0.29.5",
+    "filesize": "^10.1.0",
     "jspdf": "^2.5.1",
     "magica": "^0.2.17",
     "magica-re-export": "^1.0.9",
diff --git a/src/components/pdf-upload/PDFInfo.vue b/src/components/pdf-upload/PDFInfo.vue
new file mode 100644
index 00000000..bfe91853
--- /dev/null
+++ b/src/components/pdf-upload/PDFInfo.vue
@@ -0,0 +1,34 @@
+<template>
+  <n-card>
+    <n-space vertical>
+      <div class="entry">
+        <n-icon class="icon" :component="Attach16Regular" />
+        <n-ellipsis style="max-width: 14em" :line-clamp="3">{{
+          pdf.name
+        }}</n-ellipsis>
+      </div>
+      <div class="entry">
+        <n-icon class="icon" :component="ResizeLarge20Regular" />
+        <span>{{ filesize(pdf.size) }}</span>
+      </div>
+    </n-space>
+  </n-card>
+</template>
+
+<script lang="ts" setup>
+import { NIcon, NEllipsis, NCard, NSpace } from "naive-ui";
+import { Attach16Regular, ResizeLarge20Regular } from "@vicons/fluent";
+import { filesize } from "filesize";
+
+defineProps<{
+  pdf: File;
+}>();
+</script>
+
+<style scoped>
+.entry {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+}
+</style>
diff --git a/src/components/pdf-upload/PDFUpload.vue b/src/components/pdf-upload/PDFUpload.vue
index edcac19e..6bc4e1d3 100644
--- a/src/components/pdf-upload/PDFUpload.vue
+++ b/src/components/pdf-upload/PDFUpload.vue
@@ -1,19 +1,6 @@
 <template>
   <n-card>
     <n-space vertical>
-      <n-button text @click="onClick">
-        <template #icon>
-          <n-icon>
-            <Attach16Regular />
-          </n-icon>
-        </template>
-        <n-text v-if="pdf">
-          <n-ellipsis style="max-width: 14em">{{ pdf.name }}</n-ellipsis>
-        </n-text>
-        <n-text v-else>
-          {{ t("settings.pdfSelectLabel") }}
-        </n-text>
-      </n-button>
       <n-button text @click="onClick">
         <template #icon>
           <n-icon>
@@ -29,29 +16,22 @@
 </template>
 
 <script lang="ts" setup>
-import { NButton, NIcon, NText, NEllipsis, NCard, NSpace } from "naive-ui";
-import { Attach16Regular, FolderOpen16Regular } from "@vicons/fluent";
+import { NButton, NIcon, NText, NCard, NSpace } from "naive-ui";
+import { FolderOpen16Regular } from "@vicons/fluent";
 import { fileOpen } from "browser-fs-access";
-import { useVModel } from "@vueuse/core";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n();
 
-const props = defineProps<{
-  pdf: File | undefined;
-}>();
-
 const emit = defineEmits<{
   (e: "update:pdf", info: File | undefined): void;
 }>();
 
-const pdf = useVModel(props, "pdf", emit);
-
 async function onClick() {
   const file = await fileOpen({
     description: "PDF Files",
     mimeTypes: ["application/pdf"],
     extensions: [".pdf"],
   });
-  pdf.value = file;
+  emit("update:pdf", file);
 }
 </script>
diff --git a/src/views/CanvasScanView.vue b/src/views/CanvasScanView.vue
index 64e9f78c..d59708b4 100644
--- a/src/views/CanvasScanView.vue
+++ b/src/views/CanvasScanView.vue
@@ -12,7 +12,8 @@
     >
       <n-grid-item span="12 s:5 m:4 l:3">
         <n-space vertical>
-          <PDFUpload v-model:pdf="pdf" />
+          <PDFUpload @update:pdf="pdf = $event" />
+          <PDFInfo :pdf="pdf" v-if="pdf" />
 
           <ScanSettingsCard v-model:config="config" />
 
@@ -50,6 +51,7 @@ import PreviewCompare from "@/components/canvas-scan/preview/PreviewCompare.vue"
 import { CanvasScanner } from "@/utils/canvas-scan";
 import SaveButtonCard from "@/components/save-button/SaveButtonCard.vue";
 import { useSaveScannedPDF } from "@/composables/save-scanned-pdf";
+import PDFInfo from "@/components/pdf-upload/PDFInfo.vue";
 
 const { t } = useI18n();
 

From 839cd4f13c77a22ac01b2b70cbc767133e132256 Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Tue, 14 Nov 2023 16:32:47 +0800
Subject: [PATCH 32/32] use canvas scan as default

---
 src/router/index.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/router/index.ts b/src/router/index.ts
index a1d05ef9..6db4956b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -12,13 +12,18 @@ const router = createRouter({
     {
       path: "/scan",
       name: "scan",
-      component: () => import("@/views/ScanView.vue"),
+      component: () => import("@/views/CanvasScanView.vue"),
     },
     {
-      path: "/canvas-scan",
-      name: "canvas-scan",
+      path: "/scan-canvas",
+      name: "scan-canvas",
       component: () => import("@/views/CanvasScanView.vue"),
     },
+    {
+      path: "/scan-magica",
+      name: "scan-magica",
+      component: () => import("@/views/ScanView.vue"),
+    },
     // catch all redirect to /
     {
       path: "/:pathMatch(.*)*",