From a68e7502763b4707f67de0ab488eb14991b3b18f Mon Sep 17 00:00:00 2001
From: zadit biasa aja <75159257+everythingonblack@users.noreply.github.com>
Date: Tue, 1 Jul 2025 18:41:41 +0000
Subject: [PATCH] ok
---
package-lock.json | 15 ++++++
package.json | 1 +
public/index.html | 1 +
src/KTPScanner.js | 116 +++++++++++++++++-----------------------------
4 files changed, 60 insertions(+), 73 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 274c3b3..e1bf11e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.3.0",
"@testing-library/user-event": "^13.5.0",
+ "js-levenshtein": "^1.1.6",
"pixelmatch": "^7.1.0",
"react": "^19.1.0",
"react-dom": "^19.1.0",
@@ -10234,6 +10235,14 @@
"jiti": "bin/jiti.js"
}
},
+ "node_modules/js-levenshtein": {
+ "version": "1.1.6",
+ "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
+ "integrity": "sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
"node_modules/js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -14101,6 +14110,12 @@
"node": ">= 0.8.0"
}
},
+ "node_modules/set-blocking": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+ "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+ "optional": true
+ },
"node_modules/set-cookie-parser": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
diff --git a/package.json b/package.json
index 19f1efe..e1642e0 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.3.0",
"@testing-library/user-event": "^13.5.0",
+ "js-levenshtein": "^1.1.6",
"pixelmatch": "^7.1.0",
"react": "^19.1.0",
"react-dom": "^19.1.0",
diff --git a/public/index.html b/public/index.html
index aa069f2..632e247 100644
--- a/public/index.html
+++ b/public/index.html
@@ -24,6 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
+
React App
diff --git a/src/KTPScanner.js b/src/KTPScanner.js
index 87fb74b..60c414b 100644
--- a/src/KTPScanner.js
+++ b/src/KTPScanner.js
@@ -1,8 +1,6 @@
import React, { useEffect, useRef, useState } from "react";
import Modal from "./Modal";
import PaginatedFormEditable from "./PaginatedFormEditable";
-import pixelmatch from "pixelmatch";
-import Tesseract from "tesseract.js";
const STORAGE_KEY = "camera_canvas_gallery";
@@ -41,35 +39,25 @@ const CameraCanvas = () => {
});
};
- const isImageSimilar = (canvasA, canvasB) => {
- const ctxA = canvasA.getContext("2d");
- const ctxB = canvasB.getContext("2d");
+ // const isImageSimilar = (canvasA, canvasB) => {
+ // const ctxA = canvasA.getContext("2d");
+ // const ctxB = canvasB.getContext("2d");
- const imgA = ctxA.getImageData(0, 0, canvasA.width, canvasA.height);
- const imgB = ctxB.getImageData(0, 0, canvasB.width, canvasB.height);
+ // const imgA = ctxA.getImageData(0, 0, canvasA.width, canvasA.height);
+ // const imgB = ctxB.getImageData(0, 0, canvasB.width, canvasB.height);
- const diffPixels = pixelmatch(
- imgA.data,
- imgB.data,
- null,
- canvasA.width,
- canvasA.height,
- { threshold: 0.5 }
- );
+ // const diffPixels = pixelmatch(
+ // imgA.data,
+ // imgB.data,
+ // null,
+ // canvasA.width,
+ // canvasA.height,
+ // { threshold: 0.5 }
+ // );
- const similarity = diffPixels / (canvasA.width * canvasA.height);
- return similarity < 0.2; // you can adjust the threshold
- };
-
- const extractTextFromCanvas = async (canvas) => {
- const dataUrl = canvas.toDataURL("image/png");
-
- const result = await Tesseract.recognize(dataUrl, "ind", {
- logger: (m) => console.log(m), // opsional: untuk melihat progress
- });
-
- return result.data.text;
- };
+ // const similarity = diffPixels / (canvasA.width * canvasA.height);
+ // return similarity < 0.2; // you can adjust the threshold
+ // };
const rectRef = useRef({
x: 0,
@@ -235,49 +223,43 @@ const CameraCanvas = () => {
const imageDataUrl = cropCanvas.toDataURL("image/png", 1.0);
setCapturedImage(imageDataUrl);
- // 👉 Load sample KTP and compare
- const sampleKtpCanvas = await loadImageToCanvas(
- "/ktp.jpeg",
- cropCanvas.width,
- cropCanvas.height
- );
-
- const isSimilar = isImageSimilar(cropCanvas, sampleKtpCanvas);
- if (isSimilar) {
- const extractedText = await extractTextFromCanvas(cropCanvas);
- console.log("OCR Result:", extractedText);
-
- const lowercaseText = extractedText.toLowerCase();
-
- if (
- lowercaseText.includes("provinsi") ||
- lowercaseText.includes("nik") ||
- lowercaseText.includes("kewarganegaraan")
- ) {
- setKTPdetected(true);
- } else {
- setKTPdetected(false);
- }
- }
-
+ setKTPdetected(true);
setLoading(false);
// Continue to OCR etc...
};
+ function base64ToFile(base64Data, fileName) {
+ const arr = base64Data.split(",");
+ const mime = arr[0].match(/:(.*?);/)[1];
+ const bstr = atob(arr[1]);
+ let n = bstr.length;
+ const u8arr = new Uint8Array(n);
+ while (n--) {
+ u8arr[n] = bstr.charCodeAt(n);
+ }
+ return new File([u8arr], fileName, { type: mime });
+ }
+
const ReadImage = async (capturedImage) => {
try {
setLoading(true);
const token = localStorage.getItem("token");
- let res = await fetch(
+ // Ubah base64 ke file
+ const file = base64ToFile(capturedImage, "image.jpg");
+
+ // Gunakan FormData
+ const formData = new FormData();
+ formData.append("image", file);
+
+ const res = await fetch(
"https://bot.kediritechnopark.com/webhook/mastersnapper/read",
{
method: "POST",
headers: {
- "Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
- body: JSON.stringify({ image: capturedImage }),
+ body: formData,
}
);
@@ -480,18 +462,7 @@ const CameraCanvas = () => {
rectHeight
);
- const ktpSample = new Image();
- ktpSample.src = "/ktp.jpeg";
- ktpSample.onload = () => {
- const sampleCanvas = document.createElement("canvas");
- sampleCanvas.width = rectWidth;
- sampleCanvas.height = rectHeight;
- const sampleCtx = sampleCanvas.getContext("2d");
- sampleCtx.drawImage(ktpSample, 0, 0, rectWidth, rectHeight);
-
- const isSimilar = isImageSimilar(cropCanvas, sampleCanvas);
- setKTPdetected(isSimilar);
- };
+ setKTPdetected(true);
};
image.src = imageDataUrl;
};
@@ -539,8 +510,9 @@ const CameraCanvas = () => {
backgroundColor: "white",
borderRadius: 16,
textAlign: "center",
- top: "-17px",
- position: "relative",
+ bottom: 0,
+ width: "100%",
+ position: "absolute",
padding: "20px",
}}
>
@@ -588,9 +560,7 @@ const CameraCanvas = () => {
capturedImage &&
!fileTemp && (
-
- KTP {!KTPdetected && "Tidak"} Terdeteksi
-
+ Tinjau Gambar