使用 openCv.js 和 next.js

Question

我正在尝试将 openCv.js 导入 next.js 应用程序

一个。该项目是通过以下方式创建的： npx create-next-app

b。然后安装： $ yarn add @techstark/opencv-js

c。导入 opencv： import cv from "@techstark/opencv-js"

d. 只需要上一行就可以报错：

./node_modules/@techstark/opencv-js/dist/opencv.js:30:1175 Module not found: Can't resolve 'fs'

f。正如我所读，将以下行添加到 webpack.config.js 不会尝试解析 fs

        module.exports = {
          resolve: {
            modules: [...],
            fallback: {
              fs: false,
              path: false,
              crypto: false
            }
          }
        };

但是好像不行，错误还在继续。

克。但是用 React 创建一个非常相似的项目（而不是 next.js）：

    create-react-app
    $ yarn add @techstark/opencv-js

相同的代码（最低限度地适应反应）工作正常我可以毫无问题地使用opencv.js的功能

小时。我的问题：

有没有办法在浏览器（客户端）中加载 opencv.js 而无需解析 fs？
为什么它在 React 中起作用而不在 next.js 中起作用？

这是 next.js 应用程序的“index.js”错误:

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import React,{useRef, useState} from 'react'
import Script from 'next/script'
//---
import dynamic from 'next/dynamic'
import cv from "@techstark/opencv-js"

export default function Home() {
  const canvas1 = useRef()
  const img1 = useRef()
  

function handleFileChange(e) {
    const files = e.target.files
    if (!files || files.length === 0) {
      return
    }
    const file = files[0]
    var fr = new FileReader()
    fr.readAsDataURL(file)
    var img = img1.current
    fr.onload = (evt) => {
            if( evt.target.readyState === FileReader.DONE) {
              img.src = evt.target.result
            }
    }
  }    

  function handleImageLoad() {
    var img=img1.current
    img2canvas(img,canvas1.current)
    img.className = ""
  }

  function img2canvas(img, canvas) {
    var ctx = canvas.getContext('2d')              
    var ratioImage = img.naturalWidth / img.naturalHeight
    var widthAdj = 400 //canvas.width
    var heightAdj = Math.ceil(widthAdj / ratioImage)

    canvas.width = widthAdj //(img.width/2)
    canvas.height =heightAdj // (img.height/2)

    ctx.width = widthAdj + 'px'   //(img.width/2) + 'px'
    ctx.height = heightAdj + 'px'  //(img.height/2) + 'px'
    ctx.drawImage(img, 0, 0, widthAdj, heightAdj)
  } 

  async function testOpenCv() {
    var img = img1.current
    var mat = cv.imread(img)  
    await cv.cvtColor(mat,mat, openCv.COLOR_RGBA2GRAY)
    await cv.bitwise_not(mat, mat)
    await cv.imshow(canvas1.current, mat)
  }

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
        <h1>Test</h1>
        <div>
            <label class="btn">file: </label>
            <input id="file" type="file" onChange={handleFileChange} />            
            <br />
            <button type="button" onClick={testOpenCv}>Test OpenCv!</button>
            <br />
            <br />
        </div>
        <div >
            <img src="" alt="testimg" ref={img1} onLoad={handleImageLoad} style={{display:"none"}}/>
            <br />
        </div>
        <div>
            <canvas ref={canvas1}></canvas>                
        </div>
      </main>
    </div>
  )
}

这是 React 应用程序的 App.js（工作正常）

import logo from './logo.svg';
import './App.css';
import cv from "@techstark/opencv-js";
import React,{useRef, useState} from 'react';


function App() {
  const canvas1 = useRef()
  const img1 = useRef()

function handleFileChange(e) {
    const files = e.target.files;
    if (!files || files.length === 0) {
      return
    }
    const file = files[0];     
    var fr = new FileReader();
    fr.readAsDataURL(file);
    var img = img1.current
    fr.onload = (evt) => {
            if( evt.target.readyState === FileReader.DONE) {
              img.src = evt.target.result;              
            }
    }
  }    

  function handleImageLoad() {
    var img=img1.current
    img2canvas(img,canvas1.current)
    img.className = ""
  }

  function img2canvas(img, canvas) {
    var ctx = canvas.getContext('2d')              
    var ratioImage = img.naturalWidth / img.naturalHeight;
    var widthAdj = 400 //canvas.width;
    var heightAdj = Math.ceil(widthAdj / ratioImage)

    canvas.width = widthAdj //(img.width/2);
    canvas.height =heightAdj // (img.height/2);

    ctx.width = widthAdj + 'px'   //(img.width/2) + 'px';
    ctx.height = heightAdj + 'px'  //(img.height/2) + 'px';
    ctx.drawImage(img, 0, 0, widthAdj, heightAdj);    
  } 

  async function testOpenCv() {
    var img = img1.current
    var mat = cv.imread(img)  
    await cv.cvtColor(mat,mat, cv.COLOR_RGBA2GRAY);
    await cv.bitwise_not(mat, mat)
    await cv.imshow(canvas1.current, mat);    
  }

  return (
    <div className="App">
      <header className="App-header">
        <h1>Test</h1>
        <div>
            <label class="btn">file: </label>
            <input id="file" type="file" onChange={handleFileChange} />            
            <br />
            <button type="button" onClick={testOpenCv}>Test OpenCv!</button>
            <br />
            <br />
        </div>
        <div >
            <img src="" alt="testimg" ref={img1} onLoad={handleImageLoad} style={{display:"none"}}/>
            <br />
        </div>
        <div>
            <canvas ref={canvas1}></canvas>                
        </div>
      </header>
    </div>
  );
}

export default App;

Answer 1

感谢@juliomalves 的回答，我得以解决问题。要在浏览器中跳过 fs 的解析，我必须添加一个自定义的 webpack 配置。这是在 next.config.js 文件中完成的，如下所示：

module.exports = {
  webpack5: true,
  webpack: (config) => {
    config.resolve.fallback = { fs: false, path:false, "crypto": false  };
    return config;
  },
};

使用 openCv.js 和 next.js

use openCv.js with next.js

opencv

reactjs

next.js