how to draw local image on canvas using react-native-canvas

Hi, Thank you for the package. I have followed instructions in the source and I am not able to draw image on canvas if image’s source is within a project.

here is the code:

import React from 'react';
import { StyleSheet} from 'react-native';
import Canvas, {Image as CanvasImage} from 'react-native-canvas';


export default class App extends React.Component {
  handleCanvas =  (canvas) => {
    const image = new CanvasImage(canvas);
    canvas.width = 100;
    canvas.height = 100;
    
    const context = canvas.getContext('2d');

    image.src = './dys.jpg';

    //'https://image.freepik.com/free-vector/unicorn-background-design_1324-79.jpg'; Note: with this uri everything works well

     image.addEventListener('load', () => {
      debugger
      console.log('image is loaded');
      context.drawImage(image, 0, 0, 100, 100);
    }); 
  }

  render() {
    return (
      <Canvas ref={this.handleCanvas}/>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Is it possible to set image.src to local path?

Thank you once again. Regards, Zoran

[shubhamkes]

For those struggling to import PNGs in typescript

import {Image as RNimage} from 'react-native';
import Canvas, {Image as CanvasImage} from 'react-native-canvas';

function resolveImage() {
    return require('../assets/image.png');
}
 const handleCanvas = (canvas) => {
     const image = new CanvasImage(canvas);
     const imageUri = RNimage.resolveAssetSource(resolveImage()).uri;
     image.src = imageUri;
     const context = canvas.getContext('2d');
      
     image.addEventListener('load', () => {
         context.drawImage(image, 0, 0)    
     })
 }

[salmenlinna]

Thanks for this. Without Expo, you can solve it using “resolveAssetSource” like this:

import {Image as RNimage} from 'react-native'
import Canvas, {Image} from 'react-native-canvas'
import imagePng from '../assets/image.png'

const imageUri = RNimage.resolveAssetSource(imagePng).uri 

and then:

image.src = imageUri
image.addEventListener('load', () => {
   ctx.drawImage(image, 0, 0)    
})

Note that resolveAssetSource is method from React Native Image, so you need to import is also, but with a different name.