Unable to use web based functions in react native

Question

I am developing a native application in react native with expo. I am using typescript. I have existing tensorflow models and I am using tfjs browser methods to convert an image to tensor tf.browser.fromPixels(). This method accepts HTMLImageElement or ImageData as mentioned in the documentation.

I am trying to initialize a new image object and assign the base64 data string to the src attribute, that I get from my expo-camera takePictureAsync() response and then passing the image object to canvas using node-canvas.

const img = new Image()

But using the constructor results into error as follows;

ReferenceError: Can't find variable: Image

I do not receive any import error for using Image constructor. Is it not possible to use web view methods in react native? What am I doing wrong here?

I also tried Image from node-canvas but still getting an error.

import { Image } from "canvas"

and then when trying to initialize using the constructor and getting following error;

TypeError: undefined is not a constructor (evaluating 'new _canvas.Image()')

What does the error mean?

React native is not a web browser. Many things that browsers provide are not available in a react native context. The Image class is one of those. Though, ImageData may be available. — Alex Wayne
– Alex Wayne, Commented Aug 8, 2023 at 16:27
How do you import node-canvas? If you don’t have to use node-canvas you can use react-native-skia (github.com/Shopify/react-native-skia) — Michael Bahl
– Michael Bahl, Commented Aug 8, 2023 at 16:32
Thanks for the clarification @AlexWayne. I will try using ImageData. — Gauram Majmudar
– Gauram Majmudar, Commented Aug 9, 2023 at 10:10
@MichaelBahl I will try react-native-skia. Thanks for providing the link. — Gauram Majmudar
– Gauram Majmudar, Commented Aug 9, 2023 at 10:11

Rodrigo Dias · Accepted Answer · 2023-08-09 08:27:29Z

0

you can just save it as a normal string, there is no need to create an object. when you will show the image with the saved base64 just do this:

import {Image} from 'react-native';

const photoBase64= data:undefined;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAIQAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA;   

<Image
 source={{ uri: photoBase64 }}
 className="h-full w-full"
/>

answered Aug 9, 2023 at 8:27

Rodrigo Dias

1981 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gauram Majmudar Over a year ago

the problem is not displaying the picture. I want to transform the image into tensor using tf.browser.fromPixel and it only accepts objects of Image or ImageData type as mentioned in my question.

Collectives™ on Stack Overflow

Unable to use web based functions in react native

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related