From 252135c1792529b63c754270fa42c9f7b1ef2d35 Mon Sep 17 00:00:00 2001 From: bohdanprog Date: Thu, 29 Aug 2024 11:26:51 +0200 Subject: [PATCH 1/6] feat: add explanation of how toDataURL works --- USAGE.md | 82 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 82 insertions(+) diff --git a/USAGE.md b/USAGE.md index 65e9b446e..48ac94211 100644 --- a/USAGE.md +++ b/USAGE.md @@ -1390,3 +1390,85 @@ const styles = StyleSheet.create({ ``` ![FilterImage](./screenshots/filterImage.png) + +# toDataURL Method + +The `toDataURL` method is a utility function designed to convert an SVG element into a Base64-encoded image format (PNG or JPEG). + +```ts +toDataURL( + callback: (base64: string) => void, + options?: ToDataUrlOptions +) +``` + +## Parameters +```ts +callback: (base64: string) => void +``` +A function that receives the Base64-encoded string as its argument once the SVG conversion is complete. The string represents the converted image data. + +`options?: ToDataUrlOptions` +An object specifying the format and dimensions of the output image. The options object can include the following properties: +``` ts +format: 'png' | 'jpeg' +Specifies the output image format. If not provided any options, the default format is PNG. + +quality?: number +(Only applicable for jpeg format) +A value between 0 and 1 specifying the image quality, with 1 being the highest quality. The default value is 1. + +width: number +The desired width of the output image. + +height: number +The desired height of the output image. +``` + +## Example: + +```tsx +import * as React from 'react'; +import {Button, Dimensions, View} from 'react-native'; +import Svg, {Path, type ToDataUrlOptions} from 'react-native-svg'; + +const SvgLogoWelcome = () => { + const ref = React.useRef(null); + const {width, height} = Dimensions.get('screen'); + + const optionsWithJPEGFormat: ToDataUrlOptions = { + format: 'jpeg', + width, + height, + quality: 100, + }; + + const optionsWithPNGFormat: ToDataUrlOptions = { + format: 'png', + width, + height, + }; + + return ( + + + ); +}; +``` From 51094b0487f8dc505994140b4324796afe1613e4 Mon Sep 17 00:00:00 2001 From: bohdanprog Date: Tue, 24 Sep 2024 15:08:32 +0200 Subject: [PATCH 2/6] docs: update docs --- USAGE.md | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/USAGE.md b/USAGE.md index 48ac94211..5dc9d2198 100644 --- a/USAGE.md +++ b/USAGE.md @@ -1410,19 +1410,18 @@ A function that receives the Base64-encoded string as its argument once the SVG `options?: ToDataUrlOptions` An object specifying the format and dimensions of the output image. The options object can include the following properties: + ``` ts -format: 'png' | 'jpeg' -Specifies the output image format. If not provided any options, the default format is PNG. +format: 'png' | 'jpeg' // Specifies the output image format. If not provided any options, the default format is PNG. -quality?: number (Only applicable for jpeg format) -A value between 0 and 1 specifying the image quality, with 1 being the highest quality. The default value is 1. +quality?: number // the default value range between 0 - 1 -width: number -The desired width of the output image. +size?: { + width: number + height: number +} -height: number -The desired height of the output image. ``` ## Example: From bcf46345c6a2bc4541a05149d8e26d7fccf5e366 Mon Sep 17 00:00:00 2001 From: Bohdan Artiukhov Date: Wed, 9 Oct 2024 10:52:59 +0200 Subject: [PATCH 3/6] simplify example Co-authored-by: Jakub Grzywacz --- USAGE.md | 20 +++++++------------- 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/USAGE.md b/USAGE.md index 5dc9d2198..ff95f60f8 100644 --- a/USAGE.md +++ b/USAGE.md @@ -1449,25 +1449,19 @@ const SvgLogoWelcome = () => { }; return ( - + <> + + + + ); }; ``` From b97906b289e0af84073b02f242fe0c1a17a7924c Mon Sep 17 00:00:00 2001 From: Bohdan Artiukhov Date: Wed, 9 Oct 2024 10:53:48 +0200 Subject: [PATCH 4/6] update description about toDataUrlOptions Co-authored-by: Jakub Grzywacz --- USAGE.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/USAGE.md b/USAGE.md index ff95f60f8..f1fcb9671 100644 --- a/USAGE.md +++ b/USAGE.md @@ -1409,7 +1409,7 @@ callback: (base64: string) => void A function that receives the Base64-encoded string as its argument once the SVG conversion is complete. The string represents the converted image data. `options?: ToDataUrlOptions` -An object specifying the format and dimensions of the output image. The options object can include the following properties: +An object specifying the size, format (JPEG or PNG) and quality of the output image. Object can include the following properties: ``` ts format: 'png' | 'jpeg' // Specifies the output image format. If not provided any options, the default format is PNG. From afcf7868316e7643f3ec36f6e7c817f4c3132289 Mon Sep 17 00:00:00 2001 From: Bohdan Artiukhov Date: Wed, 9 Oct 2024 10:54:10 +0200 Subject: [PATCH 5/6] Update USAGE.md Co-authored-by: Jakub Grzywacz --- USAGE.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/USAGE.md b/USAGE.md index f1fcb9671..d4ee83591 100644 --- a/USAGE.md +++ b/USAGE.md @@ -1413,15 +1413,11 @@ An object specifying the size, format (JPEG or PNG) and quality of the output im ``` ts format: 'png' | 'jpeg' // Specifies the output image format. If not provided any options, the default format is PNG. - -(Only applicable for jpeg format) -quality?: number // the default value range between 0 - 1 - size?: { width: number height: number } - +quality?: number // number in range `0-1` (only applicable for jpeg format) ``` ## Example: From b76a76526ed4651951982d3b3539ea5fec46d044 Mon Sep 17 00:00:00 2001 From: Bohdan Artiukhov Date: Wed, 9 Oct 2024 10:54:43 +0200 Subject: [PATCH 6/6] simplify explanation about Co-authored-by: Jakub Grzywacz --- USAGE.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/USAGE.md b/USAGE.md index d4ee83591..af8c5d269 100644 --- a/USAGE.md +++ b/USAGE.md @@ -1412,7 +1412,7 @@ A function that receives the Base64-encoded string as its argument once the SVG An object specifying the size, format (JPEG or PNG) and quality of the output image. Object can include the following properties: ``` ts -format: 'png' | 'jpeg' // Specifies the output image format. If not provided any options, the default format is PNG. +format?: 'png' | 'jpeg' // default: 'png'. size?: { width: number height: number