ngx-image-drawing-zone
TypeScript icon, indicating that this package has built-in type declarations

16.4.3 • Public • Published

Ngx Image Drawing

Screenshot

Ps. No animals were harmed in taking this picture :P

Description

This module allow to draw on pictures and export the result. (Uses canvas & fabric.js)

Installation

npm install --save ngx-image-drawing-zone

Usage

Add the ImageDrawingModule to the imports of the module which will be using the drawing module.

import { NgModule } from '@angular/core';
import { ImageDrawingModule } from 'ngx-image-drawing';

@NgModule({
    imports: [
        ...
        ImageDrawingModule
    ],
    declarations: [
        ...
    ],
    exports: [
        ...
    ],
    providers: [
        ...
    ]
})
export class YourModule {
}

You can now use in a component like so

<image-drawing
    [src]="imageUrl"
    outputMimeType="'image/jpeg'"
    outputQuality="0.8"
    (save)="save($event)"
    (cancel)="cancel()">
</image-drawing>

Inputs

  • src: string : Image url
  • i18n: I18nInterface? : Object with all text used (default value : 'I18nEn' )
  • outputMimeType: string? : Mime Type of the output image, can be image/png, image/jpeg or image/webp
  • outputQuality: number?: Number between 0 and 1 to determine the quality of the ouput image (if mimeType is jpeg or webp)
  • loadingTemplate: TemplateRef<any>? : Image loading template
  • errorTemplate: TemplateRef<any>? : Image loading error template
  • enableTooltip: boolean? : Enable / disable tooltip for toolbar buttons/actions (default value: true)
  • tooltipLanguage: string? : Language of tooltip (en or fr) (default value: en)
  • width: number? : Width of the canvas (needed if no src given)
  • height: number? : Height of the canvas (needed if no src given)
  • forceSizeCanvas: boolean : Force the canvas to width and height of image or with those specified (default true)
  • forceSizeExport: boolean : Force the exported image to width and height with those specified (default false)
  • borderCss: string? : Add a border to the canvas in CSS (default value: none, example: 1px solib black)
  • enableRemoveImage: boolean : Enable the option to remove the image loaded (default false)
  • enableLoadAnotherImage: boolean : Enable the option to load another image (default false)
  • showCancelButton: boolean : Enable the cancel button (default true)
  • colors: { string: string }? : Colors available for users (default black, white, yellow, red, blue, green, purple)
  • drawingSizes: { string: string }? : Sizes available for users (default 5, 10, 25px)

Actions

  • save - Action on save button click, use $event to get the new edited image
  • cancel - Action on cancel button click

Maintainers

Contributors

Package Sidebar

Install

npm i ngx-image-drawing-zone

Weekly Downloads

12

Version

16.4.3

License

MIT

Unpacked Size

393 kB

Total Files

14

Last publish

Collaborators

  • lea-so123