1. Library usage example

https://sagargi.github.io/sagar-image-text

2. Installation

SagarImageText is available on NPM. You can install it using the following command:

npm i sagar-image-text

After installing the package, you import and directly use it on you vue code as:

import { ImageText, ImageTextCoordinate } from "sagar-image-text";
import 'sagar-image-text/style.css'

3. Getting Started

Here is the minimal example:

This is the example of component ImageText which is very basic.

<template>
  <div class="wrapper">
      <ImageText
          image-src="<path-to-image>"
          text="Your text here"
          text-position="bottom-left"
      />
  </div>
</template>

Also, here is an example of component ImageTextCoordinate which is more flexible than ImageText

<template>
  <div class="wrapper">
      <ImageTextCoordinate
          image-src="<path-to-image>"
          text="Your text here"
          image_x_coordinate="50"
          image_y_coordinate="50"
      />
  </div>
</template>

4. Props

Component ImageText has the following props:

| Prop | Type | Default | Description | |-------------|---------------|----------------------|--------------------------------------------------------------------------------------------------------------------| | imageSrc | String | required | Path to the source of the image. | | imageWidth | String | 100% | Width of the image. | | imageHeight | String | auto | Height of the image. | | text | String | your text here | Text you want to display. | | textColor | String | white | Color of the text on image. | | textSize | String | 10px | Font size of the text on image. | | textPosition | String | center | Position to keep the text. (top-left, top-right, top-center, bottom-left, bottom-right, bottom-center and center ) | | textBackgroundColor | String | rgba(0, 0, 0, 0.5) | Background of the text | | imageBorderRadius | String | 0px | Set the border radius of the image. | | textFontStyle | String | Arial, Helvetica, sans-serif; | Set the font style for the text on image. | | textFontFamily | String | normal | Set the font for the text on image. |

Component ImageTextCoordinate has same props as above but with extra props as:

| Prop | Type | Default | Description | |-------------|---------------|----------|---------------------------------------------------------------------------------------| | image_x_coordinate | Number | 50 | x-positon to place the text on image. | | image_y_coordinate | Number | 50 | y-positon to place the text on image. | | textAlign | String | center | Also allows to align the position of the text on an overlay (left, right and center). | | textBackgroundWidth | Number | number | Width of the text background. |