我试图用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
4条答案
按热度按时间6pp0gazn1#
原因是您有用户Console.error。如果将其更改为console.log,则在开发中不会看到此错误。
2vuwiymt2#
您遇到此错误的原因是因为jimp不是针对react native优化的库......它是一个用于node.js的javascript库
jchrr9hc3#
Jimp支持服务器端ie:-在node.js中,它工作正常,否则会出错。
sbdsn5lh4#
看起来像是jimp.read在base64字符串上使用www.example.com()。如果是这样的话,你需要去掉前缀:“data:image/; base64”优先。首先尝试对capturedPhoto执行以下操作:
现在你应该可以jimp.read在'newCapturedPhoto'上运行www.example.com()了,它应该可以工作了。