未处理的运行时错误 - TypeError：无法读取未定义的属性“长度”Nextjs

问题描述

我正在编写代码以接受二维码图像并解码为字符串。

图片将是 Nextjs 文件夹 'public' 中的静态文件。

在我的代码中，我已将图像转换为“imageData”。我成功转换并获得了返回一个 Uint8ClampedArray 的 'imageData' 对象。

然后，我使用这个 npm 库来做 javascript QR 阅读器。 https://www.npmjs.com/package/jsqr

但是，不知何故，它把这个错误还给了我。

未处理的运行时错误类型错误：无法读取未定义的属性“长度”

这是我的 localhost:3000 中的错误显示

当我查看我的代码编辑器时。我在第 372 行有突出显示。

虽然，我认为 .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>
  )
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

qr-code reactjs reactjs uint8t