GroupeCurious
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
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 urli18n: I18nInterface?: Object with all text used (default value : 'I18nEn' )outputMimeType: string?: Mime Type of the output image, can beimage/png,image/jpegorimage/webpoutputQuality: 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 templateerrorTemplate: TemplateRef<any>?: Image loading error templateenableTooltip: boolean?: Enable / disable tooltip for toolbar buttons/actions (default value:true)tooltipLanguage: string?: Language of tooltip (enorfr) (default value:en)width: number?: Width of the canvas (needed if nosrcgiven)height: number?: Height of the canvas (needed if nosrcgiven)forceSizeCanvas: boolean: Force the canvas to width and height of image or with those specified (defaulttrue)forceSizeExport: boolean: Force the exported image to width and height with those specified (defaultfalse)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 (defaultfalse)enableLoadAnotherImage: boolean: Enable the option to load another image (defaultfalse)showCancelButton: boolean: Enable the cancel button (defaulttrue)colors: { string: string }?: Colors available for users (defaultblack, white, yellow, red, blue, green, purple)drawingSizes: { string: string }?: Sizes available for users (default5, 10, 25px)
Actions
save- Action on save button click, use$eventto get the new edited imagecancel- Action on cancel button click