Table of contents
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.
eqp-attachments
and fabric
:
Step 1: Install npm install --save @eqproject/eqp-img-drawing
npm install fabric@3.6.2
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: info@eqproject.it