我正在尝试将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
module.exports = {
resolve: {
modules: [...],
fallback: {
fs: false,
path: false,
crypto: false
}
}
};
但它似乎不起作用,而且错误还在继续。
但是,使用react (而不是next.js)创建一个非常类似的项目:
create-react-app
$ yarn add @techstark/opencv-js
相同的代码(至少适合于反应)工作正常,我可以毫无问题地使用opencv.js的函数。
h.我的问题:
中工作?
这是带有错误的´index.js´of next.js app
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;
发布于 2021-11-21 13:56:43
多亏了@juliomalves的回答,我才能解决这个问题。要跳过浏览器中fs的分辨率,我必须添加自定义webpack配置。这在next.config.js文件中完成,如下所示:
module.exports = {
webpack5: true,
webpack: (config) => {
config.resolve.fallback = { fs: false, path:false, "crypto": false };
return config;
},
};
https://stackoverflow.com/questions/70049719
复制相似问题