From 9f1e381dbaa56a6b82760f59c0c80f81152c81b3 Mon Sep 17 00:00:00 2001
From: ericli <helloeric01@gmail.com>
Date: Wed, 23 Aug 2023 17:25:04 +0800
Subject: [PATCH] feat: add image to grayscale

---
 apps/web/src/components/ZK/GenerateProof.tsx | 30 +++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/components/ZK/GenerateProof.tsx b/apps/web/src/components/ZK/GenerateProof.tsx
index f1f2f4b..3476f69 100644
--- a/apps/web/src/components/ZK/GenerateProof.tsx
+++ b/apps/web/src/components/ZK/GenerateProof.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { sleep, formatAddress } from 'helper'
 import { useAccount } from 'wagmi'
 
@@ -11,17 +11,6 @@ export interface GenerateProofProps {
     onClose: any
 }
 
-const handleProcess2GrayScale = async (imgSrc : any): Promise<any> => {
-    const base64WithoutHeader = imgSrc.replace(/^data:image\/\w+;base64,/, '')
-    const binaryString = atob(base64WithoutHeader);
-    const bytes = new Uint8Array(binaryString.length);
-    for (let i = 0; i < binaryString.length; i++) {
-        bytes[i] = binaryString.charCodeAt(i);
-    }
-    
-    return bytes.buffer
-}
-
 
 const GenerateProof = ({ imgSrc, handleCopyClick, setIsLoading, onClose }: GenerateProofProps) => {
     const [isCopied, setCopied] = useState(false);
@@ -29,10 +18,22 @@ const GenerateProof = ({ imgSrc, handleCopyClick, setIsLoading, onClose }: Gener
     const { address, isConnected } = useAccount()
     const [grayScaleBase64, setGrayScaleBase64] = useState('');
 
+    const handleProcess2GrayScale = async () => {      
+        const canvas = document.getElementById('a') as HTMLCanvasElement;
+        const context = canvas.getContext('2d');
+    
+        var img = new Image();
+        img.src = imgSrc
+        img.onload = function() {
+            context.filter = 'grayscale(100%)'
+            context.drawImage(img, 0 , 0, 50, 50);
+            setGrayScaleBase64(Buffer.from(canvas.toDataURL()).toString('base64'))
+          }
+    }
+
     const genProof = async () => {
         setIsLoading(true)
-        const result = await handleProcess2GrayScale(imgSrc)
-        console.log(result)
+        await handleProcess2GrayScale()
         await sleep(2000)
         setIsLoading(false)
         setProof(address)
@@ -78,6 +79,7 @@ const GenerateProof = ({ imgSrc, handleCopyClick, setIsLoading, onClose }: Gener
                         : <div className="btn" onClick={genProof} >Generate</div>
                 }
             </div>
+            <canvas id="a" width="50" height="50" style={{ display: 'none' }} ></canvas>
         </div>
     );
 }