add scan effect using <canvas>

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",

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>

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>

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>

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>

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>

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>