From 4f0f6729c4cb7531a2b714b2a33cdf7a0d308fb8 Mon Sep 17 00:00:00 2001
From: Seedgou <i@zczc.cz>
Date: Fri, 17 Nov 2023 09:42:37 +0800
Subject: [PATCH] add feature-detect for canvas-scan

---
 src/router/index.ts                           |  2 +-
 .../canvas-scan/feature-detect.ts             | 23 +++++++++++++++++++
 src/utils/scan-renderer/canvas-scan/index.ts  |  1 +
 src/views/ScanViewFeatureDetectView.vue       | 12 ++++++++++
 4 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 src/utils/scan-renderer/canvas-scan/feature-detect.ts
 create mode 100644 src/views/ScanViewFeatureDetectView.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index 3fcab072..810f8d7b 100644
--- a/src/router/index.ts
+++ b/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",
diff --git a/src/utils/scan-renderer/canvas-scan/feature-detect.ts b/src/utils/scan-renderer/canvas-scan/feature-detect.ts
new file mode 100644
index 00000000..d9411957
--- /dev/null
+++ b/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;
+}
diff --git a/src/utils/scan-renderer/canvas-scan/index.ts b/src/utils/scan-renderer/canvas-scan/index.ts
index c90e612c..fe7717e0 100644
--- a/src/utils/scan-renderer/canvas-scan/index.ts
+++ b/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";
diff --git a/src/views/ScanViewFeatureDetectView.vue b/src/views/ScanViewFeatureDetectView.vue
new file mode 100644
index 00000000..58c51ce1
--- /dev/null
+++ b/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>