使用Jimp在React Native中进行JavaScript图像处理

wh6knrhe  于 2023-06-20  发布在  Java
关注(0)|答案(4)|浏览(145)

我试图用react native和expo做一个应用程序,它可以获取相机捕捉到的图像的颜色。我使用了Jimp,一个JavaScript图像处理库,但它显示了这个错误。
看看这段代码。

import { StatusBar } from 'expo-status-bar';
import React, { useState, useEffect, useRef } from 'react';
import { StyleSheet, Text, View, Button, TouchableOpacity, ScrollView, Modal, Image } from 'react-native';
import { Camera } from 'expo-camera';
import { FontAwesome } from '@expo/vector-icons';
import Jimp from 'jimp';

export default function App() {
  const camRef = useRef(null);
  const [type, setType] = useState(Camera.Constants.Type.back);
  const [hasPermission, setHasPermission] = useState(null);
  const [capturedPhoto, setCapturedPhoto] = useState();
  const [visible, setVisible] = useState(false)

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  if (hasPermission === null) {
    return <View />
  }

  if (hasPermission === false) {
    return <Text>Acesso negado!</Text>
  }

  async function takePicture() {

    if (camRef) {
      const options = { quality: 0.5, base64: true };
      const data = await camRef.current.takePictureAsync(options);
      setCapturedPhoto(data.uri);
      setVisible(true)
      GetColor()
    }
  }

  async function GetColor() {
    try {

      const image = await Jimp.read(capturedPhoto);
      const hex = image.getPixelColor(40, 40);
      console.log(Jimp.intToRGBA(hex));
    } catch (error) {
      console.error(error)
    }
  }

  return (
    <View style={styles.container}>
      <Camera
        style={{ flex: 1 }}
        type={type}
        ref={camRef}
      >
      //...restante do codigo
      </Camera>

      <TouchableOpacity style={styles.button} onPress={takePicture}>
        <FontAwesome name="camera" size={23} color="#fff" />
      </TouchableOpacity>

      {capturedPhoto &&
        <Modal
          animationType="slide"
          transparent={false}
          visible={visible}
        >
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', margin: 20 }}>
            <TouchableOpacity style={{ margin: 10 }} onPress={() => setVisible(false)}>
              <FontAwesome name="window-close" size={50} color="#FF0000"></FontAwesome>
            </TouchableOpacity>

            <Image
              style={{ width: '100%', height: 300, borderRadius: 20 }}
              source={{ uri: capturedPhoto }}
            />

          </View>
        </Modal>
      }

      <StatusBar style="auto" />
    </View>
  );
}
O error:

Event {
  "isTrusted": false,
  "methodName": "constructor",
}
* [native code]:null in __expoConsoleLog
- node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
- node_modules\react-native\Libraries\YellowBox\YellowBox.js:169:6 in registerError
- node_modules\react-native\Libraries\YellowBox\YellowBox.js:84:8 in errorImpl
- node_modules\react-native\Libraries\YellowBox\YellowBox.js:63:4 in console.error
- node_modules\expo\build\environment\muteWarnings.fx.js:27:4 in error
- node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
- node_modules\regenerator-runtime\runtime.js:293:29 in invoke
- node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
- node_modules\regenerator-runtime\runtime.js:154:27 in invoke
- node_modules\regenerator-runtime\runtime.js:166:18 in PromiseImpl.resolve.then$argument_1
- node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
- node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:135:14 in _callTimer
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:183:16 in _callImmediatesPass
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:446:30 in callImmediates
* [native code]:null in callImmediates
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:396:6 in __callImmediates
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:144:6 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:373:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:143:4 in flushedQueue
* [native code]:null in flushedQueue
* [native code]:null in callFunctionReturnFlushedQueue
6pp0gazn

6pp0gazn1#

原因是您有用户Console.error。如果将其更改为console.log,则在开发中不会看到此错误。

2vuwiymt

2vuwiymt2#

您遇到此错误的原因是因为jimp不是针对react native优化的库......它是一个用于node.js的javascript库

jchrr9hc

jchrr9hc3#

Jimp支持服务器端ie:-在node.js中,它工作正常,否则会出错。

sbdsn5lh

sbdsn5lh4#

看起来像是jimp.read在base64字符串上使用www.example.com()。如果是这样的话,你需要去掉前缀:“data:image/; base64”优先。首先尝试对capturedPhoto执行以下操作:

newCapturedPhoto = capturedPhoto.split(";base64,").pop();

现在你应该可以jimp.read在'newCapturedPhoto'上运行www.example.com()了,它应该可以工作了。

相关问题