Unhandled Runtime Error - TypeError: Cannot read property 'length' of undefined (Nextjs)
Unhandled Runtime Error - TypeError: Cannot read property 'length' of undefined (Nextjs)
我正在编写代码以接受 QR-code 图像并解码为字符串。
图片将是Nextjs文件夹'public'中的静态文件。
在我的代码中,我已将图像转换为 'imageData'。我成功转换并得到 'imageData' object 那个 return 和一个 Uint8ClampedArray.
然后,我使用这个 npm 库来做 javascript QR reader。 https://www.npmjs.com/package/jsqr
但是,它以某种方式将此错误返回给我。
未处理的运行时错误
类型错误:无法读取未定义的 属性 'length'
这是我的 localhost:3000
中显示的错误
这是在我查看代码编辑器时出现的。我在第 372 行突出显示。
不过,我认为第 372 行是 .next 库的一部分,我不应该对它做任何事情。
可能是我的代码吧
这是我的代码。
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, 0, 0,width,height);
imageDataT = ctx.getImageData(0, 0, 200, 200);
console.log(imageDataT);
}
const code = jsQR(imageDataT, 300, 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, 0, 0,width,height);
imageDataT = ctx.getImageData(0, 0, 200, 200);
console.log(imageDataT);
const code = jsQR(imageDataT, 300, 300,'dontInvert')
console.log('Code:', code)
if (code) {
console.log("Found QR code", code);
}
}
我正在编写代码以接受 QR-code 图像并解码为字符串。
图片将是Nextjs文件夹'public'中的静态文件。
在我的代码中,我已将图像转换为 'imageData'。我成功转换并得到 'imageData' object 那个 return 和一个 Uint8ClampedArray.
然后,我使用这个 npm 库来做 javascript QR reader。 https://www.npmjs.com/package/jsqr
但是,它以某种方式将此错误返回给我。
未处理的运行时错误 类型错误:无法读取未定义的 属性 'length'
这是我的 localhost:3000
中显示的错误这是在我查看代码编辑器时出现的。我在第 372 行突出显示。
不过,我认为第 372 行是 .next 库的一部分,我不应该对它做任何事情。
可能是我的代码吧
这是我的代码。
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, 0, 0,width,height);
imageDataT = ctx.getImageData(0, 0, 200, 200);
console.log(imageDataT);
}
const code = jsQR(imageDataT, 300, 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, 0, 0,width,height);
imageDataT = ctx.getImageData(0, 0, 200, 200);
console.log(imageDataT);
const code = jsQR(imageDataT, 300, 300,'dontInvert')
console.log('Code:', code)
if (code) {
console.log("Found QR code", code);
}
}