ngx-easy-image-drawing 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +71 -17
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,22 +1,76 @@
|
|
|
1
|
-
#
|
|
1
|
+
# ngx-easy-image-drawing
|
|
2
2
|
|
|
3
|
+
**Angular library for easy image drawing on a canvas**
|
|
3
4
|
|
|
4
|
-
|
|
5
|
+
This library provides a simple and efficient way to allow users to draw on images within your Angular applications.
|
|
5
6
|
|
|
6
|
-
|
|
7
|
-
<app-image-drawing
|
|
8
|
-
[height]="canvasHeight"
|
|
9
|
-
[width]="canvasWidth"
|
|
10
|
-
[src]="uploadImageFilePreview"
|
|
11
|
-
[showCancelButton]="false"
|
|
12
|
-
forceSizeExport="true"
|
|
13
|
-
outputMimeType="uploadImageFile.type"
|
|
14
|
-
outputQuality="1"
|
|
15
|
-
(savedImage)="onSaveDrawImage($event)"
|
|
16
|
-
>
|
|
17
|
-
</app-image-drawing>
|
|
18
|
-
.
|
|
7
|
+
## Installation
|
|
19
8
|
|
|
20
|
-
|
|
9
|
+
```bash
|
|
10
|
+
npm install ngx-easy-image-drawing
|
|
21
11
|
|
|
22
|
-
|
|
12
|
+
Import Module
|
|
13
|
+
|
|
14
|
+
TypeScript
|
|
15
|
+
|
|
16
|
+
import { NgxEasyImageDrawingModule } from 'ngx-easy-image-drawing';
|
|
17
|
+
|
|
18
|
+
@NgModule({
|
|
19
|
+
imports: [
|
|
20
|
+
NgxEasyImageDrawingModule
|
|
21
|
+
]
|
|
22
|
+
})
|
|
23
|
+
export class AppModule { }
|
|
24
|
+
|
|
25
|
+
Usage
|
|
26
|
+
|
|
27
|
+
HTML
|
|
28
|
+
<app-image-drawing
|
|
29
|
+
[height]="canvasHeight"
|
|
30
|
+
[width]="canvasWidth"
|
|
31
|
+
[src]="uploadImageFilePreview"
|
|
32
|
+
[showCancelButton]="false"
|
|
33
|
+
forceSizeExport="true"
|
|
34
|
+
outputMimeType="uploadImageFile.type"
|
|
35
|
+
outputQuality="1"
|
|
36
|
+
(savedImage)="onSaveDrawImage($event)"
|
|
37
|
+
>
|
|
38
|
+
</app-image-drawing>
|
|
39
|
+
|
|
40
|
+
Options
|
|
41
|
+
|
|
42
|
+
Option Type Description
|
|
43
|
+
height number Canvas height
|
|
44
|
+
width number Canvas width
|
|
45
|
+
src string Image source URL
|
|
46
|
+
showCancelButton boolean Whether to show the cancel button
|
|
47
|
+
forceSizeExport boolean Whether to force export size
|
|
48
|
+
outputMimeType string Output image MIME type
|
|
49
|
+
outputQuality number Output image quality (0-1)
|
|
50
|
+
(savedImage) EventEmitter<string> Event emitted when the image is saved
|
|
51
|
+
|
|
52
|
+
Example
|
|
53
|
+
|
|
54
|
+
TypeScript
|
|
55
|
+
|
|
56
|
+
import { Component } from '@angular/core';
|
|
57
|
+
|
|
58
|
+
@Component({
|
|
59
|
+
selector: 'app-my-component',
|
|
60
|
+
template: `
|
|
61
|
+
<app-image-drawing
|
|
62
|
+
[height]="300"
|
|
63
|
+
[width]="400"
|
|
64
|
+
[src]="imageUrl"
|
|
65
|
+
(savedImage)="handleSavedImage($event)"
|
|
66
|
+
></app-image-drawing>
|
|
67
|
+
`
|
|
68
|
+
})
|
|
69
|
+
export class MyComponent {
|
|
70
|
+
imageUrl = 'path/to/your/image.jpg';
|
|
71
|
+
|
|
72
|
+
handleSavedImage(imageData: string) {
|
|
73
|
+
// Handle the saved image data here
|
|
74
|
+
console.log(imageData);
|
|
75
|
+
}
|
|
76
|
+
}
|