问题描述
图片将是 Nextjs 文件夹 'public' 中的静态文件。
在我的代码中，我已将图像转换为“imageData”。我成功转换并获得了返回一个 Uint8ClampedArray 的 'imageData' 对象。
然后，我使用这个 npm 库来做 javascript QR 阅读器。 https://www.npmjs.com/package/jsqr
但是，不知何故，它把这个错误还给了我。
虽然，我认为 .next 库中的第 372 行，我不应该对它做任何事情。
那可能是我的代码。
这是我的代码。
index.js
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import jsQR from 'jsqr'
import { useEffect } from 'react'
export default function Home() {
useEffect(() => {
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d');
const width = 200;
const height = 200;
const image = new Image;
var imageDataT
image.src = './Test_QR_Coupon.png'
image.onload = () => {
ctx.drawImage(image,width,height);
imageDataT = ctx.getimageData(0,200,200);
console.log(imageDataT);
}
const code = jsQR(imageDataT,300,'dontInvert')
console.log('Code:',code)
if (code) {
console.log("Found QR code",code);
}
})
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<canvas id="canvas"></canvas>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<img src="/vercel.svg" alt="Vercel logo" className={styles.logo} />
</a>
</footer>
</div>
)
}
解决方法
您收到未定义错误，因为您在定义 imageDataT 的 onload 回调之前调用了 jsqr 函数。您需要将代码包装在回调中。
var imageDataT
image.src = './Test_QR_Coupon.png'
image.onload = () => {
ctx.drawImage(image,width,height);
imageDataT = ctx.getImageData(0,200,200);
console.log(imageDataT);
const code = jsQR(imageDataT,300,'dontInvert')
console.log('Code:',code)
if (code) {
console.log("Found QR code",code);
}
}