add feature-detect for canvas-scan

src/router/index.ts

@@ -12,7 +12,7 @@ const router = createRouter({
     {
       path: "/scan",
       name: "scan",
-      component: () => import("@/views/MagicaScanView.vue"),
+      component: () => import("@/views/ScanViewFeatureDetectView.vue"),
     },
     {
       path: "/scan-canvas",

src/utils/scan-renderer/canvas-scan/feature-detect.ts

@@ -0,0 +1,23 @@
+export function featureDetect(): boolean {
+  const canvasMethods = [
+    "fillStyle",
+    "fillRect",
+    "filter",
+    "translate",
+    "rotate",
+    "drawImage",
+    "strokeStyle",
+    "lineWidth",
+    "strokeRect",
+  ];
+
+  // check CanvasRenderingContext2D.prototype
+  const canvasProto = CanvasRenderingContext2D.prototype;
+  for (const method of canvasMethods) {
+    if (!(method in canvasProto)) {
+      return false;
+    }
+  }
+
+  return true;
+}

src/utils/scan-renderer/canvas-scan/index.ts

@@ -1,2 +1,3 @@
 export { type ScanConfig, defaultConfig, colorspaces } from "./types";
 export { CanvasScanner } from "./scanner";
+export { featureDetect } from "./feature-detect";

src/views/ScanViewFeatureDetectView.vue

@@ -0,0 +1,12 @@
+<template>
+  <CanvasScanView v-if="supportCanvasScan" />
+  <MagicaScanView v-else />
+</template>
+
+<script lang="ts" setup>
+import { featureDetect } from "@/utils/scan-renderer/canvas-scan";
+import CanvasScanView from "./CanvasScanView.vue";
+import MagicaScanView from "./MagicaScanView.vue";
+
+const supportCanvasScan = featureDetect();
+</script>