jimmydaddy / react-native-image-marker Goto Github PK

Good day, thanks for the component and it is very useful.

I am having issues with getting addTextByPostion to work on android.
The resulting picture is showing the text on bottom right.
The position of text is not affected by the change in value of 'position' or 'width' and 'height'.
Have not tested on ios and ImageMarker.addText is working.

Looking forward to your advice thank you.

"react-native": "0.44.2"
"react-native-image-marker": "0.0.5"
"react-native-image-picker": "^0.26.4"

`addTextToPic(path) {

    const uri = path;
    const { title, description, locationName, dateStart } = this.state;
    ImageMarker.addTextByPostion(
        Platform.OS == 'android'? uri.replace('file://', '') : uri,
        title,
        'topLeft',  //position
        100,  //width
        100,  //height
        '#fd5f00',
        'DEFAULT',
        58
    ).then((res) => {   
        this.uploadImageFb(res);
        //console.log("the path is"+res);
    }).catch((err) => {
        console.log(err)
    })  
}`

Is your feature request related to a problem? Please describe.
I am developing a project where I have requirement like user uploads the 2 picture from gallary and we have to upload it over the S3. So can we do this by using this library?

Describe the solution you'd like
Can we arrange selected two pictures side by side and merge them? As we want 1st one on top and second one at bottom of the 1st one.

Describe alternatives you've considered
Suggest me any alternative to achive this.

I have getting {"framesToPop":1,"code":"imgSavePath error"}

and my code is

import ImageMarker from "react-native-image-marker";
ImageMarker.markImage({
src: this.state.imageData.ImagePath,
markerSrc: this.state.icon, // icon uri
X: this.state.iconx, // left
Y: this.state.icony, // top
scale: 1, // scale of bg
markerScale: 0.5, // scale of icon
quality: 100 // quality of image
}).then((path) => {
console.warn(path);
this.setState({
loading: false
})
}).catch((err) => {
console.warn(err)
this.setState({
loading: false
})
})

Describe the bug
Getting build errors because of promise.reject on rn 58.4

To Reproduce
Create a new project with rn 58.4, ./graddlew assembleRelease

Expected behavior
App builds

===

It seems that something changed with react promise.reject signature;

reference to reject is ambiguous
                promise.reject( "error","Can't retrieve the file from the path.",null);

For each call site that has string,string as params, removing the second string works
For each call site that has string,string,throwable as params, removing the middle string works

might not be the best solution.. !

Describe the bug
"res" after markImage is different size then original image and using markImage again on it results is incorrect

To Reproduce
Steps to reproduce the behavior:

    ImageMarker.markImage({
      src: res,
      markerSrc: require("/img/start2.png"),
      position: "bottomLeft", 
      scale: 1,
      markerScale: 1,
      quality: 100
    }).then(res => {
      ImageMarker.markImage({
        src: "http://" + res,
        markerSrc: require("/img/start2.png"),
        position: "bottomLeft", 
        scale: 1,
        markerScale: 1,
        quality: 100
      }).then(res => ....)
    })

second image is a lot smaller but they should be exactly the same

Expected behavior
Same image size

Screenshots

Devlopment environment(please complete the following information):

• OS: OSX
• nodejs: 8.9.1
• react-native: 0.57.8
• react-native-image-marker : 0.3.9

Smartphone (please complete the following information):

• Device:/Simulator
• OS: iOS11

Additional context
markText do not have this bug

Hi!

Can I use for example the app's icon on Android(./android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png) in markImage as markerSrc? I couldn't make it work, can somebody help me with this?

Is there a chance to reach textAlign center on Multilines?

Hello! Having trouble getting this working. Have tried different images - sourced from camera, image picker and the expo/react-native assets directory, but markImage cannot retrieve any file. Any help is greatly appreciated. Thanks and Happy New Year!

[Error: Can't retrieve the file from the path: file:///data/user/0/com.myapp.demo/cache/ExperienceData/%2540dcanora%252FProjectA/Camera/8aed441a-3524-4b0f-9b87-de9be5b52d87.jpg]

By the way, my app is an ejected Expo app. Linking worked fine and android build had no issues.

When I build a signed APK the image stops displaying, works fine while just running in emulator though.

• "react": "16.2.0"
• "react-native": "0.53.3"
• "react-native-image-marker": "^0.1.3"

_markImageWithOverlay = () => {
        ImageMarker.markWithImage(this.state.rawImage, this.state.overlay, 0, 0, 0.81).then((path) => {
            this.setState({
                editedImage: Platform.OS === 'android' ? 'file://' + path : path,
            });
        }).catch((err) => {
            console.log(err);
        });
    }
    render() {
        return (
            <View style={styles.container}>
                <Image source={{ uri: this.state.editedImage }} style={styles.imagePreview} />
                <TouchableOpacity onPress={this._markImageWithOverlay}>
                    <Text>Test</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

Actual Behaviour
Android: I am not able to get the file on the path, I am using the latest npm version "^0.6.1",
My path looks like " data/data/com.sampleproject/cache/727b3cdc-2ff1-4918-8a71-f00be535e4d9imagemarker.png"
The cache folder is blank

Code

  markPosition() {
    //alert(this.state.signature);
    this.state.signature =
      Platform.OS === 'android'
        ? 'file://' + this.state.signature
        : this.state.signature;
    Marker.markText({
      src: this.state.signature,
      text: this.state.data,
      position: 'bottomRight',
      color: '#FF0000',
      fontName: 'Arial-BoldItalicMT',
      fontSize: 44,
      scale: 1,
      quality: 100,
      markerScale: 1,
      shadowStyle: {
        dx: 10.5,
        dy: 20.8,
        radius: 20.9,
        color: 'transparent',
      },
      textBackgroundStyle: {
        paddingX: 10,
        paddingY: 10,
        color: 'transparent',
      },
      saveFormat: 'png',
    })
      .then(path => {
        //  alert('saved path');
        console.log('path1241asdjaksdjakdqweqw', path);
        this.setState(
          {
            signature: path,
          },
          () => {
            if (this.state.signature !== null) {
              //  console.log('dsdsfs4234242', this.state.signature);
              //Orientation.lockToPortrait();
              const getSignatureValue = this.props.navigation.getParam(
                'getSignature',
              );
              getSignatureValue(path);
              // this.props.navigation.push('NALGSample', {
              //   signed: this.state.signature,
              // });
              Orientation.lockToPortrait();
              this.props.navigation.pop();
            }
          },
        );
      })
      .catch(err => {
        console.log('====================================');
        //  alert(err + 'err');
      });
  }

Expected behavior
I should able to get the file on the path
My path looks like " data/data/com.sampleproject/cache/727b3cdc-2ff1-4918-8a71-f00be535e4d9imagemarker.png"
The cache folder should not be empty .it should contain the path image

Versions:
"react-native": "0.61.4",
"react-native-image-marker": "^0.6.1",

Hi,

I'm trying to add mark image in ios its works but in android Error comes: Illegal callback invocation from native module. This callback type only permits a single invocation from native code.

Also tried issue #12 's RNFS function still i get same error

Describe the bug
ImageMarker makeText saveFormat:'base64' ios get base64 data crash

ImageMarker.markText({
src: image.path,
text: this.state.locationAddress,
position: 'topLeft',
color: '#FFFFFF',
// fontName: 'Arial-BoldItalicMT',
fontSize: 148,
scale: 1,
quality: 100,
saveFormat: 'base64'
}).then((res) => {
console.log("the path is", res)
}).catch((err) => {
console.log(err)
})

Versions:
"react-native": "0.59.5",
"react-native-image-marker": "^0.6.1",

最近使用了这款组件，感觉很棒，Android下没什么问题，不过我的项目在做ios端的时候，遇到了问题，读取到的是相册的路径，assets-library:// 这样开头的。而组件里的url默认开始似乎会指向项目app的路径之下，后面再跟上这个相册路径，显然是没法读取到了。不知道有没有解决的方法。另外图片的精度能否也可以自行调整。

如果有时间还望能解答一二，另郑重感谢你的这款组件！

Describe the bug
on Android i cant use base64 string as marker

Gives error:
Error: Can't get resource by the path: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwCAYAAAA+VemSAAAABHNCSVQICAgIfAhkiAAABV1JREF

On iOS it is working.

To Reproduce
Steps to reproduce the behavior:

marked = await ImageMarker.markImage({
        src: "file",
        markerSrc: { uri:  "data:image/png;base64,iVBORw...},
        X: 800,
        Y: 715,
        scale: 1,
        markerScale: 1,
        quality: 20
      });

Expected behavior

Screenshots
If applicable, add screenshots to help explain your problem.

Devlopment environment(please complete the following information):

• OS: OSX
• nodejs: [e.g. 8.9.0]
• react-native: 0.57.8
• react-native-image-marker : 0.41

Smartphone (please complete the following information):

• Device: Simulator
• OS: Android

Additional context
Add any other context about the problem here.

I can't get expected final image when using markText twice or more with same filename.

`Marker.markText({
src: this.uri,
filename: "test",
}).then(path => {
// /data/user/0/com.test213/cache/test.jpg
Marker.markText({
src: "file://" + path,
filename: "test",
}).then(path => {

})

})`

I've search about the problem. This can be related with caching.

https://frescolib.org/docs/image-requests.html

Finally If I use version parameter on second call its working.
src: "file://" + path + "?v=" + new Date().getTime()

You can add a caching option or add an info about caching on first page.

when i generate release apk, i found this error :

Task :react-native-image-marker:verifyReleaseResources FAILED

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':react-native-image-marker:verifyReleaseResources'.

1 exception was raised by workers:
com.android.builder.internal.aapt.v2.Aapt2Exception: Android resource linking failed
error: resource android:style/TextAppearance.Material.Widget.Button.Borderless.Colored not found.
error: resource android:style/TextAppearance.Material.Widget.Button.Colored not found.
/Users/gusma/Documents/Gusma/yoayo-mobile-app/node_modules/react-native-image-marker/android/build/intermediates/res/merged/release/values-v26/values-v26.xml:7: error: resource android:attr/colorError not found.
/Users/gusma/Documents/Gusma/yoayo-mobile-app/node_modules/react-native-image-marker/android/build/intermediates/res/merged/release/values-v26/values-v26.xml:11: error: resource android:attr/colorError not found.
/Users/gusma/Documents/Gusma/yoayo-mobile-app/node_modules/react-native-image-marker/android/build/intermediates/res/merged/release/values-v26/values-v26.xml:15: error: style attribute 'android:attr/keyboardNavigationCluster' not found.
/Users/gusma/Documents/Gusma/yoayo-mobile-app/node_modules/react-native-image-marker/android/build/intermediates/res/merged/release/values-v28/values-v28.xml:7: error: resource android:attr/dialogCornerRadius not found.
/Users/gusma/Documents/Gusma/yoayo-mobile-app/node_modules/react-native-image-marker/android/build/intermediates/res/merged/release/values-v28/values-v28.xml:11: error: resource android:attr/dialogCornerRadius not found.
/Users/gusma/Documents/Gusma/yoayo-mobile-app/node_modules/react-native-image-marker/android/build/intermediates/res/merged/release/values/values.xml:2741: error: resource android:attr/fontStyle not found.
/Users/gusma/Documents/Gusma/yoayo-mobile-app/node_modules/react-native-image-marker/android/build/intermediates/res/merged/release/values/values.xml:2742: error: resource android:attr/font not found.
/Users/gusma/Documents/Gusma/yoayo-mobile-app/node_modules/react-native-image-marker/android/build/intermediates/res/merged/release/values/values.xml:2743: error: resource android:attr/fontWeight not found.
/Users/gusma/Documents/Gusma/yoayo-mobile-app/node_modules/react-native-image-marker/android/build/intermediates/res/merged/release/values/values.xml:2744: error: resource android:attr/fontVariationSettings not found.
/Users/gusma/Documents/Gusma/yoayo-mobile-app/node_modules/react-native-image-marker/android/build/intermediates/res/merged/release/values/values.xml:2745: error: resource android:attr/ttcIndex not found.
/Users/gusma/Documents/Gusma/yoayo-mobile-app/node_modules/react-native-image-marker/android/build/intermediates/res/merged/release/values/values.xml:2909: error: resource android:attr/startX not found.
/Users/gusma/Documents/Gusma/yoayo-mobile-app/node_modules/react-native-image-marker/android/build/intermediates/res/merged/release/values/values.xml:2912: error: resource android:attr/startY not found.
/Users/gusma/Documents/Gusma/yoayo-mobile-app/node_modules/react-native-image-marker/android/build/intermediates/res/merged/release/values/values.xml:2915: error: resource android:attr/endX not found.
/Users/gusma/Documents/Gusma/yoayo-mobile-app/node_modules/react-native-image-marker/android/build/intermediates/res/merged/release/values/values.xml:2918: error: resource android:attr/endY not found.
/Users/gusma/Documents/Gusma/yoayo-mobile-app/node_modules/react-native-image-marker/android/build/intermediates/res/merged/release/values/values.xml:2926: error: resource android:attr/offset not found.
error: failed linking references.

how to fix this error ? please help me

Devlopment environment(please complete the following information):

OS : OSX
react-native : 0.61.2
nodejs v10.16.3
react-native-image-marker : 0.6.0

Describe the bug
Text quality very poor

Anything i can do about that ? Bg image is 640x640

To Reproduce
Steps to reproduce the behavior:

1. Call markText with following options:

Marker.markText({
    src: <some-bg-image>,
    text: <some-text>, 
    position: 'center', 
    color: '#ffffff',
    fontName: 'Avenir-Roman', 
    fontSize: 20, 
    scale: 1, 
    quality: 100
}).then((res) => {
    console.log(res)
}).catch((err) => {
    console.log(err)
})

Devlopment environment(please complete the following information):

• OS: OSX
• nodejs: 8.11.3
• react-native: 0.55.4
• react-native-image-marker : 0.4.4

Smartphone (please complete the following information):

• Device: Simulator
• OS: iOS 12.1

I'm using addTextByPostion method, and it gives very bad quality of the image on iOS.
On Android it works good.
ReactNative version 0.49.3

Please add Typescript support (e.g. via @types or even better directly in your package).

Thank you :)

Please help me resolve this. I have installed latest version of image marker

Hi ,
Updated to API 28 .
It does not build anymore.
ImageMarkerManager.java:294: error: method save in class Canvas cannot be applied to given types;
canvas.save(Canvas.ALL_SAVE_FLAG);

Canvas.save(int) has been removed from API 28. In was deprecated since 28, now it is fully removed and you should call Canvas.save() instead .

Thanks

Having a picture with a size of 1701 x 2268 becomes 851 x 1134 after watermarked..

Steps to reproduce the behavior:

1. Process an image with the markText method with the following settings

{
    src: image,
    text: moment(new Date()).format('DD/MM/YYYY hh:mm A'),
    position: 'bottomRight',
    color: '#FFFF00',
    fontName: 'Arial',
    fontSize: 80,
    scale: 1,
    quality: 80,
}

Expected behavior
Size should still be the same with the size of the image that is supplied.

Devlopment environment:

• react-native: 0.59.9
• react-native-image-marker : 0.4.0 and up

Smartphone:

• Device: Nexus 5X API 28 (Simulator)

In order to temporary patch the issue on my end. I am applying a scale of 2 on the markText in order to return to original size.

Mix use on android error:

{ [Error: Can't get resource by the path: /data/user/0/com.shuidao.daotian.repair.debug/cache/bbed7ce1-9094-4e93-94bd-f9e0c41d9083imagemarker.jpg] framesToPop: 1, code: 'error' }

but use them each work well

code :

ImageMarker.markImage({
      src: imageUri,
      markerSrc: images.icon.yellowLine, // icon uri
      X: width * 0.05,
      Y: height * 0.85,
      scale: 1, // scale of bg
      markerScale: 5, // scale of icon
      quality: 100, // quality of image
    }).then((finalPath) => {
      ImageMarker.markText({
        src: finalPath,
        text: `${data}\n\n${currentUser.company_name} `,
        X: width * 0.07,
        Y: height * 0.85,
        color: '#ffffff',
        fontName: 'Arial-BoldItalicMT',
        fontSize: 130,
        scale: 1,
        quality: 100,
      }).then((res) => {
        ImageMarker.markText({
          src: res,
          text: '123',
          X: width * 0.05,
          Y: height * 0.78,
          color: '#ffd500',
          fontName: 'Arial-BoldItalicMT',
          fontSize: 130,
          scale: 1,
          quality: 100,
        }).then((path) => {

        }).catch((err) => {
          console.log('====>11', err);
        });
      }).catch((err) => {
        console.log('====>22', err);
      });
    }).catch((err) => {
      console.log('====>33', err);
    });

Some cameras (e.g. Samsung-phones) does not rotate picture when taken in other direction than landscape (the "correct" way), but rather include information about rotation in EXIF-information.

This module does not read EXIF data, so pictures with rotation data will loose this data and picture will not get rotated:

Suggested fix:
Read EXIF-data and rotate picture accordingly before adding text and creating new bitmap (which will discard the original EXIF-information)

Describe the bug
On such devices as Xiaomi Redmi 5+ (Android 8.1) or Samsung Galaxy J7 Prime (Android 7.0) scale of marker image seems to be increased a lot. It happens not always, but it's really weird. We use the same code on different devices with the same picture and get different size of marker image as result.

To Reproduce
We use this code to calculate scale value for marker. Pay attention that width and height - are image sizes. imageHeight and imageWidth - are marker image sizes. We use this code to make marker size as half size of image we put it on.

 let smallerWatermarkSide = imageWidth;

 if (height < width) {
   smmallerImageSide = height;
   smallerWatermarkSide = imageHeight;
 }

 const scale = (smmallerImageSide / 2) / smallerWatermarkSide;

if (isAndroid) {
   const pathAfterMarkedText = await ImageMarker.markImage({
     src: { uri: 'data:img/jpg;base64,${data}'},
     markerSrc: Watermark, // icon uri
     position: 'center',
     scale: 1, // scale of bg
     markerScale: scale, // scale of icon
     quality: 100
   });

Expected behavior
Result size of marker image should be the same on all devices with the same picture

Devlopment environment(please complete the following information):

• OS: Mac OS
• react-native: 0.59.9
• react-native-image-marker : 0.4.4

Smartphone (please complete the following information):

• Device: Xiaomi Redmi 5+, Samsung Galaxy J7 Prime
• OS: Android 8.1, Android 7

Hi jimmydaddy,
Thanks again for the great component.
Would like to suggest to improve the draw quality of the result image.
The result image has a color tinge after drawing of text. it is more prominent after drawing a few times.

I am a beginner coder and i am not sure if it can be improved or is it a android only problem.
Please look at it if you have the time thanks!

original image:

after addtextbyposition 3 times:

Can you help me to find what i was doing wrong here.. im getting following error null is not an object (evaluating 'imageMarker.addTextByPostion')
my function code follows

        Marker.markText({
            src: this.state.imageurl,
            text: 'text marker', 
            position: 'topLeft', 
            color: '#FF0000',
            fontName: 'Arial-BoldItalicMT', 
            fontSize: 44, 
            mShadowStyle: {
                dx: 10.5,
                dy: 20.8,
                radius: 20.9,
                color: '#ff00ff'
            },
            scale: 1, 
            quality: 100,
            filename: 'hello_oii'
        }).then((res) => {
            this.setState({
                uri : 'SET URL'
            })
        }).catch((err) => {
            console.log(err)
            this.setState({
                uri : 'UNSET URL',
                err
            })
        })

(below screenshot)

Hi,

When i try to getting build, i have some errors in your package. I am already linked package and installed successfully. Please help me. Thank you.

You can see my logs in here: [http://prntscr.com/imamey](http://prntscr.com/imamey)

Error:(134, 36) error: cannot find symbol variable ReactFontManager
Error:(267, 35) error: cannot find symbol variable ReactFontManager
Error:(274, 13) error: cannot find symbol variable textPaint
Error:(278, 61) error: cannot find symbol variable textBounds
Error:(278, 13) error: cannot find symbol variable textPaint
Error:(279, 13) error: cannot find symbol variable textPaint
Error:(280, 58) error: cannot find symbol variable textBounds
Error:(280, 78) error: cannot find symbol variable textBounds
Error:(280, 99) error: cannot find symbol variable width
Error:(280, 106) error: cannot find symbol variable height
Error:(282, 59) error: cannot find symbol variable textPaint
Error:(282, 13) error: cannot find symbol variable canvas
Error:(284, 13) error: cannot find symbol variable canvas
Error:(285, 13) error: cannot find symbol variable canvas

I am working on RN 0.53.3

Hello,

The module use a deprecated gradle configuration, and generate a warning when apk was generated :

Configure project :react-native-image-marker
WARNING: Configuration 'compile' is obsolete and has been replaced with 'implementation' and 'api'.
It will be removed soon. For more information see: http://d.android.com/r/tools/update-dependency-configurations.html
WARNING: Configuration 'testCompile' is obsolete and has been replaced with 'testImplementation'.
It will be removed soon. For more information see: http://d.android.com/r/tools/update-dependency-configurations.html

i am getting this "ImageMarker.addText got 14 arguments, expected 13" when i am trying to add text on image.
and unable to add text on image

Marker.markText({
src: uri,
text: "Watermark",
X: 300,
Y: 1110,
color: "#e9e9e9",
fontName: 'Montserrat-Light',
fontSize: 80,
shadowStyle: {
dx: 10.5,
dy: 20.8,
radius: 20.9,
color: "#e9e9e9"
},
scale: 1,
quality: 100
})

Does this library have video support, i.e. can we add pictures and text as markers to videos? If no, do you plan to support that?

Thanks in advance, and love your work!

Hello again,

I have a problem with markWithImageByPosition, so thats merge photos to wrong places. If I would like place to 'topRight', its positioning to topRight near. One and only topLeft is true. How can i fix this is? or this is bug?

You can check it here

When we use png with transparency right now it replaces it with white color.
But it would be so much better if it keep transparency on marker.

Describe the bug
Text displays wrong position when contains multiple lines on Android. I didn't test on IOS yet.

To Reproduce

uri = "https://cdn.pixabay.com/photo/2018/01/12/10/19/fantasy-3077928_1280.jpg"
fontSize = 24
scale = 1
position = "center"
color = "#FF0000"
text = `Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Duis dui elit, 
interdum a molestie in, egestas a elit. 
Sed tristique sem ante, sit amet pulvinar orci 
cursus eget. Curabitur`

Screenshots
position: center, fontSize = 24

position: center, fontSize = 10

position: center, fontSize = 30

position: topLeft

I tried to find a solution. Below link may help;

https://stackoverflow.com/a/8369690/5064278

import Marker from 'react-native-image-marker';

markImage(uriTest) {
let test = Platform.OS == 'android' ? this.props.memeGenerator.memeSelectedUri.replace('file://', '') : uriTest;
console.log('ESTA ES LA RUTA', test);
Marker.markText({
src: Platform.OS == 'android'? uriTest.replace('file://', '') : uriTest,
text: 'text marker',
position: 'topLeft',
color: '#FF0000',
fontName: 'Arial-BoldItalicMT',
fontSize: 44,
scale: 1,
quality: 100
}).then((res) => {
console.log("the path is"+res)
}).catch((err) => {
console.log(err)
})

Hello, I dont seem to get font working on android, have you tested that?

Describe the bug
I downloaded the example, and played with it on my android device, which I try to add some text, after adding text on the selected image using those buttons, I found the origin selected image was saved instead of new updated image. (save to other functions)

What am I doing wrong?
Or how can I save the updated image to my device (I tried react-native-fs which I didn't make it work....)?

To Reproduce
Steps to reproduce the behavior:

1. Go to the app
2. Click on switch to mark text
3. Click pick image
4. Click mark
5. Go to photos to check the downloaded image which is the original image

Expected behavior
the updated image should be saved.

Devlopment environment(please complete the following information):

• OS: [Windows]
• nodejs: v10.16.3
• react-native: 0.60.5
• react-native-image-marker : 0.5.1

Smartphone (please complete the following information):

• Device: [Android]
• OS: [Android 9.0]

Thanks for your help.

hi, how can I move the temp cache data that the module create to the photo folder of iOS and Android? have you included this function to your module?

thanks,

Describe the bug
Trying to apply watermark fails.

To Reproduce
Steps to reproduce the behavior:
Apply watermark with the following options.

ImageMarker.markImage({
    src: { uri: `data:image/png;base64,${base64ImageString}` },
    // markerSrc: assets.watermark, // digi watermark from assets.
    markerSrc: assets.watermark,
    scale: 1, // scale of bg
    markerScale: 1, // scale of icon
    quality: 100 // quality of image
  })

I've tried changing src to a static image, changing markerSrc to a base64 string, using image uri, and none of it works. The base64 string is verified to be correct (I pasted the string into a converter and it returns an image).

I also did react-native-link already.

Expected behavior
return a path as result

Devlopment environment(please complete the following information):

• OS: OSX
• nodejs: 8.12.0
• react-native: 0.59.6
• react-native-image-marker : 0.5.0

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Thanks for quick fix .

But In android/src/main/java/com/jimmydaddy/imagemarker/ImageMarkerManager.java
Line 219 also uses canvas.save(Canvas.ALL_SAVE_FLAG);

Please check the same .

Originally posted by @ishwartolanij in #20 (comment)

Hello and Happy New Year @JimmyDaddy! The path returned on Android is malformed with a double extension (in my case, .jpg.jpg):

/data/user/0/com.myapp.demo/cache/fda7f9c7-915b-4485-a632-452eb7d6b34aimagemarkermyphoto.jpg.jpg

I assume imagemarker is added for uniqueness? May I suggest the following formatting:

/data/user/0/com.myapp.demo/cache/fda7f9c7-915b-4485-a632-452eb7d6b34a-imagemarker-myphoto.jpg

Many thanks for providing this module and your quick response to issues Cheers!

Hi
Thanks for awesome library. Can you please help me to add multiple images (or text) on same image source using x and y points.
Thanks

Describe the bug
Can't use local image on android for source when using markText

To Reproduce
Steps to reproduce the behavior:

      lmageMarker.markText({
        src: require("../imgs/img1.jpg"),
        text: "12345",
        X: 0,
        Y: 0,
        color: "white,
        fontName: "Arial-BoldMT",
        fontSize: 36,
        scale: 1,
        quality: 20
      });

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Devlopment environment(please complete the following information):

• OS: OSX
• nodejs: [e.g. 8.9.0]
• react-native: [e.g. 0.57.8]
• react-native-image-marker : 0.4

Smartphone (please complete the following information):

• Device: Simulator

Additional context
Add any other context about the problem here.

I want to add multiline string to image like that:
text: "textline1 \n textline2"
But it still displayed like single line. Also tried to use quotes:

``

same result

Describe the bug
App crash on:

Mar 11 20:06:59 MacBook-Pro-3 com.apple.CoreSimulator.SimDevice.8F41ACB0-2290-45DD-83E9-42EC6215DF6A[35753] (UIKitApplication:org.earthmuffin[0xde9d][35777][37237]): Service exited due to SIGABRT

when calling Marker.markText()

To Reproduce
Steps to reproduce the behavior:

1. Call markText with following options:

Marker.markText({
    src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAKACAMAAAA7EzkRAAAAA1BMVEUeHh6fjLEcAAABpElEQVR42u3BgQAAAADDoPlTH+AKVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAG0LaAAHrlkt8AAAAAElFTkSuQmCC',
    text: 'Test', 
    position: 'center', 
    color: '#fff',
    fontName: 'Avenir-Roman', 
    fontSize: 20, 
    scale: 1, 
    quality: 100
}).then((res) => {
    console.log(res)
}).catch((err) => {
    console.log(err)
})

Expected behavior
Should log res on success.

Devlopment environment(please complete the following information):

• OS: OSX
• nodejs: 8.11.3
• react-native: 0.55.4
• react-native-image-marker : 0.4.4

Smartphone (please complete the following information):

• Device: Simulator
• OS: iOS 12.1

Describe the bug
This bug occurs on my android device Android 7.0 LG V20
When using markImage and markText it gives me incorrect results

To Reproduce
When I use markText or markImage with require("...") it acts as src image is 4 times bigger.
and as result marker image or text becomes 4 times smaller.

let img = await ImageMarker.markText({
        src: require("../img.png"),
        markerSrc: {uri: ..},
        X: 0,
        Y: 0,
        scale: 1,
        markerScale: 1,
        quality: 20
      });

So if I merge two images of the same size 100px x 100px then marker image will be just 25px x 25px square on top of 100px x 100px src.

Expected behavior
Correct merging

Screenshots

Devlopment environment(please complete the following information):

• OS: OSX
• nodejs: [e.g. 8.9.0]
• react-native: 0.57.8
• react-native-image-marker : 0.43

Smartphone (please complete the following information):

• Device: LG v20
• OS: Android 7.0

It would be amazing if this lib also supports exporting the file directly into base64 instead of a file.