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 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