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

[zokicpokic]

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

[iddan]

I would use React Native FS:

import RNFS from 'react-native-fs';
const imageSrc = `${RNFS.MainBundlePath}/${FILE_PATH}`

[zokicpokic]

Thank you iddan.
I will try as you have suggested.

Sincerely,
Zoran

[iddan]

Hey @zokicpokic, were you able to solve this problem?

[zokicpokic]

Hi @iddan , thank you for asking.

I was able to solve this by

  const asset = Expo.Asset.fromModule(require('./images/bckg.jpg'));
  image.src = asset.uri ;

Then:
image.addEventListener('load', function() {
context.drawImage(image, 0, 0, canvas.width, canvas.height);
}

I am using create react native app and Expo, linking FS appeared not easy going approach since linking and Expo are not much compatible.

But I will keep using react-native-canvas since it is most straightforward and achievable for 2D rendering.
However, now I am wondering should I have to include load listener for each image I want to drive on let's say one scene, or there is another way to obtain image ref. and draw it directly on canvas.

Thank you once again.
Regards,
Zoran

[iddan]

I think once an image is loaded you can utilise it in the same canvas.

[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.

[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)    
     })
 }

[ShaoGongBra]

RNimage.resolveAssetSource It doesn't work on the release

[ShaoGongBra]

${RNFS.MainBundlePath} Output undefined on Android

[shov]

@zokicpokic solution works just fine, thanks!

import {Asset} from 'expo-asset'
import {Image as CanvasImage} from 'react-native-canvas'

async loadImage(localPath: string): Promise<CanvasImage> {
  const i = new CanvasImage(canvas)
  const asset = Asset.fromModule(require(localPath))
  i.src = asset.uri
  
  return await new Promise(r => {
      i.addEventListener('load', () => {
          r(i)
      })
  })
}