Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add explanation of how toDataURL works #2432

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 71 additions & 0 deletions USAGE.md
Original file line number Diff line number Diff line change
Expand Up @@ -1390,3 +1390,74 @@ 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 size, format (JPEG or PNG) and quality of the output image. Object can include the following properties:

``` ts
format?: 'png' | 'jpeg' // default: 'png'.
size?: {
width: number
height: number
}
quality?: number // number in range `0-1` (only applicable for jpeg format)
```

## 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<Svg | null>(null);
const {width, height} = Dimensions.get('screen');

const optionsWithJPEGFormat: ToDataUrlOptions = {
format: 'jpeg',
width,
height,
quality: 100,
};

const optionsWithPNGFormat: ToDataUrlOptions = {
format: 'png',
width,
height,
};

return (
<>
<Svg ref={ref} viewBox="0 0 24 24" fill="black" width={250} height={250}>
<Path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.514 2 12 6.486 2 12 2zm0-2C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.507 13.941c-1.512 1.195-3.174 1.931-5.506 1.931-2.334 0-3.996-.736-5.508-1.931L6 14.434C7.127 16.154 9.2 18 12.001 18c2.8 0 4.872-1.846 5.999-3.566l-.493-.493zM8.5 8a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm7 0a1.5 1.5 0 100 3 1.5 1.5 0 000-3z" />
</Svg>
<Button
onPress={() => {
ref.current?.toDataURL(base64Image => {
console.log(base64Image);
}, optionsWithJPEGFormat);
}}
title="log data URL"
/>
</>
);
};
```
Loading