Table of contents

• Table of contents
• Features
• Installation instructions
• Options
• Fields

Features

• [x] Place multiple breakable lines in the image
• [x] Customize font-family with Web Safe Font
• [x] Allow to set a background image
• [x] Set size of the image with responsive background
• [x] Add lines by the x and y axis

Installation instructions

Install ngx-image-writer from npm:

npm install ngx-image-writer --save

Add needed package to NgModule imports:

import { NgxImageWriterModule } from 'ngx-image-writer';

@NgModule({
  ...
  imports: [NgxImageWriterModule,...]
  ...
})

Add <image-writer> to your HTML passing options:

<image-writer [options]="options"></image-writer>

Options

Option | Type | Required | Description | | ------------- | ------------- | ------------- | ------------- | | backgroundImage | string | no | Background image to be written on | | imageWidth | number | yes | Width for the image | | imageHeight | number | yes | Height for the image | | fields | NgxImageWriterFields[] | yes | Fields of text to be written in the image |

Fields

Option | Type | Required | Description | | ------------- | ------------- | ------------- | ------------- | | content | string | yes | Text to be written | | textAlign | string | yes | Alignment of the text start / end / left / center / right | | font | string | yes | Setup font properties for HTML canvas | | lineHeight | number | yes | Height for the text line | | lineWidth | number | yes | Width for the text line | | x | number | yes | x axis position for the text | | y | number | yes | y axis position for the text |