Increase quality of the image exporting from canvas

[Pushpajekumar]

Description

  const snapshot = await canvasRef.current.makeImageSnapshot(undefined, 3);
  if (!snapshot) {
    Alert.alert('Error', 'Failed to take a snapshot. Please try again.');
    return;
  }

  const base64 = snapshot.encodeToBase64();
  const fileUri = FileSystem.cacheDirectory + `art_frame_${Date.now()}.png`;

i have an app artveda it is on the playstore where i am using react native canvas to merge image and text but when i am merging the image with text and other it and exporting it as image the quality of the image is very bad or we can say worse. I want original resolution and quality of the image did not getting i tried multiple ways and not working anything. please add this feature because other like fabric js is giving in web...

[wcandillon]

Can you provide a standalone reproducible example? we could take a look.

[Pushpajekumar]

const handleDownload = useCallback(async () => {
if (!isCanvasReady || !canvasRef.current || isDownloading) {
if (isDownloading) {
return;
}
Alert.alert('Error', 'Canvas is not ready yet. Please wait.');
return;
}

setIsDownloading(true);
try {
const { status } = await MediaLibrary.requestPermissionsAsync();

if (status !== 'granted') {
Alert.alert(
'Permission Required',
'To save images, this app needs access to your media library.',
[
{ text: 'Cancel', style: 'cancel' },
{ text: 'Open Settings', onPress: () => Linking.openSettings() }
]
);
return;
}

// Double check canvas is still available
if (!canvasRef.current) {
Alert.alert('Error', 'Canvas not ready. Please try again.');
return;
}

const snapshot = await canvasRef.current.makeImageSnapshot(undefined, 3);
if (!snapshot) {
Alert.alert('Error', 'Failed to take a snapshot. Please try again.');
return;
}

const base64 = snapshot.encodeToBase64();
const fileUri = FileSystem.cacheDirectory + art_frame_${Date.now()}.png;

await FileSystem.writeAsStringAsync(fileUri, base64, {
encoding: FileSystem.EncodingType.Base64,
});

const asset = await MediaLibrary.createAssetAsync(fileUri);

if (Platform.OS === 'android') {
try {
const albumName = 'ArtVeda';
const album = await MediaLibrary.getAlbumAsync(albumName);

  if (album) {
    await MediaLibrary.addAssetsToAlbumAsync([asset], album, false);
  } else {
    await MediaLibrary.createAlbumAsync(albumName, asset, false);
  }
} catch (albumError) {
  console.error('Album creation error:', albumError);
}

}

if (currentUser && currentUser.length > 0) {
try {
await database.createDocument(
'...',
'....',
ID.unique(),
{
posts: [currentPostId],
users: [currentUser[0].$id],
userId: currentUser[0].$id,
}
);
} catch (dbError) {
console.error('Failed to save download record:', dbError);
}
}

if (Platform.OS === 'android') {
ToastAndroid.show('Image saved successfully!', ToastAndroid.SHORT);
} else {
Alert.alert('Success', 'Image saved to your gallery!');
}

await FileSystem.deleteAsync(fileUri, { idempotent: true });

} catch (error: any) {
console.error('Download error:', error);
Alert.alert('Error', Failed to save image: ${error.message || 'Unknown error'});
} finally {
setIsDownloading(false);
}
}, [currentPostId, currentUser, isCanvasReady, isDownloading]);

This is my function to cenvert react native skia canvas to image and save it in to user device

[Pushpajekumar]

<Canvas
ref={canvasRef}
style={StyleSheet.absoluteFill}
onLayout={() => {
setTimeout(() => {
if (canvasRef.current && !isFrameLoading && post && postImage) {
setIsCanvasReady(true);
}
}, 1000);
}}
>
{!isFrameLoading && (
<>
<SkiaImage
image={postImage}
fit="contain"
x={0}
y={0}
width={canvasOrientation === 'square'
? deviceWidth - 40
: canvasOrientation === 'portrait'
? postWidthTesting/1.5
: width - 40}
height={canvasOrientation === 'square'
? deviceWidth - 40
: canvasOrientation === 'portrait'
? postHeightTesting/1.5
: width - 40}
/>
{elements.map((el) => {
if (el.type === 'text') {
// console.warn(el, "Rendering Text Element 📝🔵");
return renderTextElement(el);
}
if (el.type === 'image') {
return renderImageElement(el);
}
return null;
})}
</>
)}

This is my canvas where i am rendering the images and text (user info) and then user can download the image where i am converting canvas to image but when we are converting the canvas to image its quality degrade, i want highest possible quality