diff --git a/react-native-image-marker/ImageMarker.tsx b/react-native-image-marker/ImageMarker.tsx
index f9e0c478..132232e1 100644
--- a/react-native-image-marker/ImageMarker.tsx
+++ b/react-native-image-marker/ImageMarker.tsx
@@ -538,9 +538,14 @@ export const ImageMarker = () => {
// font color
const [url_text_color1, seturl_text_color1] = useState('');
const [url_text_color2, seturl_text_color2] = useState('');
+ // font name
+ const [url_text_fontName, seturl_text_fontName] = useState('');
// font size
const [url_text_fontSize30, seturl_text_fontSize30] = useState('');
const [url_text_fontSize100, seturl_text_fontSize100] = useState('');
+ // font italic
+ const [url_text_italic, seturl_text_italic] = useState('');
+ const [url_text_skewX, seturl_text_skewX] = useState('');
// underline
const [url_text_underline, seturl_text_underline] = useState('');
//strikeThrough
@@ -583,15 +588,55 @@ export const ImageMarker = () => {
const [url_text_backgroundstyle_padding_x, seturl_text_backgroundstyle_padding_x] = useState('');
const [url_text_backgroundstyle_padding_y, seturl_text_backgroundstyle_padding_y] = useState('');
+ // font name
+ const text_options_fontName: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ fontSize: 100,
+ fontName: 'stcaiyun',
+ italic: true
+ }
+ }
+ ]
+ }
+
// textBackgroundStyle
+ // italic
+ const text_options_italic: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ fontSize: 100,
+ textAlign: 'left',
+ italic: true
+ }
+ }
+ ]
+ }
+ // skewX
+ const text_options_skewX: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ fontSize: 100,
+ textAlign: 'center',
+ skewX: -0.5
+ }
+ }
+ ]
+ }
// textalain
const text_options_textalain_left: TextMarkOptions = {
backgroundImage: { src: require('./assets/code-images/1.png') },
watermarkTexts: [{
text: 'test text',
- style:{
- fontSize:100,
- textAlign:'left'
+ style: {
+ fontSize: 100,
+ textAlign: 'left'
}
}
]
@@ -600,9 +645,9 @@ export const ImageMarker = () => {
backgroundImage: { src: require('./assets/code-images/1.png') },
watermarkTexts: [{
text: 'test text',
- style:{
- fontSize:100,
- textAlign:'center'
+ style: {
+ fontSize: 100,
+ textAlign: 'center'
}
}
]
@@ -611,9 +656,9 @@ export const ImageMarker = () => {
backgroundImage: { src: require('./assets/code-images/1.png') },
watermarkTexts: [{
text: 'test text',
- style:{
- fontSize:100,
- textAlign:'right'
+ style: {
+ fontSize: 100,
+ textAlign: 'right'
}
}
]
@@ -1245,6 +1290,14 @@ export const ImageMarker = () => {
}
// test style
+ // font name
+ const markTextFontName = () => {
+ Marker.markText(text_options_fontName).then((result) => {
+ seturl_text_fontName(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
// text alain
const markTextTextAlainLeft = () => {
Marker.markText(text_options_textalain_left).then((result) => {
@@ -1472,6 +1525,22 @@ export const ImageMarker = () => {
console.log('error', error)
})
}
+ // skewX
+ const markTextskewX = () => {
+ Marker.markText(text_options_skewX).then((result) => {
+ seturl_text_skewX(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ // text font italic
+ const markTextFontItalic = () => {
+ Marker.markText(text_options_italic).then((result) => {
+ seturl_text_italic(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
// text font size
const markTextFontSize30 = () => {
Marker.markText(text_options_fontSize30).then((result) => {
@@ -1698,7 +1767,7 @@ export const ImageMarker = () => {
{url_icon_topLeft}
-
+
@@ -1718,7 +1787,7 @@ export const ImageMarker = () => {
{url_icon_topRight}
-
+
@@ -1738,7 +1807,7 @@ export const ImageMarker = () => {
{url_icon_topCenter}
-
+
@@ -1758,7 +1827,7 @@ export const ImageMarker = () => {
{url_icon_bottomLeft}
-
+
@@ -1778,7 +1847,7 @@ export const ImageMarker = () => {
{url_icon_bottomCenter}
-
+
@@ -1798,7 +1867,7 @@ export const ImageMarker = () => {
{url_icon_bottomRight}
-
+
@@ -1818,7 +1887,7 @@ export const ImageMarker = () => {
{url_icon_center}
-
+
@@ -1838,7 +1907,7 @@ export const ImageMarker = () => {
{url_icon_xy}
-
+
@@ -1858,7 +1927,7 @@ export const ImageMarker = () => {
{url_icon_xypercent}
-
+
@@ -1878,7 +1947,7 @@ export const ImageMarker = () => {
{url_backalpha0_1}
-
+
@@ -1898,7 +1967,7 @@ export const ImageMarker = () => {
{url_backalpha1}
-
+
@@ -1918,7 +1987,7 @@ export const ImageMarker = () => {
{url_alpha0_1}
-
+
@@ -1938,7 +2007,7 @@ export const ImageMarker = () => {
{url_alpha1}
-
+
@@ -1958,7 +2027,7 @@ export const ImageMarker = () => {
{url_backscale0_5}
-
+
@@ -1978,7 +2047,7 @@ export const ImageMarker = () => {
{url_backscale1_5}
-
+
@@ -1998,7 +2067,7 @@ export const ImageMarker = () => {
{url_scale0_5}
-
+
@@ -2018,7 +2087,7 @@ export const ImageMarker = () => {
{url_scale1_5}
-
+
@@ -2038,7 +2107,7 @@ export const ImageMarker = () => {
{url_backrotate50}
-
+
@@ -2058,7 +2127,7 @@ export const ImageMarker = () => {
{url_backrotate20}
-
+
@@ -2078,7 +2147,7 @@ export const ImageMarker = () => {
{url_rotate50}
-
+
@@ -2098,7 +2167,7 @@ export const ImageMarker = () => {
{url_rotate20}
-
+
@@ -2118,7 +2187,7 @@ export const ImageMarker = () => {
{qualityurl_100}
-
+
@@ -2138,7 +2207,7 @@ export const ImageMarker = () => {
{qualityurl_20}
-
+
@@ -2158,7 +2227,7 @@ export const ImageMarker = () => {
{file1url}
-
+
@@ -2178,7 +2247,7 @@ export const ImageMarker = () => {
{file2url}
-
+
@@ -2198,7 +2267,7 @@ export const ImageMarker = () => {
{filetypeurl_png}
-
+
@@ -2218,7 +2287,7 @@ export const ImageMarker = () => {
{filetypeurl_jpg}
-
+
@@ -2239,11 +2308,11 @@ export const ImageMarker = () => {
numberOfLines={1}>
{filetypeurl_base64}
-
+
-
+
@@ -2260,11 +2329,31 @@ export const ImageMarker = () => {
{url_text_textalain_left}
-
+
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_fontName}
+
+
-
@@ -2281,11 +2370,11 @@ export const ImageMarker = () => {
{url_text_textalain_center}
-
+
-
+
@@ -2302,7 +2391,47 @@ export const ImageMarker = () => {
{url_text_textalain_right}
-
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_skewX}
+
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_italic}
+
+
@@ -2322,7 +2451,7 @@ export const ImageMarker = () => {
{url_text_fontSize100}
-
+
@@ -2342,7 +2471,7 @@ export const ImageMarker = () => {
{url_text_fontSize30}
-
+
@@ -2362,7 +2491,7 @@ export const ImageMarker = () => {
{url_text_color2}
-
+
@@ -2382,7 +2511,7 @@ export const ImageMarker = () => {
{url_text_color1}
-
+
@@ -2402,7 +2531,7 @@ export const ImageMarker = () => {
{url_text_test1}
-
+
@@ -2422,7 +2551,7 @@ export const ImageMarker = () => {
{url_text_test2}
-
+
@@ -2443,7 +2572,7 @@ export const ImageMarker = () => {
{url_text_backgroundstyle_padding_all1}
-
+
@@ -2463,7 +2592,7 @@ export const ImageMarker = () => {
{url_text_backgroundstyle_padding_all2}
-
+
@@ -2483,7 +2612,7 @@ export const ImageMarker = () => {
{url_text_backgroundstyle_padding_all3}
-
+
@@ -2503,7 +2632,7 @@ export const ImageMarker = () => {
{url_text_backgroundstyle_padding_all4}
-
+
@@ -2524,7 +2653,7 @@ export const ImageMarker = () => {
{url_text_backgroundstyle_padding_top}
-
+
@@ -2544,7 +2673,7 @@ export const ImageMarker = () => {
{url_text_backgroundstyle_padding_bottom}
-
+
@@ -2564,7 +2693,7 @@ export const ImageMarker = () => {
{url_text_backgroundstyle_padding_left}
-
+
@@ -2584,7 +2713,7 @@ export const ImageMarker = () => {
{url_text_backgroundstyle_padding_right}
-
+
@@ -2604,7 +2733,7 @@ export const ImageMarker = () => {
{url_text_backgroundstyle_padding_horizontal}
-
+
@@ -2624,7 +2753,7 @@ export const ImageMarker = () => {
{url_text_backgroundstyle_padding_vertical}
-
+
@@ -2644,7 +2773,7 @@ export const ImageMarker = () => {
{url_text_backgroundstyle_padding_x}
-
+
@@ -2664,7 +2793,7 @@ export const ImageMarker = () => {
{url_text_backgroundstyle_padding_y}
-
+
@@ -2684,7 +2813,7 @@ export const ImageMarker = () => {
{url_text_backgroundstyle_cornerRadius_all}
-
+
@@ -2704,7 +2833,7 @@ export const ImageMarker = () => {
{url_text_backgroundstyle_cornerRadius_topLeft}
-
+
@@ -2724,7 +2853,7 @@ export const ImageMarker = () => {
{url_text_backgroundstyle_cornerRadius_topRight}
-
+
@@ -2744,7 +2873,7 @@ export const ImageMarker = () => {
{url_text_backgroundstyle_cornerRadius_bottomLeft}
-
+
@@ -2764,7 +2893,7 @@ export const ImageMarker = () => {
{url_text_backgroundstyle_cornerRadius_bottomRight}
-
+
@@ -2784,7 +2913,7 @@ export const ImageMarker = () => {
{url_text_backgroundstyle_type_stretchX}
-
+
@@ -2804,7 +2933,7 @@ export const ImageMarker = () => {
{url_text_backgroundstyle_type_stretchY}
-
+
@@ -2824,7 +2953,7 @@ export const ImageMarker = () => {
{url_text_backgroundstyle_color_green}
-
+
@@ -2844,7 +2973,7 @@ export const ImageMarker = () => {
{url_text_backgroundstyle_color_red}
-
+
@@ -2864,7 +2993,7 @@ export const ImageMarker = () => {
{url_text_shadowStyle1}
-
+
@@ -2884,7 +3013,7 @@ export const ImageMarker = () => {
{url_text_shadowStyle2}
-
+
@@ -2904,7 +3033,7 @@ export const ImageMarker = () => {
{url_text_bold}
-
+
@@ -2924,7 +3053,7 @@ export const ImageMarker = () => {
{url_text_rotate30}
-
+
@@ -2944,7 +3073,7 @@ export const ImageMarker = () => {
{url_text_rotate50}
-
+
@@ -2964,7 +3093,7 @@ export const ImageMarker = () => {
{url_text_underline}
-
+
@@ -2984,7 +3113,7 @@ export const ImageMarker = () => {
{url_text_strikeThrough}
-
+
@@ -3004,7 +3133,7 @@ export const ImageMarker = () => {
{url_text_topLeft}
-
+
@@ -3024,7 +3153,7 @@ export const ImageMarker = () => {
{url_text_topRight}
-
+
@@ -3044,7 +3173,7 @@ export const ImageMarker = () => {
{url_text_topCenter}
-
+
@@ -3064,7 +3193,7 @@ export const ImageMarker = () => {
{url_text_bottomLeft}
-
+
@@ -3084,7 +3213,7 @@ export const ImageMarker = () => {
{url_text_bottomCenter}
-
+
@@ -3104,7 +3233,7 @@ export const ImageMarker = () => {
{url_text_bottomRight}
-
+
@@ -3124,7 +3253,7 @@ export const ImageMarker = () => {
{url_text_center}
-
+
@@ -3144,7 +3273,7 @@ export const ImageMarker = () => {
{url_text_xy}
-
+
@@ -3164,7 +3293,7 @@ export const ImageMarker = () => {
{url_text_xypercent}
-
+
@@ -3184,7 +3313,7 @@ export const ImageMarker = () => {
{url_backalpha0_1_text}
-
+
@@ -3204,7 +3333,7 @@ export const ImageMarker = () => {
{url_backalpha1_text}
-
+
@@ -3224,7 +3353,7 @@ export const ImageMarker = () => {
{url_backscale0_5_text}
-
+
@@ -3244,7 +3373,7 @@ export const ImageMarker = () => {
{url_backscale1_5_text}
-
+
@@ -3264,7 +3393,7 @@ export const ImageMarker = () => {
{url_backrotate50_text}
-
+
@@ -3284,7 +3413,7 @@ export const ImageMarker = () => {
{url_backrotate20_text}
-
+
@@ -3304,7 +3433,7 @@ export const ImageMarker = () => {
{textqualityurl_100}
-
+
@@ -3324,7 +3453,7 @@ export const ImageMarker = () => {
{textqualityurl_20}
-
+
@@ -3344,7 +3473,7 @@ export const ImageMarker = () => {
{textfile1url}
-
+
@@ -3364,7 +3493,7 @@ export const ImageMarker = () => {
{textfile2url}
-
+
@@ -3384,7 +3513,7 @@ export const ImageMarker = () => {
{textfiletypeurl_png}
-
+
@@ -3404,7 +3533,7 @@ export const ImageMarker = () => {
{textfiletypeurl_jpg}
-
+
@@ -3425,7 +3554,7 @@ export const ImageMarker = () => {
numberOfLines={1}>
{textfiletypeurl_base64}
-
+
diff --git a/react-native-image-marker/ImageMarkerNomal.tsx b/react-native-image-marker/ImageMarkerNomal.tsx
new file mode 100644
index 00000000..ed1bcc01
--- /dev/null
+++ b/react-native-image-marker/ImageMarkerNomal.tsx
@@ -0,0 +1,3296 @@
+import Marker, {
+ Position, ImageFormat, ImageMarkOptions, TextBackgroundType, TextMarkOptions
+} from 'react-native-image-marker'
+import React, { useState } from "react";
+import { StyleSheet, ScrollView, Text, View, Button, Image } from "react-native";
+import { Colors } from 'react-native/Libraries/NewAppScreen';
+
+export const ImageMarkerNomal = () => {
+ // mark image
+ // file name
+ const [file1url, setFilename1] = useState('');
+ const [file2url, setFilename2] = useState('');
+ // iamge type
+ const [filetypeurl_png, setFileTypePng] = useState('');
+ const [filetypeurl_jpg, setFileTypeJpg] = useState('');
+ const [filetypeurl_base64, setFileTypebase64] = useState('');
+ // image quality
+ const [qualityurl_20, setqualityurl_20] = useState('');
+ const [qualityurl_100, setqualityurl_100] = useState('');
+ // image rotate
+ const [url_rotate20, seturl_rotate20] = useState('');
+ const [url_rotate50, seturl_rotate50] = useState('');
+ const [url_backrotate20, seturl_backrotate20] = useState('');
+ const [url_backrotate50, seturl_backrotate50] = useState('');
+ // image scale
+ const [url_scale0_5, seturl_scale0_5] = useState('');
+ const [url_scale1_5, seturl_scale1_5] = useState('');
+ const [url_backscale0_5, seturl_backscale0_5] = useState('');
+ const [url_backscale1_5, seturl_backscale1_5] = useState('');
+ // image alpha
+ const [url_alpha0_1, seturl_alpha0_1] = useState('');
+ const [url_alpha1, seturl_alpha1] = useState('');
+ const [url_backalpha0_1, seturl_backalpha0_1] = useState('');
+ const [url_backalpha1, seturl_backalpha1] = useState('');
+ // image position
+ const [url_icon_topLeft, seturl_icon_topLeft] = useState('');
+ const [url_icon_topRight, seturl_icon_topRight] = useState('');
+ const [url_icon_topCenter, seturl_icon_topCenter] = useState('');
+ const [url_icon_bottomLeft, seturl_icon_bottomLeft] = useState('');
+ const [url_icon_bottomCenter, seturl_icon_bottomCenter] = useState('');
+ const [url_icon_bottomRight, seturl_icon_bottomRight] = useState('');
+ const [url_icon_center, seturl_icon_center] = useState('');
+ const [url_icon_xy, seturl_icon_xy] = useState('');
+ const [url_icon_xypercent, seturl_icon_xypercent] = useState('');
+ // image position
+ const image_options_topLeft: ImageMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkImages: [{
+ src: require('./assets/pravatar-131.jpg'),
+ position: { position: Position.topLeft }
+ }
+ ]
+ }
+ const image_options_topRight: ImageMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkImages: [{
+ src: require('./assets/pravatar-131.jpg'),
+ position: { position: Position.topRight }
+ }
+ ]
+ }
+ const image_options_topCenter: ImageMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkImages: [{
+ src: require('./assets/pravatar-131.jpg'),
+ position: { position: Position.topCenter }
+ }
+ ]
+ }
+ const image_options_bottomLeft: ImageMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkImages: [{
+ src: require('./assets/pravatar-131.jpg'),
+ position: { position: Position.bottomLeft }
+ }
+ ]
+ }
+ const image_options_bottomCenter: ImageMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkImages: [{
+ src: require('./assets/pravatar-131.jpg'),
+ position: { position: Position.bottomCenter }
+ }
+ ]
+ }
+ const image_options_bottomRight: ImageMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkImages: [{
+ src: require('./assets/pravatar-131.jpg'),
+ position: { position: Position.bottomRight }
+ }
+ ]
+ }
+ const image_options_center: ImageMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkImages: [{
+ src: require('./assets/pravatar-131.jpg'),
+ position: { position: Position.center }
+ }
+ ]
+ }
+ const image_options_xy: ImageMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkImages: [{
+ src: require('./assets/pravatar-131.jpg'),
+ position: { X: 30, Y: 50 }
+ }
+ ]
+ }
+ const image_options_xypercent: ImageMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkImages: [{
+ src: require('./assets/pravatar-131.jpg'),
+ position: { X: '10%', Y: '20%' }
+ }
+ ]
+ }
+ // image alpha
+ const image_options_alpha0_1: ImageMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkImages: [{
+ src: require('./assets/pravatar-131.jpg'),
+ alpha: 0.1
+ }
+ ]
+ }
+ const image_options_alpha1: ImageMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkImages: [{
+ src: require('./assets/pravatar-131.jpg'),
+ alpha: 1
+ }
+ ]
+ }
+ const image_options_backalpha0_1: ImageMarkOptions = {
+ backgroundImage: {
+ src: require('./assets/code-images/1.png'),
+ alpha: 0.1
+ },
+ watermarkImages: [{
+ src: require('./assets/pravatar-131.jpg')
+ }
+ ]
+ }
+ const image_options_backalpha1: ImageMarkOptions = {
+ backgroundImage: {
+ src: require('./assets/code-images/1.png'),
+ alpha: 1
+ },
+ watermarkImages: [{
+ src: require('./assets/pravatar-131.jpg'),
+ }
+ ]
+ }
+ // iamge scale
+ const image_options_scale0_5: ImageMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkImages: [{
+ src: require('./assets/pravatar-131.jpg'),
+ scale: 0.5
+ }
+ ]
+ }
+ const image_options_scale1_5: ImageMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkImages: [{
+ src: require('./assets/pravatar-131.jpg'),
+ scale: 1.5
+ }
+ ]
+ }
+ const image_options_backscale0_5: ImageMarkOptions = {
+ backgroundImage: {
+ src: require('./assets/code-images/1.png'),
+ scale: 0.5
+ },
+ watermarkImages: [{
+ src: require('./assets/pravatar-131.jpg'),
+ }
+ ]
+ }
+ const image_options_backscale1_5: ImageMarkOptions = {
+ backgroundImage: {
+ src: require('./assets/code-images/1.png'),
+ scale: 1.5
+ },
+ watermarkImages: [{
+ src: require('./assets/pravatar-131.jpg'),
+ }
+ ]
+ }
+ // image rotate
+ const image_options_backrotate20: ImageMarkOptions = {
+ backgroundImage: {
+ src: require('./assets/code-images/1.png'),
+ rotate: 20
+ },
+ watermarkImages: [{
+ src: require('./assets/pravatar-131.jpg'),
+ }
+ ]
+ }
+ const image_options_backrotate50: ImageMarkOptions = {
+ backgroundImage: {
+ src: require('./assets/code-images/1.png'),
+ rotate: 50
+ },
+ watermarkImages: [{
+ src: require('./assets/pravatar-131.jpg'),
+ }
+ ]
+ }
+ const image_options_rotate20: ImageMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkImages: [{
+ src: require('./assets/pravatar-131.jpg'),
+ rotate: 20
+ }
+ ]
+ }
+ const image_options_rotate50: ImageMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkImages: [{
+ src: require('./assets/pravatar-131.jpg'),
+ rotate: 50
+ }
+ ]
+ }
+ // iamge quality
+ const image_options_qualityurl_20: ImageMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkImages: [{
+ src: require('./assets/pravatar-131.jpg'),
+ }
+ ],
+ quality: 20
+ }
+ const image_options_qualityurl_100: ImageMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkImages: [{
+ src: require('./assets/pravatar-131.jpg'),
+ }
+ ],
+ quality: 100
+ }
+ // image file name
+ const image_options_filename1: ImageMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkImages: [{
+ src: require('./assets/pravatar-131.jpg'),
+ }
+ ],
+ filename: 'test1'
+ }
+ const image_options_filename2: ImageMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkImages: [{
+ src: require('./assets/pravatar-131.jpg'),
+ }
+ ],
+ filename: 'test2'
+ }
+ // image type
+ const image_options_filetype_png: ImageMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkImages: [{
+ src: require('./assets/pravatar-131.jpg'),
+ }
+ ],
+ saveFormat: ImageFormat.png
+ }
+ const image_options_filetyoe_jpg: ImageMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkImages: [{
+ src: require('./assets/pravatar-131.jpg'),
+ }
+ ],
+ saveFormat: ImageFormat.jpg
+ }
+ const image_options_filetyoe_base64: ImageMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkImages: [{
+ src: require('./assets/pravatar-131.jpg'),
+ }
+ ],
+ saveFormat: ImageFormat.base64
+ }
+ // image file name
+ const markImageFilename1 = () => {
+ Marker.markImage(image_options_filename1).then((result) => {
+ setFilename1(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markImageFilename2 = () => {
+ Marker.markImage(image_options_filename2).then((result) => {
+ setFilename2(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ // image type
+ const markImageFiletypepng = () => {
+ Marker.markImage(image_options_filetype_png).then((result) => {
+ setFileTypePng(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markImageFiletypejpg = () => {
+ Marker.markImage(image_options_filetyoe_jpg).then((result) => {
+ setFileTypeJpg(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markImageFiletypebase64 = () => {
+ Marker.markImage(image_options_filetyoe_base64).then((result) => {
+ setFileTypebase64(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ // image quality
+ const markImagequalityurl_20 = () => {
+ Marker.markImage(image_options_qualityurl_20).then((result) => {
+ setqualityurl_20(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markImagequalityurl_100 = () => {
+ Marker.markImage(image_options_qualityurl_100).then((result) => {
+ setqualityurl_100(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ // image rotate
+ const markImagerotate_20 = () => {
+ Marker.markImage(image_options_rotate20).then((result) => {
+ seturl_rotate20(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markImagerotate_50 = () => {
+ Marker.markImage(image_options_rotate50).then((result) => {
+ seturl_rotate50(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markImagebackrotate_20 = () => {
+ Marker.markImage(image_options_backrotate20).then((result) => {
+ seturl_backrotate20(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markImagebackrotate_50 = () => {
+ Marker.markImage(image_options_backrotate50).then((result) => {
+ seturl_backrotate50(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ // image scale
+ const markImagescale0_5 = () => {
+ Marker.markImage(image_options_scale0_5).then((result) => {
+ seturl_scale0_5(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markImagescale1_5 = () => {
+ Marker.markImage(image_options_scale1_5).then((result) => {
+ seturl_scale1_5(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markImagebackscale0_5 = () => {
+ Marker.markImage(image_options_backscale0_5).then((result) => {
+ seturl_backscale0_5(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markImagebackscale1_5 = () => {
+ Marker.markImage(image_options_backscale1_5).then((result) => {
+ seturl_backscale1_5(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ // image alpha
+ const markImagealpha0_1 = () => {
+ Marker.markImage(image_options_alpha0_1).then((result) => {
+ seturl_alpha0_1(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markImagealpha1 = () => {
+ Marker.markImage(image_options_alpha1).then((result) => {
+ seturl_alpha1(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markImagebackalpha0_1 = () => {
+ Marker.markImage(image_options_backalpha0_1).then((result) => {
+ seturl_backalpha0_1(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markImagebackalpha1 = () => {
+ Marker.markImage(image_options_backalpha1).then((result) => {
+ seturl_backalpha1(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ // position
+ const markImagetopleft = () => {
+ Marker.markImage(image_options_topLeft).then((result) => {
+ seturl_icon_topLeft(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markImagetopcenter = () => {
+ Marker.markImage(image_options_topCenter).then((result) => {
+ seturl_icon_topCenter(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markImagetopright = () => {
+ Marker.markImage(image_options_topRight).then((result) => {
+ seturl_icon_topRight(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markImagecenter = () => {
+ Marker.markImage(image_options_center).then((result) => {
+ seturl_icon_center(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markImagebottomleft = () => {
+ Marker.markImage(image_options_bottomLeft).then((result) => {
+ seturl_icon_bottomLeft(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markImagebottomcenter = () => {
+ Marker.markImage(image_options_bottomCenter).then((result) => {
+ seturl_icon_bottomCenter(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markImagebottomright = () => {
+ Marker.markImage(image_options_bottomRight).then((result) => {
+ seturl_icon_bottomRight(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markImagexy = () => {
+ Marker.markImage(image_options_xy).then((result) => {
+ seturl_icon_xy(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markImagexppercentt = () => {
+ Marker.markImage(image_options_xypercent).then((result) => {
+ seturl_icon_xypercent(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+
+
+ // mark text
+ // file name
+ const [textfile1url, setTextFilename1] = useState('');
+ const [textfile2url, setTextFilename2] = useState('');
+ // iamge type
+ const [textfiletypeurl_png, setTextFileTypePng] = useState('');
+ const [textfiletypeurl_jpg, setTextFileTypeJpg] = useState('');
+ const [textfiletypeurl_base64, setTextFileTypebase64] = useState('');
+ // image quality
+ const [textqualityurl_20, setTextqualityurl_20] = useState('');
+ const [textqualityurl_100, setTextqualityurl_100] = useState('');
+ // image rotate
+ const [url_backrotate20_text, seturl_backrotate20_text] = useState('');
+ const [url_backrotate50_text, seturl_backrotate50_text] = useState('');
+ // image scale
+ const [url_backscale0_5_text, seturl_backscale0_5_text] = useState('');
+ const [url_backscale1_5_text, seturl_backscale1_5_text] = useState('');
+
+ // text alain
+ const [url_text_textalain_left, seturl_text_textalain_left] = useState('');
+ const [url_text_textalain_center, seturl_text_textalain_center] = useState('');
+ const [url_text_textalain_right, seturl_text_textalain_right] = useState('');
+ // image alpha
+ const [url_backalpha0_1_text, seturl_backalpha0_1_text] = useState('');
+ const [url_backalpha1_text, seturl_backalpha1_text] = useState('');
+ // text position
+ const [url_text_topLeft, seturl_text_topLeft] = useState('');
+ const [url_text_topRight, seturl_text_topRight] = useState('');
+ const [url_text_topCenter, seturl_text_topCenter] = useState('');
+ const [url_text_bottomLeft, seturl_text_bottomLeft] = useState('');
+ const [url_text_bottomCenter, seturl_text_bottomCenter] = useState('');
+ const [url_text_bottomRight, seturl_text_bottomRight] = useState('');
+ const [url_text_center, seturl_text_center] = useState('');
+ const [url_text_xy, seturl_text_xy] = useState('');
+ const [url_text_xypercent, seturl_text_xypercent] = useState('');
+ // text text test
+ const [url_text_test1, seturl_text_test1] = useState('');
+ const [url_text_test2, seturl_text_test2] = useState('');
+
+ // text style
+ // font color
+ const [url_text_color1, seturl_text_color1] = useState('');
+ const [url_text_color2, seturl_text_color2] = useState('');
+ // font name
+ const [url_text_fontName, seturl_text_fontName] = useState('');
+ // font size
+ const [url_text_fontSize30, seturl_text_fontSize30] = useState('');
+ const [url_text_fontSize100, seturl_text_fontSize100] = useState('');
+ // font italic
+ const [url_text_italic, seturl_text_italic] = useState('');
+ const [url_text_skewX, seturl_text_skewX] = useState('');
+ // underline
+ const [url_text_underline, seturl_text_underline] = useState('');
+ //strikeThrough
+ const [url_text_strikeThrough, seturl_text_strikeThrough] = useState('');
+ // bold
+ const [url_text_bold, seturl_text_bold] = useState('');
+ //rotate
+ const [url_text_rotate30, seturl_text_rotate30] = useState('');
+ //rotate
+ const [url_text_rotate50, seturl_text_rotate50] = useState('');
+ //rotate
+ const [url_text_shadowStyle1, seturl_text_shadowStyle1] = useState('');
+ //rotate
+ const [url_text_shadowStyle2, seturl_text_shadowStyle2] = useState('');
+ // text style
+ // textBackgroundStyle
+ // color
+ const [url_text_backgroundstyle_color_red, seturl_text_backgroundstyle_color_red] = useState('');
+ const [url_text_backgroundstyle_color_green, seturl_text_backgroundstyle_color_green] = useState('');
+ // type
+ const [url_text_backgroundstyle_type_stretchX, seturl_text_backgroundstyle_type_stretchX] = useState('');
+ const [url_text_backgroundstyle_type_stretchY, seturl_text_backgroundstyle_type_stretchY] = useState('');
+ // cornerRadius
+ const [url_text_backgroundstyle_cornerRadius_all, seturl_text_backgroundstyle_cornerRadius_all] = useState('');
+ const [url_text_backgroundstyle_cornerRadius_topLeft, seturl_text_backgroundstyle_cornerRadius_topLeft] = useState('');
+ const [url_text_backgroundstyle_cornerRadius_topRight, seturl_text_backgroundstyle_cornerRadius_topRight] = useState('');
+ const [url_text_backgroundstyle_cornerRadius_bottomLeft, seturl_text_backgroundstyle_cornerRadius_bottomLeft] = useState('');
+ const [url_text_backgroundstyle_cornerRadius_bottomRight, seturl_text_backgroundstyle_cornerRadius_bottomRight] = useState('');
+ // padding
+ const [url_text_backgroundstyle_padding_all1, seturl_text_backgroundstyle_padding_all1] = useState('');
+ const [url_text_backgroundstyle_padding_all2, seturl_text_backgroundstyle_padding_all2] = useState('');
+ const [url_text_backgroundstyle_padding_all3, seturl_text_backgroundstyle_padding_all3] = useState('');
+ const [url_text_backgroundstyle_padding_all4, seturl_text_backgroundstyle_padding_all4] = useState('');
+ const [url_text_backgroundstyle_padding_left, seturl_text_backgroundstyle_padding_left] = useState('');
+ const [url_text_backgroundstyle_padding_right, seturl_text_backgroundstyle_padding_right] = useState('');
+ const [url_text_backgroundstyle_padding_top, seturl_text_backgroundstyle_padding_top] = useState('');
+ const [url_text_backgroundstyle_padding_bottom, seturl_text_backgroundstyle_padding_bottom] = useState('');
+ const [url_text_backgroundstyle_padding_horizontal, seturl_text_backgroundstyle_padding_horizontal] = useState('');
+ const [url_text_backgroundstyle_padding_vertical, seturl_text_backgroundstyle_padding_vertical] = useState('');
+ const [url_text_backgroundstyle_padding_x, seturl_text_backgroundstyle_padding_x] = useState('');
+ const [url_text_backgroundstyle_padding_y, seturl_text_backgroundstyle_padding_y] = useState('');
+
+ // font name
+ const text_options_fontName: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ fontSize: 100,
+ fontName: 'stcaiyun',
+ italic: true
+ }
+ }
+ ]
+ }
+
+ // textBackgroundStyle
+ // italic
+ const text_options_italic: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ fontSize: 100,
+ textAlign: 'left',
+ italic: true
+ }
+ }
+ ]
+ }
+ // skewX
+ const text_options_skewX: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ fontSize: 100,
+ textAlign: 'center',
+ skewX: -0.5
+ }
+ }
+ ]
+ }
+ // textalain
+ const text_options_textalain_left: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ fontSize: 100,
+ textAlign: 'left'
+ }
+ }
+ ]
+ }
+ const text_options_textalain_center: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ fontSize: 100,
+ textAlign: 'center'
+ }
+ }
+ ]
+ }
+ const text_options_textalain_right: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ fontSize: 100,
+ textAlign: 'right'
+ }
+ }
+ ]
+ }
+ // padding
+ const text_options_backgroundstyle_padding_all1: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ textBackgroundStyle: {
+ color: '#0FFF00',
+ padding: '10%'
+ }
+ }
+ }
+ ]
+ }
+ const text_options_backgroundstyle_padding_all2: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ textBackgroundStyle: {
+ color: '#0FFF00',
+ padding: '10% 15%'
+ }
+ }
+ }
+ ]
+ }
+ const text_options_backgroundstyle_padding_all3: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ textBackgroundStyle: {
+ color: '#0FFF00',
+ padding: '10% 15% 20%'
+ }
+ }
+ }
+ ]
+ }
+ const text_options_backgroundstyle_padding_all4: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ textBackgroundStyle: {
+ color: '#0FFF00',
+ padding: '10% 15% 20% 5%'
+ }
+ }
+ }
+ ]
+ }
+ const text_options_backgroundstyle_padding_top: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ textBackgroundStyle: {
+ color: '#0FFF00',
+ paddingTop: '10%'
+ }
+ }
+ }
+ ]
+ }
+ const text_options_backgroundstyle_padding_left: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ textBackgroundStyle: {
+ color: '#0FFF00',
+ paddingLeft: '10%'
+ }
+ }
+ }
+ ]
+ }
+ const text_options_backgroundstyle_padding_right: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ textBackgroundStyle: {
+ color: '#0FFF00',
+ paddingRight: '10%'
+ }
+ }
+ }
+ ]
+ }
+ const text_options_backgroundstyle_padding_bottom: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ textBackgroundStyle: {
+ color: '#0FFF00',
+ paddingBottom: '10%'
+ }
+ }
+ }
+ ]
+ }
+ const text_options_backgroundstyle_padding_horizontal: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ textBackgroundStyle: {
+ color: '#0FFF00',
+ paddingHorizontal: '10%'
+ }
+ }
+ }
+ ]
+ }
+ const text_options_backgroundstyle_padding_vertical: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ textBackgroundStyle: {
+ color: '#0FFF00',
+ paddingVertical: '10%'
+ }
+ }
+ }
+ ]
+ }
+ const text_options_backgroundstyle_padding_x: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ textBackgroundStyle: {
+ color: '#0FFF00',
+ paddingX: '10%'
+ }
+ }
+ }
+ ]
+ }
+ const text_options_backgroundstyle_padding_y: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ textBackgroundStyle: {
+ color: '#0FFF00',
+ paddingY: '10%'
+ }
+ }
+ }
+ ]
+ }
+
+ // cornerRadius
+ const text_options_backgroundstyle_cornerRadius_all: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ fontSize: 100,
+ textBackgroundStyle: {
+
+ color: '#0FFF00',
+ cornerRadius: { all: { "x": "20%", "y": "30%" } }
+ }
+ }
+ }
+ ]
+ }
+ const text_options_backgroundstyle_cornerRadius_topLeft: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ fontSize: 100,
+ textBackgroundStyle: {
+
+ cornerRadius: { topLeft: { "x": "20%", "y": "30%" } },
+ color: '#0FFF00'
+ }
+ }
+ }
+ ]
+ }
+ const text_options_backgroundstyle_cornerRadius_topRight: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ fontSize: 100,
+ textBackgroundStyle: {
+
+ cornerRadius: { topRight: { "x": "20%", "y": "30%" } },
+ color: '#0FFF00'
+ }
+ }
+ }
+ ]
+ }
+ const text_options_backgroundstyle_cornerRadius_bottomLeft: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ fontSize: 100,
+ textBackgroundStyle: {
+
+ cornerRadius: { bottomLeft: { "x": "20%", "y": "30%" } },
+ color: '#0FFF00'
+ }
+ }
+ }
+ ]
+ }
+ const text_options_backgroundstyle_cornerRadius_bottomRight: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ fontSize: 100,
+ textBackgroundStyle: {
+ cornerRadius: { bottomRight: { "x": "20%", "y": "30%" } },
+ color: '#0FFF00'
+ }
+ }
+ }
+ ]
+ }
+ // type
+ const text_options_backgroundstyle_type_stretchX: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ textBackgroundStyle: {
+ type: TextBackgroundType.stretchX,
+ color: '#0FFF00'
+ }
+ }
+ }
+ ]
+ }
+ const text_options_backgroundstyle_type_stretchY: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ textBackgroundStyle: {
+ type: TextBackgroundType.stretchY,
+ color: '#0FFF00'
+ }
+ }
+ }
+ ]
+ }
+ // color
+ const text_options_backgroundstyle_color_green: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ textBackgroundStyle: {
+ color: '#0FFF00'
+ }
+ }
+ }
+ ]
+ }
+ const text_options_backgroundstyle_color_red: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ textBackgroundStyle: {
+ color: '#FC0700'
+ }
+ }
+ }
+ ]
+ }
+ // shadowStyle
+ const text_options_shadowStyle1: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ fontSize: 100,
+ shadowStyle: {
+ dx: 50,
+ dy: 50,
+ radius: 10,
+ color: '#008F6D'
+ }
+ }
+ }
+ ]
+ }
+ const text_options_shadowStyle2: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ fontSize: 100,
+ shadowStyle: {
+ dx: 50,
+ dy: 50,
+ radius: 20,
+ color: '#FC0700'
+ }
+ }
+ }
+ ]
+ }
+
+ // bold
+ const text_options_bold: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ fontSize: 100,
+ bold: true
+ }
+ }
+ ]
+ }
+ //rotate
+ const text_options_rotate30: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ rotate: 30
+ }
+ }
+ ]
+ }
+
+ const text_options_rotate50: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ rotate: 50
+ }
+ }
+ ]
+ }
+ // underline
+ const text_options_underline: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ fontSize: 100,
+ underline: true
+ }
+ }
+ ]
+ }
+ //strikeThrough
+ const text_options_strikeThrough: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ fontSize: 100,
+ strikeThrough: true
+ }
+ }
+ ]
+ }
+ // font size
+ const text_options_fontSize30: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ fontSize: 30
+ }
+ }
+ ]
+ }
+ const text_options_fontSize100: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ fontSize: 100
+ }
+ }
+ ]
+ }
+ // font color
+ const text_options_color1: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ color: '#FFFF00'
+ }
+ }
+ ]
+ }
+ const text_options_color2: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ style: {
+ color: '#FC0700'
+ }
+ }
+ ]
+ }
+ // text text test
+ const text_options_test1: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'text test1',
+ style: {
+ fontSize: 100,
+ }
+ }
+ ]
+ }
+ const text_options_test2: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'text test2',
+ style: {
+ fontSize: 100,
+ }
+ }
+ ]
+ }
+ // text position
+ const text_options_topLeft: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ position: { position: Position.topLeft }
+ }
+ ]
+ }
+ const text_options_topRight: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ position: { position: Position.topRight }
+ }
+ ]
+ }
+ const text_options_topCenter: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ position: { position: Position.topCenter }
+ }
+ ]
+ }
+ const text_options_bottomLeft: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ position: { position: Position.bottomLeft }
+ }
+ ]
+ }
+ const text_options_bottomCenter: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ position: { position: Position.bottomCenter }
+ }
+ ]
+ }
+ const text_options_bottomRight: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ position: { position: Position.bottomRight }
+ }
+ ]
+ }
+ const text_options_center: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ position: { position: Position.center }
+ }
+ ]
+ }
+ const text_options_xy: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ position: { X: 30, Y: 50 }
+ }
+ ]
+ }
+ const text_options_xypercent: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text',
+ position: { X: '10%', Y: '20%' }
+ }
+ ]
+ }
+ // image alpha
+ const text_options_backalpha0_1: TextMarkOptions = {
+ backgroundImage: {
+ src: require('./assets/code-images/1.png'),
+ alpha: 0.1
+ },
+ watermarkTexts: [{
+ text: 'test text'
+ }
+ ]
+ }
+ const text_options_backalpha1: TextMarkOptions = {
+ backgroundImage: {
+ src: require('./assets/code-images/1.png'),
+ alpha: 1
+ },
+ watermarkTexts: [{
+ text: 'test text'
+ }
+ ]
+ }
+ // iamge scale
+ const text_options_scale0_5: TextMarkOptions = {
+ backgroundImage: {
+ src: require('./assets/code-images/1.png'),
+ scale: 0.5
+ },
+ watermarkTexts: [{
+ text: 'test text'
+ }]
+ }
+ const text_options_scale1_5: TextMarkOptions = {
+ backgroundImage: {
+ src: require('./assets/code-images/1.png'),
+ scale: 1.5
+ },
+ watermarkTexts: [{
+ text: 'test text'
+ }]
+ }
+ // image rotate
+ const text_options_backrotate20: TextMarkOptions = {
+ backgroundImage: {
+ src: require('./assets/code-images/1.png'),
+ rotate: 20
+ },
+ watermarkTexts: [{
+ text: 'test text'
+ }]
+ }
+ const text_options_backrotate50: TextMarkOptions = {
+ backgroundImage: {
+ src: require('./assets/code-images/1.png'),
+ rotate: 50
+ },
+ watermarkTexts: [{
+ text: 'test text'
+ }]
+ }
+
+ // iamge quality
+ const text_options_qualityurl_20: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text'
+ }],
+ quality: 20
+ }
+ const text_options_qualityurl_100: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text'
+ }],
+ quality: 100
+ }
+ // image file name
+ const text_options_filename1: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text'
+ }],
+ filename: 'test1'
+ }
+ const text_options_filename2: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text'
+ }],
+ filename: 'test2'
+ }
+ // image type
+ const text_options_filetype_png: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text'
+ }],
+ saveFormat: ImageFormat.png
+ }
+ const text_options_filetyoe_jpg: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text'
+ }],
+ saveFormat: ImageFormat.jpg
+ }
+ const text_options_filetyoe_base64: TextMarkOptions = {
+ backgroundImage: { src: require('./assets/code-images/1.png') },
+ watermarkTexts: [{
+ text: 'test text'
+ }],
+ saveFormat: ImageFormat.base64
+ }
+
+ // test style
+ // font name
+ const markTextFontName = () => {
+ Marker.markText(text_options_fontName).then((result) => {
+ seturl_text_fontName(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ // text alain
+ const markTextTextAlainLeft = () => {
+ Marker.markText(text_options_textalain_left).then((result) => {
+ seturl_text_textalain_left(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextTextAlainCenter = () => {
+ Marker.markText(text_options_textalain_center).then((result) => {
+ seturl_text_textalain_center(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextTextAlainRight = () => {
+ Marker.markText(text_options_textalain_right).then((result) => {
+ seturl_text_textalain_right(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ // textBackgroundStyle padding
+ const markTextbackgroundstylePaddingAll1 = () => {
+ Marker.markText(text_options_backgroundstyle_padding_all1).then((result) => {
+ seturl_text_backgroundstyle_padding_all1(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextbackgroundstylePaddingAll2 = () => {
+ Marker.markText(text_options_backgroundstyle_padding_all2).then((result) => {
+ seturl_text_backgroundstyle_padding_all2(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextbackgroundstylePaddingAll3 = () => {
+ Marker.markText(text_options_backgroundstyle_padding_all3).then((result) => {
+ seturl_text_backgroundstyle_padding_all3(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextbackgroundstylePaddingAll4 = () => {
+ Marker.markText(text_options_backgroundstyle_padding_all4).then((result) => {
+ seturl_text_backgroundstyle_padding_all4(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextbackgroundstylePaddingTop = () => {
+ Marker.markText(text_options_backgroundstyle_padding_top).then((result) => {
+ seturl_text_backgroundstyle_padding_top(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextbackgroundstylePaddingLeft = () => {
+ Marker.markText(text_options_backgroundstyle_padding_left).then((result) => {
+ seturl_text_backgroundstyle_padding_left(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextbackgroundstylePaddingRight = () => {
+ Marker.markText(text_options_backgroundstyle_padding_right).then((result) => {
+ seturl_text_backgroundstyle_padding_right(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextbackgroundstylePaddingBottom = () => {
+ Marker.markText(text_options_backgroundstyle_padding_bottom).then((result) => {
+ seturl_text_backgroundstyle_padding_bottom(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextbackgroundstylePaddingHorizontal = () => {
+ Marker.markText(text_options_backgroundstyle_padding_horizontal).then((result) => {
+ seturl_text_backgroundstyle_padding_horizontal(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextbackgroundstylePaddingVertical = () => {
+ Marker.markText(text_options_backgroundstyle_padding_vertical).then((result) => {
+ seturl_text_backgroundstyle_padding_vertical(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextbackgroundstylePaddingX = () => {
+ Marker.markText(text_options_backgroundstyle_padding_x).then((result) => {
+ seturl_text_backgroundstyle_padding_x(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextbackgroundstylePaddingY = () => {
+ Marker.markText(text_options_backgroundstyle_padding_y).then((result) => {
+ seturl_text_backgroundstyle_padding_y(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ // textBackgroundStyle cornerRadius
+ const markTextbackgroundstyleCornerRadiusAll = () => {
+ Marker.markText(text_options_backgroundstyle_cornerRadius_all).then((result) => {
+ seturl_text_backgroundstyle_cornerRadius_all(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextbackgroundstyleCornerRadiustopLeft = () => {
+ Marker.markText(text_options_backgroundstyle_cornerRadius_topLeft).then((result) => {
+ seturl_text_backgroundstyle_cornerRadius_topLeft(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextbackgroundstyleCornerRadiustopRight = () => {
+ Marker.markText(text_options_backgroundstyle_cornerRadius_topRight).then((result) => {
+ seturl_text_backgroundstyle_cornerRadius_topRight(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextbackgroundstyleCornerRadiusbottomLeft = () => {
+ Marker.markText(text_options_backgroundstyle_cornerRadius_bottomLeft).then((result) => {
+ seturl_text_backgroundstyle_cornerRadius_bottomLeft(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextbackgroundstyleCornerRadiusbottomRight = () => {
+ Marker.markText(text_options_backgroundstyle_cornerRadius_bottomRight).then((result) => {
+ seturl_text_backgroundstyle_cornerRadius_bottomRight(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ // textBackgroundStyle type
+ const markTextbackgroundstyleTypeStretchX = () => {
+ Marker.markText(text_options_backgroundstyle_type_stretchX).then((result) => {
+ seturl_text_backgroundstyle_type_stretchX(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextbackgroundstyleTypeStretchY = () => {
+ Marker.markText(text_options_backgroundstyle_type_stretchY).then((result) => {
+ seturl_text_backgroundstyle_type_stretchY(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ // textBackgroundStyle color
+ const markTextbackgroundstyleColorRed = () => {
+ Marker.markText(text_options_backgroundstyle_color_red).then((result) => {
+ seturl_text_backgroundstyle_color_red(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextbackgroundstyleColorGreen = () => {
+ Marker.markText(text_options_backgroundstyle_color_green).then((result) => {
+ seturl_text_backgroundstyle_color_green(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ // shadowstyle
+ const markTextShadowStyle1 = () => {
+ Marker.markText(text_options_shadowStyle1).then((result) => {
+ seturl_text_shadowStyle1(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextShadowStyle2 = () => {
+ Marker.markText(text_options_shadowStyle2).then((result) => {
+ seturl_text_shadowStyle2(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ // bold
+ const markTextFontBold = () => {
+ Marker.markText(text_options_bold).then((result) => {
+ seturl_text_bold(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ // rotate
+ const markTextRotate30 = () => {
+ Marker.markText(text_options_rotate30).then((result) => {
+ seturl_text_rotate30(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextRotate50 = () => {
+ Marker.markText(text_options_rotate50).then((result) => {
+ seturl_text_rotate50(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ // strikeThrough
+ const markTextFontStrikeThrough = () => {
+ Marker.markText(text_options_strikeThrough).then((result) => {
+ seturl_text_strikeThrough(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ // underline
+ const markTextUnderline = () => {
+ Marker.markText(text_options_underline).then((result) => {
+ seturl_text_underline(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ // skewX
+ const markTextskewX = () => {
+ Marker.markText(text_options_skewX).then((result) => {
+ seturl_text_skewX(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ // text font italic
+ const markTextFontItalic = () => {
+ Marker.markText(text_options_italic).then((result) => {
+ seturl_text_italic(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ // text font size
+ const markTextFontSize30 = () => {
+ Marker.markText(text_options_fontSize30).then((result) => {
+ seturl_text_fontSize30(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextFontSize100 = () => {
+ Marker.markText(text_options_fontSize100).then((result) => {
+ seturl_text_fontSize100(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ // text color
+ const markTextColor1 = () => {
+ Marker.markText(text_options_color1).then((result) => {
+ seturl_text_color1(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextColor2 = () => {
+ Marker.markText(text_options_color2).then((result) => {
+ seturl_text_color2(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ // text test
+ const markTextText1 = () => {
+ Marker.markText(text_options_test1).then((result) => {
+ seturl_text_test1(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextText2 = () => {
+ Marker.markText(text_options_test2).then((result) => {
+ seturl_text_test2(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ // image file name
+ const markTextFilename1 = () => {
+ Marker.markText(text_options_filename1).then((result) => {
+ setTextFilename1(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextFilename2 = () => {
+ Marker.markText(text_options_filename2).then((result) => {
+ setTextFilename2(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ // image type
+ const markTextFiletypepng = () => {
+ Marker.markText(text_options_filetype_png).then((result) => {
+ setTextFileTypePng(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextFiletypejpg = () => {
+ Marker.markText(text_options_filetyoe_jpg).then((result) => {
+ setTextFileTypeJpg(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextFiletypebase64 = () => {
+ Marker.markText(text_options_filetyoe_base64).then((result) => {
+ setTextFileTypebase64(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ // image quality
+ const markTextqualityurl_20 = () => {
+ Marker.markText(text_options_qualityurl_20).then((result) => {
+ setTextqualityurl_20(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextqualityurl_100 = () => {
+ Marker.markText(text_options_qualityurl_100).then((result) => {
+ setTextqualityurl_100(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ // image rotate
+ const markTextbackrotate_20 = () => {
+ Marker.markText(text_options_backrotate20).then((result) => {
+ seturl_backrotate20_text(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextbackrotate_50 = () => {
+ Marker.markText(text_options_backrotate50).then((result) => {
+ seturl_backrotate50_text(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ // image scale
+ const markTextbackscale0_5 = () => {
+ Marker.markText(text_options_scale0_5).then((result) => {
+ seturl_backscale0_5_text(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextbackscale1_5 = () => {
+ Marker.markText(text_options_scale1_5).then((result) => {
+ seturl_backscale1_5_text(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ // image alpha
+ const markTextbackalpha0_1 = () => {
+ Marker.markText(text_options_backalpha0_1).then((result) => {
+ seturl_backalpha0_1_text(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextbackalpha1 = () => {
+ Marker.markText(text_options_backalpha1).then((result) => {
+ seturl_backalpha1_text(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ // position
+ const markTexttopleft = () => {
+ Marker.markText(text_options_topLeft).then((result) => {
+ seturl_text_topLeft(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTexttopcenter = () => {
+ Marker.markText(text_options_topCenter).then((result) => {
+ seturl_text_topCenter(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTexttopright = () => {
+ Marker.markText(text_options_topRight).then((result) => {
+ seturl_text_topRight(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextcenter = () => {
+ Marker.markText(text_options_center).then((result) => {
+ seturl_text_center(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextbottomleft = () => {
+ Marker.markText(text_options_bottomLeft).then((result) => {
+ seturl_text_bottomLeft(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextbottomcenter = () => {
+ Marker.markText(text_options_bottomCenter).then((result) => {
+ seturl_text_bottomCenter(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextbottomright = () => {
+ Marker.markText(text_options_bottomRight).then((result) => {
+ seturl_text_bottomRight(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextxy = () => {
+ Marker.markText(text_options_xy).then((result) => {
+ seturl_text_xy(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ const markTextxppercentt = () => {
+ Marker.markText(text_options_xypercent).then((result) => {
+ seturl_text_xypercent(result)
+ }).catch(error => {
+ console.log('error', error)
+ })
+ }
+ return (
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_icon_topLeft}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_icon_topRight}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_icon_topCenter}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_icon_bottomLeft}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_icon_bottomCenter}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_icon_bottomRight}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_icon_center}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_icon_xy}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_icon_xypercent}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_backalpha0_1}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_backalpha1}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_alpha0_1}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_alpha1}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_backscale0_5}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_backscale1_5}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_scale0_5}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_scale1_5}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_backrotate50}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_backrotate20}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_rotate50}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_rotate20}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {qualityurl_100}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {qualityurl_20}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {file1url}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {file2url}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {filetypeurl_png}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {filetypeurl_jpg}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {filetypeurl_base64}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_textalain_left}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_fontName}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_textalain_center}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_textalain_right}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_skewX}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_italic}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_fontSize100}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_fontSize30}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_color2}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_color1}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_test1}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_test2}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_backgroundstyle_padding_all1}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_backgroundstyle_padding_all2}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_backgroundstyle_padding_all3}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_backgroundstyle_padding_all4}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_backgroundstyle_padding_top}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_backgroundstyle_padding_bottom}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_backgroundstyle_padding_left}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_backgroundstyle_padding_right}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_backgroundstyle_padding_horizontal}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_backgroundstyle_padding_vertical}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_backgroundstyle_padding_x}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_backgroundstyle_padding_y}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_backgroundstyle_cornerRadius_all}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_backgroundstyle_cornerRadius_topLeft}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_backgroundstyle_cornerRadius_topRight}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_backgroundstyle_cornerRadius_bottomLeft}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_backgroundstyle_cornerRadius_bottomRight}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_backgroundstyle_type_stretchX}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_backgroundstyle_type_stretchY}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_backgroundstyle_color_green}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_backgroundstyle_color_red}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_shadowStyle1}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_shadowStyle2}
+
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_bold}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_rotate30}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_rotate50}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_underline}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_strikeThrough}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_topLeft}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_topRight}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_topCenter}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_bottomLeft}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_bottomCenter}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_bottomRight}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_center}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_xy}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_text_xypercent}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_backalpha0_1_text}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_backalpha1_text}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_backscale0_5_text}
+
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_backscale1_5_text}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_backrotate50_text}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {url_backrotate20_text}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {textqualityurl_100}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {textqualityurl_20}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {textfile1url}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {textfile2url}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {textfiletypeurl_png}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {textfiletypeurl_jpg}
+
+
+
+
+
+
+
+
+ {"image marker"}
+
+
+
+ {textfiletypeurl_base64}
+
+
+
+
+ )
+}
+const styles = StyleSheet.create({
+ body: {
+ backgroundColor: Colors.dark,
+ },
+ sectionContainer: {
+ marginTop: 32,
+ paddingHorizontal: 24,
+ },
+ sectionTitle: {
+ marginBottom: 30,
+ fontSize: 12,
+ fontWeight: '600',
+ color: Colors.white,
+ }
+});
\ No newline at end of file
diff --git a/react-native-image-marker/assets/fonts/simsunb.ttf b/react-native-image-marker/assets/fonts/simsunb.ttf
new file mode 100644
index 00000000..43d076bb
Binary files /dev/null and b/react-native-image-marker/assets/fonts/simsunb.ttf differ
diff --git a/react-native-image-marker/assets/fonts/simyou.ttf b/react-native-image-marker/assets/fonts/simyou.ttf
new file mode 100644
index 00000000..933b9d36
Binary files /dev/null and b/react-native-image-marker/assets/fonts/simyou.ttf differ
diff --git a/react-native-image-marker/assets/fonts/stcaiyun.ttf b/react-native-image-marker/assets/fonts/stcaiyun.ttf
new file mode 100644
index 00000000..f2c31b3a
Binary files /dev/null and b/react-native-image-marker/assets/fonts/stcaiyun.ttf differ
diff --git a/react-native-image-marker/assets/fonts/stfangso.ttf b/react-native-image-marker/assets/fonts/stfangso.ttf
new file mode 100644
index 00000000..441f2883
Binary files /dev/null and b/react-native-image-marker/assets/fonts/stfangso.ttf differ