Choose X/Y position #171

Activity

1. asuri0n

   changed the title [-]Chose X/Y position[/-] [+]Choose X/Y position[/+] on Dec 5, 2023
2. JimmyDaddy commented on Dec 5, 2023

   

   JimmyDaddy

   on Dec 5, 2023

   Last edited by JimmyDaddy

   Owner

   More actions

   PositionOptions supports those formats

   positionOptions: {
    X: 10,
    Y: 10,
   }
   // or
   positionOptions: {
    position: Position.topLeft,
   }
   // or
   positionOptions: {
    X: '10%', // relative to the background image's width
    Y: '10%', // relative to the background image's height
   }

   You can add texts at first, then add images using relative position(Don't support add multiple different type of things within one call for now).

   import Marker from "react-native-image-marker"
   ···
   // add text first
   const options = {
     backgroundImage: {
       src: require('./images/test.jpg'),
       scale: 1,
     },
     watermarkTexts: [{
       text: 'text text \n multiple line text',
       positionOptions: {
         X: '10%',
         Y: '40%',
       },
       style: {
         ...
       },
     }, {
       text: 'text text 1',
       positionOptions: {
         X: '30%',
         Y: '40%',
       },
       style: {
         ...
       },
     }],
     scale: 1,
     quality: 100,
     filename: 'test',
     saveFormat: ImageFormat.png,
     maxSize: 1000,
   };
   const res = await ImageMarker.markText(options);
   
   // then add images
   
   const imageOptions = {
    backgroundImage: {
      src: res,
    },
    quality: 100,
    filename: 'final_result',
    saveFormat: ImageFormat.png,
    watermarkImages: [
      {
        src: require('./images/logo.png'),
        position: {
         X: '40%',
         Y: '40%',
        },
      },
      {
        src: require('./images/logo1.png'),
        position: {
         X: '80%',
         Y: '40%',
       },
      },
    ],
   };
   
   await ImageMarker.markImage(imageOptions);
3. Repository owner locked and limited conversation to collaborators on Dec 5, 2023
4. JimmyDaddy

   converted this issue into a discussion #172 on Dec 5, 2023