rn-image-marker
v1.0.2
Published
mark image on both Android and iOS
Downloads
7
Maintainers
Readme
react-native-image-marker
Add text or icon watermark to your images
sample
Installation
RN version < 0.60.0 please use v0.5.2 or older
- npm install react-native-image-marker --save
- react-native link
iOS Pod Install
You can use pod
instead of link
. Add following lines in your Podfile
:
pod 'RNImageMarker', :path => '../node_modules/react-native-image-marker'
API
|name|parameter|return|decription|
|--|--|--|--|
|markText
|TextMarkOption
|Promise<String>
|mark image with text|
|markImage
|ImageMarkOption
|Promise<String>
| mark image with icon|
TextMarkOption
|name|description|
|--|--|
|src
|image url |
|text
|the text you want to mark with|
|position
| text position(topLeft
,topRight
,topCenter
, center
, bottomLeft
, bottomCenter
, bottomRight
)|
|X
|distance from the left, if you have set position
yet you don't need to set this property again|
|Y
|distance from the top, if you have set position
you don't need to set this property again|
|color
| text color |
|fontName
| fontName |
|fontSize
| fontSize |
|shadowStyle
| text's shadow style: iOS's NSShadowAttributeName
, Android's textPaint.shadowLayerStyle
|
|scale
| scale image |
|quality
| image qulaity |
|filename
| set filename for the result |
|saveFormat
| png
jpg
base64
|
|textBackgroundStyle
| text background style |
|maxSize
| default value is 2048, need RN version >= 0.60.0, fresco MaxBitmapSize
ImagePipelineConfig.Builder.experiment().setMaxBitmapSize()
, see #49|
export enum ImageFormat {
png = 'png',
jpg = 'jpg',
base64 = 'base64', // base64 string
}
export type TextMarkOption = {
// image src, local image
src: ImageSourcePropType,
text: string,
// if you set position you don't need to set X and Y
X?: number,
Y?: number,
// eg. '#aacc22'
color: string,
fontName: string,
fontSize: number,
// scale image
scale: number,
// image quality
quality: number,
position?: Position,
filename?: string,
shadowStyle: ShadowLayerStyle,
textBackgroundStyle: TextBackgroundStyle,
saveFormat?: ImageFormat,
maxSize?: number, // android only see #49 #42
}
ImageMarkOption
|name|description|
|--|--|
|src
|image url |
|markerSrc
|the icon you want to mark with |
|position
| text position(topLeft
,topRight
,topCenter
, center
, bottomLeft
, bottomCenter
, bottomRight
)|
|X
|distance from the left, if you have set position
yet you don't need to set this property again|
|Y
|distance from the top, if you have set position
you don't need to set this property again|
|markerScale
| scale icon |
|scale
| scale image |
|quality
| image qulaity |
|filename
| set filename for the result |
|saveFormat
| png
jpg
base64
, default is jpg
|
|maxSize
| default value is 2048, need RN version >= 0.60.0, fresco MaxBitmapSize
ImagePipelineConfig.Builder.experiment().setMaxBitmapSize()
, see #49|
export type ImageMarkOption = {
// image src, local image
src: ImageSourcePropType,
markerSrc: ImageSourcePropType,
X?: number,
Y?: number,
// marker scale
markerScale: number,
// image scale
scale: number,
quality: number,
position?: Position,
filename?: string,
saveFormat?: ImageFormat,
maxSize?: number, // android only see #49 #42
}
ShadowStyle
|name|description|
|--|--|
|radius
| blur radius |
|dx
| x offset|
|dy
| y offset|
|color
| shadow color |
export type ShadowLayerStyle = {
'dx': number,
'dy': number,
'radius': number,
'color': string
}
textBackgroundStyle
|name|description|
|--|--|
|paddingX
| padding X |
|paddingY
| padding y|
|type
| default is fit the text, stretchX
stretch to fill width, stretchY
stretch to fill height |
|color
| bg color |
export enum TextBackgroundType {
stretchX = 'stretchX',
stretchY = 'stretchY'
}
Usage
import ImageMarker from "react-native-image-marker"
···
// add text watermark to a photo
this.setState({
loading: true
})
Marker.markText({
src: img.uri,
text: 'text marker',
X: 30,
Y: 30,
color: '#FF0000',
fontName: 'Arial-BoldItalicMT',
fontSize: 44,
shadowStyle: {
dx: 10.5,
dy: 20.8,
radius: 20.9,
color: '#ff00ff'
},
textBackgroundStyle: {
type: 'stretchX',
paddingX: 10,
paddingY: 10,
color: '#0f0'
},
scale: 1,
quality: 100
}).then((res) => {
this.setState({
loading: false,
markResult: res
})
console.log("the path is"+res)
}).catch((err) => {
console.log(err)
this.setState({
loading: false,
err
})
})
···
this.setState({
loading: true
})
Marker.markText({
src: img.uri,
text: 'text marker',
position: 'topLeft',
color: '#FF0000',
fontName: 'Arial-BoldItalicMT',
fontSize: 44,
scale: 1,
quality: 100
}).then((res) => {
console.log("the path is"+res)
this.setState({
loading: false,
markResult: res
})
}).catch((err) => {
console.log(err)
this.setState({
loading: false,
err
})
})
// add icon watermark to a photo
const iconUri = icon.uri
const backGroundUri = img.uri
this.setState({
loading: true
})
Marker.markImage({
src: backGroundUri,
markerSrc: iconUri, // icon uri
X: 100, // left
Y: 150, // top
scale: 1, // scale of bg
markerScale: 0.5, // scale of icon
quality: 100, // quality of image
saveFormat: 'png',
}).then((path) => {
this.setState({
uri: Platform.OS === 'android' ? 'file://' + path : path,
loading: false
})
}).catch((err) => {
console.log(err, 'err')
this.setState({
loading: false,
err
})
})
Marker.markImage({
src: backGroundUri,
markerSrc: iconUri,
position: 'topLeft', // topLeft, topCenter,topRight, bottomLeft, bottomCenter , bottomRight, center
scale: 1,
markerScale: 0.5,
quality: 100
}).then((path) => {
this.setState({
uri: Platform.OS === 'android' ? 'file://' + path : path,
loading: false
})
}).catch((err) => {
console.log(err, 'err')
this.setState({
loading: false,
err
})
})
// you can also add watermark to a photo with static images
Marker.markImage({
src: backGroundUri,
markerSrc: require('./icon.png'),
position: 'topLeft', // topLeft, topCenter,topRight, bottomLeft, bottomCenter , bottomRight, center
scale: 1,
markerScale: 0.5,
quality: 100
}).then((path) => {
this.setState({
uri: Platform.OS === 'android' ? 'file://' + path : path,
loading: false
})
}).catch((err) => {
console.log(err, 'err')
this.setState({
loading: false,
err
})
})
// or base64
Marker.markImage({
src: { uri: `data:img/jpg;base64,/9j/4qqqAQSkZJRgABAQEBLAEsAAD/2wBDAAIBAQEBAQIBAQECAgICAgQDAgICAgUEBAMEBgUGBgYFBgYGBwkIBgcJBwYGCAsICQoKCgoKBggLDAsKDAkKCgr/2wBDAQICAgICAgUDAwUKBwYHCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgr/wAARCAHnAooDASIA
AhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgddddcI` },
markerSrc: { uri: `data:img/jpg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/2wBDAAIBAQEBAQIBAQECAgICAgQDAgICAgUEBAMEBgUGBgYFBgYGBwkIBgcJBwYGCAsICQoKCgoKBggLDAsKDAkKCgr/2wBDAQICAgICAgUDAwUKBwYHCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgr/wAARCAHnAooDASIA
AhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcI` },
position: 'topLeft', // topLeft, topCenter,topRight, bottomLeft, bottomCenter , bottomRight, center
scale: 1,
markerScale: 0.5,
quality: 100
}).then((path) => {
this.setState({
uri: Platform.OS === 'android' ? 'file://' + path : path,
loading: false
})
}).catch((err) => {
console.log(err, 'err')
this.setState({
loading: false,
err
})
})
Extra about Android decoding image
This library use Fresco to decode image on Android. You can set your configuration through Configure Fresco in React Native
- RN version < 0.60.0 use fresco v1.10.0
- RN version >= 0.60.0 use fresco v2.0.0 +
Save image to file
- If you want to save the new image result to the phone camera roll, just use the CameraRoll-module from react-native.
- If you want to save it to an arbitrary file path, use something like react-native-fs.
- For any more advanced needs, you can write your own (or find another) native module that would solve your use-case.
Contributors
@filipef101 @mikaello @Peretz30 @gaoxiaosong @onka13 @OrangeFlavoredColdCoffee