how to draw local image on canvas using react-native-canvas about react-native-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)    
     })
 }

[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

[zokicpokic]

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

Sincerely,
Zoran

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

[iddan]

I would use React Native FS:

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

[iddan]

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

[iddan]

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

[ShaoGongBra]

RNimage.resolveAssetSource It doesn't work on the release

[ShaoGongBra]

${RNFS.MainBundlePath} Output undefined on Android