Please provide the following:
- SDK Version: 3.21.13
- Platforms(Android/iOS/web/all): All (testing on Android)
This question may be more relevant somewhere else, but I am trying to display on a react-native-canvas a file that is being saved into the local file system from the web (using createDownloadResumable). The code below works fine if I use the URL (https://), but it fails to load silently if I try to substitute image.src = url by image.src = uri (file:///).
I considered converting the image to base64 and render it as data, but this would be too large (>250 Kb) from what I can read.
This is the closest I have come to a solution, which suggests that it can work from local files. What would be the equivalent in Expo?
import * as FileSystem from 'expo-file-system';
import React, { useRef, useEffect } from 'react';
import Canvas, { Image } from 'react-native-canvas';
import { View } from 'react-native';
export default function Test(props) {
const canvasRef = useRef(null);
useEffect(() => {
const canvasObj = canvasRef.current;
const ctx = canvasObj.getContext('2d');
canvasObj.width = 320;
canvasObj.height = 320;
let url = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Catedral_de_Mar%C3%ADa_Reina_del_Mundo%2C_Montreal%2C_Canad%C3%A1%2C_2017-08-12%2C_DD_61-63_HDR.jpg/1280px-Catedral_de_Mar%C3%ADa_Reina_del_Mundo%2C_Montreal%2C_Canad%C3%A1%2C_2017-08-12%2C_DD_61-63_HDR.jpg";
let localSRC = FileSystem.cacheDirectory +
Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15) +
'.jpg';
(async () => {
const downloadResumable = FileSystem.createDownloadResumable(
url, localSRC, {}, downloadProgress => {
const progress = downloadProgress.totalBytesWritten / downloadProgress.totalBytesExpectedToWrite;
}
);
const { uri } = await downloadResumable.downloadAsync();
const image = new Image(canvasObj);
// uri = 'file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540user%252Fappname/g0ibtcg4zag2kcxoxvozr9.jpg';
/* THIS IS NOT WORKING WITH URI (file:///) BUT IT DOES WITH URL (https://) */
image.src = url;
console.log(uri);
console.log(url);
image.addEventListener('load', () => {
ctx.drawImage(image, 0, 0, 320, 320);
console.log("made it here");
});
})();
});
return (
<View style={{ flex: 1 }}>
<Canvas ref={canvasRef} />
</View>
)
}