Ngx Image Drawing

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.

1import { NgModule } from '@angular/core';
2import { ImageDrawingModule } from 'ngx-image-drawing';
3
4@NgModule({
5    imports: [
6        ...
7        ImageDrawingModule
8    ],
9    declarations: [
10        ...
11    ],
12    exports: [
13        ...
14    ],
15    providers: [
16        ...
17    ]
18})
19export class YourModule {
20}

You can now use in a component like so

1<image-drawing
2    [src]="imageUrl"
3    outputMimeType="'image/jpeg'"
4    outputQuality="0.8"
5    (save)="save($event)"
6    (cancel)="cancel()">
7</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

• @the0neyouseek

Contributors

• @bambidotexe
• @neelavar
• @valentintintin