fs.opensyn c не является функцией - PullRequest
Новая
       19

fs.opensyn c не является функцией

0 голосов
/ 06 января 2020

Я пытаюсь использовать размер изображения в своем приложении реакции на локальном компьютере, и когда я пытаюсь получить размеры изображения .jpg, приложение вылетает с ошибкой: 

TypeError: fs.openSync is not a function

syncFileToBuffer
D:/Projects/artworks-portfolio-app/ArtworkPortfolioApp/node_modules/image-size/dist/index.js:118
  115 | 
  116 | function syncFileToBuffer(filepath) {
  117 |   // read from the file, synchronously
  118 |   const descriptor = fs.openSync(filepath, 'r');
  119 |   const size = fs.fstatSync(descriptor).size;
  120 |   const bufferSize = Math.min(size, MaxBufferSize);
  121 |   const buffer = Buffer.alloc(bufferSize);

imageSize
D:/Projects/artworks-portfolio-app/ArtworkPortfolioApp/node_modules/image-size/dist/index.js:151
  148 |   if (typeof callback === 'function') {
  149 |     queue.push(() => asyncFileToBuffer(filepath).then(buffer => process.nextTick(callback, null, lookup(buffer, filepath))).catch(callback));
  150 |   } else {
  151 |     const buffer = syncFileToBuffer(filepath);
  152 |     return lookup(buffer, filepath);
  153 |   }
  154 | }

calcDimensions
D:/Projects/artworks-portfolio-app/ArtworkPortfolioApp/src/pages/home/index.js:53
  50 |    }
  51 | 
  52 |    const calcDimensions = () => {
  53 |        var dimensions = sizeOf('../../img/arts_hd_folder/1.jpg');
     | ^  54 |        console.log(dimensions.width, dimensions.height);
  55 | 
  56 |    }

(anonymous function)
D:/Projects/artworks-portfolio-app/ArtworkPortfolioApp/src/pages/home/index.js:60
  57 | 
  58 |     useEffect(() => {
  59 | 
  60 |        calcDimensions();
     | ^  61 |        setPhotos(makeImgArray(imgLinks))
  62 |    }, []);
  63 |

Ошибки из консоли браузера: 

Uncaught TypeError: fs.openSync is not a function
    at syncFileToBuffer (index.js:118)
    at imageSize (index.js:151)
    at calcDimensions (index.js:53)
    at index.js:60
    at commitHookEffectList (react-dom.development.js:22010)
    at commitPassiveHookEffects (react-dom.development.js:22043)
    at HTMLUnknownElement.callCallback (react-dom.development.js:337)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
    at invokeGuardedCallback (react-dom.development.js:439)
    at flushPassiveEffectsImpl (react-dom.development.js:25379)
    at unstable_runWithPriority (scheduler.development.js:701)
    at runWithPriority$2 (react-dom.development.js:12231)
    at flushPassiveEffects (react-dom.development.js:25348)
    at react-dom.development.js:25227
    at workLoop (scheduler.development.js:645)
    at flushWork (scheduler.development.js:600)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:197)

index.js:1406 The above error occurred in the <Home> component:
    in Home (created by Context.Consumer)
    in Route (at app/index.js:17)
    in Switch (at app/index.js:16)
    in div (at app/index.js:14)
    in Router (created by BrowserRouter)
    in BrowserRouter (at app/index.js:13)
    in App (at src/index.js:5)

index.js:118 Uncaught TypeError: fs.openSync is not a function
    at syncFileToBuffer (index.js:118)
    at imageSize (index.js:151)
    at calcDimensions (index.js:53)
    at index.js:60
    at commitHookEffectList (react-dom.development.js:22010)
    at commitPassiveHookEffects (react-dom.development.js:22043)
    at HTMLUnknownElement.callCallback (react-dom.development.js:337)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
    at invokeGuardedCallback (react-dom.development.js:439)
    at flushPassiveEffectsImpl (react-dom.development.js:25379)
    at unstable_runWithPriority (scheduler.development.js:701)
    at runWithPriority$2 (react-dom.development.js:12231)
    at flushPassiveEffects (react-dom.development.js:25348)
    at react-dom.development.js:25227
    at workLoop (scheduler.development.js:645)
    at flushWork (scheduler.development.js:600)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:197)

Я пробовал разные примеры кода из репозитория этой библиотеки, но ничего не работает. Я думаю, что я просто забыл сделать что-то простое, но я не могу понять, что.

Ответы [ 2 ]

2 голосов
/ 06 января 2020

Похоже, что это модуль, предназначенный для серверных приложений Node.js.

Браузер не предоставляет доступ к файловой системе компьютера, как это делает Node, поэтому модуль fs отсутствует в браузере.

0 голосов
/ 06 января 2020

Если вы пишете код node.js (не браузер JS), это выглядит как ошибка, которая возникнет, если вы не включите модуль "fs" вверху файла. Возможно, вам понадобится добавить: const fs = require("fs");

Если вы хотите получить размеры изображения, используя браузер, выполняющий JS, вы можете сделать выборку, но проще создать новое изображение: 

var img = new Image();

img.onload = function(){
  var height = img.height;
  var width = img.width;

  console.log(`HxW ${height}x${width}`);
}

img.src = 'https://i.ytimg.com/vi/OwF3alPebO8/maxresdefault.jpg';
...