Table of contents

• Getting started
• API
• Use cases
• Credits

Getting started

This component allows to draw on pictures and export the result as a Blob. Is is based on the use of fabric.js.

Step 1: Install eqp-attachments and fabric:

npm install --save @eqproject/eqp-img-drawing
npm install [email protected]

Step 2:

Import the EqpImgDrawingModule:

import { EqpImgDrawingModule } from '@eqproject/eqp-img-drawing';

@NgModule({
  declarations: [AppComponent],
  imports: [EqpImgDrawingModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

API

Inputs

| Input | Type | Default | Required | Description | | - | - | - | - | - | | [src] | string| null | yes | Image url or base64 string | | [i18n] | I18nInterface? | 'I18nEn' | no | Text labels to use | | [outputMimeType] | string? | null | no | Mime type of the output image | | [outputQuality] | number? | null | no | Number between 0 and 1 to determine the quality of the ouput image | | [loadingTemplate] | TemplateRef<any>? | null | no | Template shown while loading | | [errorTemplate] | TemplateRef<any>? | null | no | Template shown in case of error | | [enableTooltip] | boolean? | false | no | Enable/disable tooltip for toolbar buttons/actions | | [tooltipLanguage] | string? | 'en' | no | Language of tooltip (en or fr) | | [width] | number? | null | Yes if no src provided | Width of the canvas | | [height] | number? | null | Yes if no src provided | Height of the canvas | | [forceSizeCanvas] | boolean| true | no | Force the canvas to width and height of image or with those specified | | [forceSizeExport] | boolean| false | no | Force the exported image to width and height with those specified | | [borderCss] | string? | 'none' | no | Add a border to the canvas in CSS (example: 1px solib black) | | [enableRemoveImage] | boolean| false | no | Enable the option to remove the image loaded | | [enableLoadAnotherImage] | boolean| false | no | Enable the option to load another image | | [showCancelButton] | boolean| true | no | Enable the cancel button | | [colors] | { [name: string]: string } | { black: '#000', white: '#fff', yellow: '#ffeb3b', red: '#f44336', blue: '#2196f3', green: '#4caf50', purple: '#7a08af' } | no | Colors available for users | | [drawingSizes] | { [key: string]: number }? | { small: 5, medium: 10, large: 25 } | no | Sizes available for users |

Outputs

| Output | Event Arguments | Required | Description | | ------------- | ------------- | ------------- | ------------- | | (save) | EventEmitter<Blob> | no | Invoked on save button click, use $event to get the Blob of the new edited image | | (cancel) | EventEmitter<void> | no | Invoked on cancel button click |

Use cases

<eqp-img-drawing [showCancelButton]="false" [enableLoadAnotherImage]="true" [enableRemoveImage]="true"
    [src]="src" (save)="saveBtn($event)" [i18n]="i18n" [locale]="locale" 
    [drawingSizes]="{ small: 5, medium: 10, large: 25, extra: 50 }">
</eqp-img-drawing>

    import { I18nInterface } from 'projects/eqp-img-drawing/src/public-api';
    
    ...
    
    i18n: I18nInterface = {
        saveBtn: 'Salva immagine',
        sizes: {
            extra: 'Extra'
        }
    };
    src: string = 'https://images.unsplash.com/photo-1565199953730-2ea3b119ae22?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80';
   
   ...
   
    saveBtn(event) {
        console.log(event)
    }

Credits

This library has been developed by EqProject SRL, for more info contact: [email protected]