android - 如何使用来自 react-native-image-picker 的图像 uri 在 react-native-canvas 中绘制图像

Question

我正在构建一个 android react native 应用程序，它允许用户从他们的设备中选择图像并进行操作以应用效果。我react-native-image-picker用于选择图像和react-native-canvas操作像 html 画布这样的图像。

这是用于拍摄图像的代码：

 <TouchableOpacity style={styles.btn} onPress={()=>{
           launchImageLibrary(options, (res)=>{
            if(res.didCancel){
                console.log('User Cancelled')
            }else if(res.error){
                console.log("error:", res.error);
            }else{
               sendToEditor(res.assets[0].uri, res.assets[0].height, res.assets[0].width);
            }
        })
        
      }}>

它将图像 uri 发送到另一个组件：

 const sendToEditor = async(src, height, width) => {
        try {
            await Navigation.push('Component1', {
             component: {
               name: 'Editor',
               passProps:{
                   source: {uri: src},
                   height: height,
                   width: width
               }
             }
           })
         } catch(e) {
             console.log(e)
         }
    }

编辑器组件：

import{View,Text,Button,StyleSheet, TouchableOpacity, Image} from 'react-native';
import Canvas, {Image as CanvasImage, } from 'react-native-canvas';
import React, { Component } from 'react'

export default class Editor extends Component {
    handleCanvas = (canvas) =>{
        if (canvas !== null){
            
            canvas.width = 500;
            canvas.height = 500;
            const image = new CanvasImage(canvas, 500, 500);
            
            image.addEventListener('error', (err)=>{
                console.log(err)
            })
           
            // Everything works fine, the image gets loaded and gets shown on the screen if I use a local image
            image.src = Image.resolveAssetSource(require('./sample_img.jpg')).uri;

            //  But when I have to use the uri from the image picker

            //it didn't works like this and gives the error :
            image.src = Image.resolveAssetSource(require(this.props.source.uri)).uri;
            // Invalid call at line 23: require(_this.props.source.uri)

            // null is not an object (evaluating '_reactNative.Image.resolveAssetSource(_this.props.source.uri).uri')
            image.src = Image.resolveAssetSource(this.props.source.uri).uri;

            

            image.addEventListener('load', ()=>{
                console.log('image is loaded');
                const ctx = canvas.getContext('2d');
                ctx.drawImage(image,0,0, this.props.width, this.props.height)
            })
        }
    }
    render() {
            return (
             <View style={styles.container}>

                 {/* I thought there could be a problem with the uri, but when I used it like this it works fine */}
                 <Image source={{uri:this.props.source.uri}} style={{width: this.props.width, height: this.props.height}}  resizeMode={'cover'} />
                 <Canvas  originWhitelist={[this.props.source.uri]} ref={this.handleCanvas}/>
             </View>
            )
    }
}

 const styles = StyleSheet.create({
     container:{
         display:'flex',
         alignItems:'center',
         justifyContent: 'center'
     }
 })

我尝试了许多其他不同的解决方案，但似乎没有任何效果。

简而言之，问题是我不能在 react-native-canvas 中使用来自 react-native-image 的图像 uri。

提前谢谢你的帮助

标签： androidreact-nativecanvasreact-native-androidreact-native-image-picker