我正在尝试将base64编码的字符串转换为我的React文件中的图像

import React, { useRef, useCallback, useState } from 'react'
import Webcam from "react-webcam"
import Modal from 'react-bootstrap/Modal'
import Button from 'react-bootstrap/Button'
import 'bootstrap/dist/css/bootstrap.min.css'
import axios from 'axios'
// import base64Img from 'base64-img'
const fs = require('fs')


function App() {
  const [show, setShow] = useState(false)

  const handleClose = () => {
    setShow(false)
  }

  const videoConstraints = {
    width: 1280,
    height: 720,
    facingMode: "user"
  }

  const webcamRef = useRef(null);

  const capture = useCallback(
    () => {
      const imageSrc = webcamRef.current.getScreenshot();
      // const capture = document.createElement('img')
      // capture.src = imageSrc
      // base64Img.img(imageSrc, '../images', '1', function(err, filepath) {
      //   if(err) console.error(err)
      // });
      fs.writeFile('../images/1.jpg', imageSrc, {
        encoding: 'base64'
      }, function(err){
        if(err) console.error(err)
      })
      console.log(imageSrc)

      const formData = new FormData();

      formData.append('images', imageSrc)

      axios.post('http://localhost:5000/login', formData,{
          headers: {
              'content-type': 'multipart/form-data'
          },
          mode: 'no-cors'
        })

    },
    [webcamRef]
  )
   const logIn = () => {
    setShow(true)
  }
  return (
    <div>
        <button style={{
          position: 'relative',
          left: '500px',
          top: '300px'}}
          onClick={logIn}>Log in</button>

          <Modal size="lg" show={show} onHide={handleClose}>
            <Modal.Header closeButton>
              <Modal.Title>Please take a photo</Modal.Title>
            </Modal.Header>

            <Modal.Body>
            <Webcam
        audio={false}
        height={550}
        ref={webcamRef}
        screenshotFormat="image/jpeg"
        width={750}
        videoConstraints={videoConstraints}
      />
            </Modal.Body>

            <Modal.Footer>
              <Button onClick={ handleClose } variant="secondary">Close</Button>
              <Button onClick={capture} variant="primary">Take a snap</Button>
            </Modal.Footer>
          </Modal>
    </div>
  );
}

export default App;

这引起了一个问题:

TypeError: fs.writeFile is not a function
(anonymous function)
  31 | // base64Img.img(imageSrc, '../images', '1', function(err, filepath) {
  32 | //   if(err) console.error(err)
  33 | // });
> 34 | fs.writeFile('../images/1.jpg', imageSrc, {
     | ^  35 |   encoding: 'base64'
  36 | }, function(err){
  37 |   if(err) console.error(err)

发生错误是因为我正在用Node.js语法交换React语法代码。我尝试使用: base64Img这给了我这个错误:

TypeError: fs.existsSync is not a function
getExists
node_modules/file-system/file-system.js:30
  27 | }
  28 | 
  29 | function getExists(filepath) {
> 30 |   var exists = fs.existsSync(filepath);
  31 | 
  32 |   if (exists) {
  33 |     return filepath;
View compiled
push../node_modules/file-system/file-system.js.exports.mkdir
node_modules/file-system/file-system.js:60
  57 |  * ```
  58 |  */
  59 | exports.mkdir = function(filepath, mode, callback) {
> 60 |   var root = getExists(filepath);
  61 |   var children  = path.relative(root, filepath);
  62 | 
  63 |   if (util.isFunction(mode)) {
View compiled
push../node_modules/file-system/file-system.js.exports.writeFile
node_modules/file-system/file-system.js:131
  128 |   callback = result.callback;
  129 | 
  130 |   // Create dir first
> 131 |   exports.mkdir(dirname, function() {
  132 |     fs.writeFile(filename, data, options, callback);
  133 |   });
  134 | };
View compiled
push../node_modules/base64-img/base64-img.js.exports.img
node_modules/base64-img/base64-img.js:98
   95 |   var result = img(data);
   96 |   var filepath = path.join(destpath, name + result.extname);
   97 | 
>  98 |   fs.writeFile(filepath, result.base64, { encoding: 'base64' }, function(err) {
   99 |     callback(err, filepath);
  100 |   });
  101 | };
View compiled
(anonymous function)
/src/App.js:31
  28 | const imageSrc = webcamRef.current.getScreenshot();
  29 | // const capture = document.createElement('img')
  30 | // capture.src = imageSrc
> 31 | base64Img.img(imageSrc, '../images', '1', function(err, filepath) {
     | ^  32 |   if(err) console.error(err)
  33 | });
  34 | // fs.writeFile('../images/1.jpg', imageSrc, {

我已经测试了几个主意,并且在youtube和google上查找了视频和信息,但没有找到任何解决方案。

我对正在发生的事情感到困惑。请为我提供建议和解决方案。我会很感激

评论
对你的冷漠
对你的冷漠
点赞
评论