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/canvas-scan/canvas-scan-settings/ScanSettingsCard.vue b/src/components/canvas-scan/canvas-scan-settings/ScanSettingsCard.vue
new file mode 100644
index 00000000..4add73d4
--- /dev/null
+++ b/src/components/canvas-scan/canvas-scan-settings/ScanSettingsCard.vue
@@ -0,0 +1,66 @@
+<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" />
+        <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" />
+      </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 BrightnessSetting from "./settings/BrightnessSetting.vue";
+import ContrastSetting from "./settings/ContrastSetting.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/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/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/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/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
diff --git a/src/components/canvas-scan/preview/ImagePreview.vue b/src/components/canvas-scan/preview/ImagePreview.vue
new file mode 100644
index 00000000..65180da3
--- /dev/null
+++ b/src/components/canvas-scan/preview/ImagePreview.vue
@@ -0,0 +1,32 @@
+<template>
+  <n-image :src="imageURL" v-if="imageURL" style="display: block" />
+  <div v-else class="image-placeholder">
+    <n-skeleton width="100%" height="100%" />
+  </div>
+</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%;
+}
+
+.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
new file mode 100644
index 00000000..f3436bb2
--- /dev/null
+++ b/src/components/canvas-scan/preview/PreviewCompare.vue
@@ -0,0 +1,104 @@
+<template>
+  <n-space vertical>
+    <SideBySidePreview>
+      <template #pdf>
+        <ImagePreview :image="image?.blob" />
+      </template>
+      <template #scan>
+        <ImagePreview :image="scanImage?.blob" />
+      </template>
+    </SideBySidePreview>
+    <PreviewPagination
+      v-model:page="page"
+      :numPages="numPages"
+      v-if="numPages >= 2"
+    />
+  </n-space>
+</template>
+
+<script lang="ts" setup>
+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);
+
+interface PDFRenderer {
+  renderPage(
+    page: number,
+    scale: number
+  ): Promise<{
+    blob: Blob;
+    height: number;
+    width: number;
+  }>;
+  getNumPages(): Promise<number>;
+}
+
+interface ScanRenderer {
+  renderPage(
+    image: Blob,
+    options?: {
+      signal?: AbortSignal;
+    }
+  ): Promise<{
+    blob: Blob;
+    height: number;
+    width: number;
+  }>;
+}
+
+const props = defineProps<{
+  pdfRenderer?: PDFRenderer;
+  scanRenderer?: ScanRenderer;
+  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,
+  };
+});
+
+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,
+    {
+      signal: controller.signal,
+    }
+  );
+  return {
+    blob,
+    height,
+    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>
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/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
new file mode 100644
index 00000000..6bc4e1d3
--- /dev/null
+++ b/src/components/pdf-upload/PDFUpload.vue
@@ -0,0 +1,37 @@
+<template>
+  <n-card>
+    <n-space vertical>
+      <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, NCard, NSpace } from "naive-ui";
+import { FolderOpen16Regular } from "@vicons/fluent";
+import { fileOpen } from "browser-fs-access";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+const emit = defineEmits<{
+  (e: "update:pdf", info: File | undefined): void;
+}>();
+
+async function onClick() {
+  const file = await fileOpen({
+    description: "PDF Files",
+    mimeTypes: ["application/pdf"],
+    extensions: [".pdf"],
+  });
+  emit("update:pdf", file);
+}
+</script>
diff --git a/src/components/save-button/SaveButtonCard.vue b/src/components/save-button/SaveButtonCard.vue
new file mode 100644
index 00000000..6159bf3d
--- /dev/null
+++ b/src/components/save-button/SaveButtonCard.vue
@@ -0,0 +1,48 @@
+<template>
+  <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>
+          <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";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+defineProps<{
+  progress?: number;
+  saving?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: "save"): void;
+}>();
+</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>
diff --git a/src/composables/save-scanned-pdf/index.ts b/src/composables/save-scanned-pdf/index.ts
new file mode 100644
index 00000000..4fd1e1f5
--- /dev/null
+++ b/src/composables/save-scanned-pdf/index.ts
@@ -0,0 +1,85 @@
+import type { Ref } from "vue";
+import { get } from "@vueuse/core";
+import { ref, computed } from "vue";
+
+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 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 () => {
+    try {
+      finishedPages.value = 0;
+      totalPages.value = 0;
+      saving.value = true;
+
+      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();
+
+      totalPages.value = numPages;
+
+      // 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);
+
+      return pdfDocument;
+    } catch (e) {
+      console.error(e);
+      throw e;
+    } finally {
+      saving.value = false;
+    }
+  };
+
+  return { save, progress, saving };
+}
diff --git a/src/locale/en/settings.ts b/src/locale/en/settings.ts
index d70d6d2a..c42dcf93 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",
@@ -17,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 5eb27664..7c820960 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: "边框",
@@ -17,4 +18,6 @@ export const settings = {
   pdfSelectLabel: "选择 PDF 文件",
   pdfNoSelectMessage: "尚未选择 PDF 文件",
   scale: "分辨率",
+  brightness: "亮度",
+  contrast: "对比度",
 };
diff --git a/src/router/index.ts b/src/router/index.ts
index cb03cf86..6db4956b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -12,6 +12,16 @@ const router = createRouter({
     {
       path: "/scan",
       name: "scan",
+      component: () => import("@/views/CanvasScanView.vue"),
+    },
+    {
+      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 /
diff --git a/src/utils/canvas-scan/index.ts b/src/utils/canvas-scan/index.ts
new file mode 100644
index 00000000..c90e612c
--- /dev/null
+++ b/src/utils/canvas-scan/index.ts
@@ -0,0 +1,2 @@
+export { type ScanConfig, defaultConfig, colorspaces } from "./types";
+export { CanvasScanner } from "./scanner";
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/scan-canvas.ts b/src/utils/canvas-scan/scan-canvas.ts
new file mode 100644
index 00000000..3c36e44d
--- /dev/null
+++ b/src/utils/canvas-scan/scan-canvas.ts
@@ -0,0 +1,79 @@
+import type { ScanConfig } from "./types";
+import { getNoiseSVG } from "./noise-svg";
+
+export async function scanCanvas(
+  canvas_: HTMLCanvasElement | OffscreenCanvas,
+  page: Blob,
+  config: ScanConfig,
+  signal?: AbortSignal
+): Promise<void> {
+  if (signal?.aborted) {
+    throw new Error("Aborted");
+  }
+
+  // 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 = await createImageBitmap(page);
+  if (signal?.aborted) {
+    throw new Error("Aborted");
+  }
+
+  const width = img.width;
+  const height = img.height;
+
+  canvas.width = width;
+  canvas.height = height;
+
+  // fill white
+  ctx.fillStyle = "white";
+  ctx.fillRect(0, 0, width, height);
+
+  // add blur
+  ctx.filter = `blur(${config.blur}px)`;
+  if (config.colorspace === "gray") {
+    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(
+    ((config.rotate + config.rotate_var * Math.random()) * Math.PI) / 180
+  );
+  ctx.translate(-width / 2, -height / 2);
+
+  ctx.drawImage(img, 0, 0);
+
+  if (config.noise !== 0) {
+    const noiseSVG = getNoiseSVG(config.noise);
+    const noiseSVGBlob = new Blob([noiseSVG], { type: "image/svg+xml" });
+    const noiseSVGURL = URL.createObjectURL(noiseSVGBlob);
+
+    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, -width, -height, width * 2, height * 2);
+  }
+
+  if (config.border) {
+    ctx.strokeStyle = "black";
+    ctx.lineWidth = 1;
+    ctx.strokeRect(0, 0, width, height);
+  }
+}
diff --git a/src/utils/canvas-scan/scanner.ts b/src/utils/canvas-scan/scanner.ts
new file mode 100644
index 00000000..2327b475
--- /dev/null
+++ b/src/utils/canvas-scan/scanner.ts
@@ -0,0 +1,72 @@
+import { scanCanvas } from "./scan-canvas";
+import type { ScanConfig } from "./types";
+
+interface ScanRenderer {
+  renderPage(
+    image: Blob,
+    options?: {
+      signal?: AbortSignal;
+    }
+  ): Promise<{
+    blob: Blob;
+    height: number;
+    width: number;
+  }>;
+}
+
+export class CanvasScanner implements ScanRenderer {
+  config: ScanConfig;
+
+  constructor(config: ScanConfig) {
+    this.config = config;
+  }
+
+  async renderPage(
+    image: Blob,
+    options?: {
+      signal?: AbortSignal;
+    }
+  ): Promise<{
+    blob: Blob;
+    height: number;
+    width: number;
+  }> {
+    if (options?.signal?.aborted) {
+      throw new Error("Aborted");
+    }
+
+    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({
+        type: this.config.output_format,
+      });
+      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 };
+    }
+  }
+}
diff --git a/src/utils/canvas-scan/types.ts b/src/utils/canvas-scan/types.ts
new file mode 100644
index 00000000..de00b1af
--- /dev/null
+++ b/src/utils/canvas-scan/types.ts
@@ -0,0 +1,27 @@
+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;
+  brightness: number;
+  contrast: number;
+  output_format: "image/png" | "image/jpeg";
+}
+
+export const defaultConfig: ScanConfig = {
+  rotate: 1,
+  rotate_var: 0.5,
+  colorspace: "gray",
+  blur: 0.3,
+  noise: 0.1,
+  border: false,
+  scale: 2,
+  brightness: 1,
+  contrast: 1,
+  output_format: "image/jpeg",
+};
diff --git a/src/utils/pdf-new/PDF.ts b/src/utils/pdf-new/PDF.ts
new file mode 100644
index 00000000..b9ae07f6
--- /dev/null
+++ b/src/utils/pdf-new/PDF.ts
@@ -0,0 +1,122 @@
+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;
+    if (!this.pdfDocument) {
+      throw new Error("PDF document is not initialized");
+    }
+
+    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}`);
+}
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;
+}
diff --git a/src/views/CanvasScanView.vue b/src/views/CanvasScanView.vue
new file mode 100644
index 00000000..d59708b4
--- /dev/null
+++ b/src/views/CanvasScanView.vue
@@ -0,0 +1,106 @@
+<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">
+        <n-space vertical>
+          <PDFUpload @update:pdf="pdf = $event" />
+          <PDFInfo :pdf="pdf" v-if="pdf" />
+
+          <ScanSettingsCard v-model:config="config" />
+
+          <SaveButtonCard
+            @save="downloadSave"
+            :progress="progress"
+            :saving="saving"
+          />
+        </n-space>
+      </n-grid-item>
+      <n-grid-item span="12 s:7 m:8 l:9">
+        <PreviewCompare
+          :pdfRenderer="pdfRenderer"
+          :scanRenderer="scanRenderer"
+          :scale="config.scale"
+        />
+      </n-grid-item>
+    </n-grid>
+  </MainContainer>
+</template>
+
+<script lang="ts" setup>
+import { NGrid, NGridItem, NSpace } from "naive-ui";
+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, watch } from "vue";
+import PDFURL from "@/assets/examples/pdfs/test.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";
+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();
+
+useHead({
+  title: t("base.scanTitle") + " - " + t("base.title"),
+  meta: [{ name: "description", content: t("base.description") }],
+});
+
+const pdf = ref<File | undefined>(undefined);
+
+onMounted(async () => {
+  const response = await fetch(PDFURL);
+  const blob = await response.blob();
+  pdf.value = new File([blob], "example.pdf");
+});
+
+const config = ref<ScanConfig>(defaultConfig);
+const pdfRenderer = computed(() => {
+  if (!pdf.value) return;
+
+  return new PDF(pdf.value);
+});
+
+const scanRenderer = ref(new CanvasScanner(config.value));
+watch(
+  config,
+  (newConfig) => {
+    scanRenderer.value = new CanvasScanner(newConfig);
+  },
+  { deep: true }
+);
+
+const scale = computed(() => config.value.scale);
+
+const { save, progress, saving } = useSaveScannedPDF(
+  pdfRenderer,
+  scanRenderer,
+  scale
+);
+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 = filename;
+  link.click();
+  URL.revokeObjectURL(url);
+};
+</script>