首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >将openCv.js与next.js结合使用

将openCv.js与next.js结合使用
EN

Stack Overflow用户
提问于 2021-11-20 20:44:54
回答 1查看 613关注 0票数 0

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

项目创建时:npx create-next-app

然后安装:$ yarn add @techstark/opencv-js

c.以:import cv from "@techstark/opencv-js"进口opencv

d. 仅上一行就足以报告错误:

找不到./node_modules/@techstark/opencv-js/dist/opencv.js:30:1175模块:无法解析“fs”

正如我所读到的,在webpack.config.js中添加以下行并不会试图解析fs

代码语言:javascript
运行
复制
        module.exports = {
          resolve: {
            modules: [...],
            fallback: {
              fs: false,
              path: false,
              crypto: false
            }
          }
        };

但它似乎不起作用,而且错误还在继续。

但是,使用react (而不是next.js)创建一个非常类似的项目:

代码语言:javascript
运行
复制
    create-react-app
    $ yarn add @techstark/opencv-js

相同的代码(至少适合于反应)工作正常,我可以毫无问题地使用opencv.js的函数。

h.我的问题:

  1. 有没有办法在浏览器(客户端)中加载opencv.js而不解析fs?
  2. 为什么在next.js中工作而不是在

中工作?

这是带有错误的´index.js´of next.js app

代码语言:javascript
运行
复制
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 (工作正常)

代码语言:javascript
运行
复制
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;
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-11-21 13:56:43

多亏了@juliomalves的回答,我才能解决这个问题。要跳过浏览器中fs的分辨率,我必须添加自定义webpack配置。这在next.config.js文件中完成,如下所示:

代码语言:javascript
运行
复制
module.exports = {
  webpack5: true,
  webpack: (config) => {
    config.resolve.fallback = { fs: false, path:false, "crypto": false  };
    return config;
  },
};
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/70049719

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档