Skip to content

Commit 11897e0

Browse files
felixindrawanfelixindrawan
committed
fix: rename to decodeImage
1 parent a31e908 commit 11897e0

File tree

4 files changed

+28
-29
lines changed

4 files changed

+28
-29
lines changed

‎hello-world/next/README.md

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -247,19 +247,20 @@ export default VideoCapture;
247247

248248
```tsx
249249
/* /components/ImageCapture/ImageCapture.tsx */
250-
import React, { useRef, useEffect, MutableRefObject, useCallback } from "react";
250+
import React, { useRef, useEffect, MutableRefObject } from "react";
251251
import "../../dynamsoft.config"; // import side effects. The license, engineResourcePath, so on.
252252
import { EnumCapturedResultItemType } from "dynamsoft-core";
253253
import { BarcodeResultItem } from "dynamsoft-barcode-reader";
254254
import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
255+
import "./ImageCapture.css";
255256

256257
function ImageCapture() {
257258
const resultsContainer: MutableRefObject<HTMLDivElement | null> = useRef(null);
258259

259260
let pCvRouter: MutableRefObject<Promise<CaptureVisionRouter> | null> = useRef(null);
260261
let isDestroyed = useRef(false);
261262

262-
const decodeImg = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
263+
const decodeImage = async (e: React.ChangeEvent<HTMLInputElement>) => {
263264
let files = [...(e.target.files as any as File[])];
264265
e.target.value = ""; // reset input
265266
resultsContainer.current!.innerText = "";
@@ -287,34 +288,34 @@ function ImageCapture() {
287288
console.log(item.text);
288289
}
289290
// If no items are found, display that no barcode was detected
290-
if (!result.items.length) resultsContainer.current!.innerText = "No barcode found";
291+
if (!result.items.length) resultsContainer.current!.innerText += "No barcode found";
291292
}
292293
} catch (ex: any) {
293294
let errMsg = ex.message || ex;
294295
console.error(errMsg);
295296
alert(errMsg);
296297
}
297-
}, []);
298+
};
298299

299300
useEffect((): any => {
300301
// In 'development', React runs setup and cleanup one extra time before the actual setup in Strict Mode.
301302
isDestroyed.current = false;
302303

303304
// componentWillUnmount. dispose cvRouter when it's no longer needed
304-
return async () => {
305+
return () => {
305306
isDestroyed.current = true;
306307
if (pCvRouter.current) {
307-
try {
308-
(await pCvRouter.current).dispose();
309-
} catch (_) {}
308+
pCvRouter.current.then((cvRouter) => {
309+
cvRouter.dispose();
310+
}).catch((_) => {});
310311
}
311312
};
312313
}, []);
313314

314315
return (
315316
<div className="image-capture-container">
316317
<div className="input-container">
317-
<input type="file" multiple accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" onChange={decodeImg} />
318+
<input type="file" multiple accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" onChange={decodeImage} />
318319
</div>
319320
<div className="results" ref={resultsContainer}></div>
320321
</div>

‎hello-world/next/components/ImageCapture/ImageCapture.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useRef, useEffect, MutableRefObject, useCallback } from "react";
1+
import React, { useRef, useEffect, MutableRefObject } from "react";
22
import "../../dynamsoft.config"; // import side effects. The license, engineResourcePath, so on.
33
import { EnumCapturedResultItemType } from "dynamsoft-core";
44
import { BarcodeResultItem } from "dynamsoft-barcode-reader";
@@ -11,7 +11,7 @@ function ImageCapture() {
1111
let pCvRouter: MutableRefObject<Promise<CaptureVisionRouter> | null> = useRef(null);
1212
let isDestroyed = useRef(false);
1313

14-
const decodeImg = async (e: React.ChangeEvent<HTMLInputElement>) => {
14+
const decodeImage = async (e: React.ChangeEvent<HTMLInputElement>) => {
1515
let files = [...(e.target.files as any as File[])];
1616
e.target.value = ""; // reset input
1717
resultsContainer.current!.innerText = "";
@@ -39,7 +39,7 @@ function ImageCapture() {
3939
console.log(item.text);
4040
}
4141
// If no items are found, display that no barcode was detected
42-
if (!result.items.length) resultsContainer.current!.innerText = "No barcode found";
42+
if (!result.items.length) resultsContainer.current!.innerText += "No barcode found";
4343
}
4444
} catch (ex: any) {
4545
let errMsg = ex.message || ex;
@@ -53,20 +53,20 @@ function ImageCapture() {
5353
isDestroyed.current = false;
5454

5555
// componentWillUnmount. dispose cvRouter when it's no longer needed
56-
return async () => {
56+
return () => {
5757
isDestroyed.current = true;
5858
if (pCvRouter.current) {
59-
try {
60-
(await pCvRouter.current).dispose();
61-
} catch (_) {}
59+
pCvRouter.current.then((cvRouter) => {
60+
cvRouter.dispose();
61+
}).catch((_) => {});
6262
}
6363
};
6464
}, []);
6565

6666
return (
6767
<div className="image-capture-container">
6868
<div className="input-container">
69-
<input type="file" multiple accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" onChange={decodeImg} />
69+
<input type="file" multiple accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" onChange={decodeImage} />
7070
</div>
7171
<div className="results" ref={resultsContainer}></div>
7272
</div>

‎hello-world/react-hooks/README.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ export default VideoCapture;
224224

225225
```tsx
226226
/* /src/components/ImageCapture/ImageCapture.tsx */
227-
import React, { useRef, useEffect, MutableRefObject, useCallback } from "react";
227+
import React, { useRef, useEffect, MutableRefObject } from "react";
228228
import "../../dynamsoft.config"; // import side effects. The license, engineResourcePath, so on.
229229
import { EnumCapturedResultItemType } from "dynamsoft-core";
230230
import { BarcodeResultItem } from "dynamsoft-barcode-reader";
@@ -236,7 +236,7 @@ function ImageCapture() {
236236
let pCvRouter: MutableRefObject<Promise<CaptureVisionRouter> | null> = useRef(null);
237237
let isDestroyed = useRef(false);
238238

239-
const decodeImg = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
239+
const decodeImage = async (e: React.ChangeEvent<HTMLInputElement>) => {
240240
let files = [...(e.target.files as any as File[])];
241241
e.target.value = ""; // reset input
242242
resultsContainer.current!.innerText = "";
@@ -271,7 +271,7 @@ function ImageCapture() {
271271
console.error(errMsg);
272272
alert(errMsg);
273273
}
274-
}, []);
274+
};
275275

276276
useEffect((): any => {
277277
// In 'development', React runs setup and cleanup one extra time before the actual setup in Strict Mode.
@@ -282,16 +282,16 @@ function ImageCapture() {
282282
isDestroyed.current = true;
283283
if (pCvRouter.current) {
284284
pCvRouter.current.then((cvRouter) => {
285-
cvRouter.dispose();
286-
}).catch((_) => { })
285+
cvRouter.dispose();
286+
}).catch((_) => {});
287287
}
288288
};
289289
}, []);
290290

291291
return (
292292
<div className="image-capture-container">
293293
<div className="input-container">
294-
<input type="file" multiple accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" onChange={decodeImg} />
294+
<input type="file" multiple accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" onChange={decodeImage} />
295295
</div>
296296
<div className="results" ref={resultsContainer}></div>
297297
</div>

‎hello-world/react-hooks/src/components/ImageCapture/ImageCapture.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ function ImageCapture() {
1111
let pCvRouter: MutableRefObject<Promise<CaptureVisionRouter> | null> = useRef(null);
1212
let isDestroyed = useRef(false);
1313

14-
const captureImage = async (e: React.ChangeEvent<HTMLInputElement>) => {
14+
const decodeImage = async (e: React.ChangeEvent<HTMLInputElement>) => {
1515
let files = [...(e.target.files as any as File[])];
1616
e.target.value = ""; // reset input
1717
resultsContainer.current!.innerText = "";
@@ -56,19 +56,17 @@ function ImageCapture() {
5656
return () => {
5757
isDestroyed.current = true;
5858
if (pCvRouter.current) {
59-
pCvRouter.current
60-
.then((cvRouter) => {
59+
pCvRouter.current.then((cvRouter) => {
6160
cvRouter.dispose();
62-
})
63-
.catch((_) => {});
61+
}).catch((_) => {});
6462
}
6563
};
6664
}, []);
6765

6866
return (
6967
<div className="image-capture-container">
7068
<div className="input-container">
71-
<input type="file" multiple accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" onChange={captureImage} />
69+
<input type="file" multiple accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" onChange={decodeImage} />
7270
</div>
7371
<div className="results" ref={resultsContainer}></div>
7472
</div>

0 commit comments

Comments
 (0)