ngx-easy-image-drawing 0.0.8 → 0.0.10
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 +67 -13
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,24 +1,78 @@
|
|
|
1
|
-
|
|
1
|
+
## ngx-easy-image-drawing
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Angular library for easy image drawing on a canvas
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
This library provides a simple and efficient way to allow users to draw on images within your Angular applications.
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
> Note: Don't forget to add `--project ngx-easy-image-drawing` or else it will be added to the default project in your `angular.json` file.
|
|
7
|
+
## Installation
|
|
9
8
|
|
|
10
|
-
|
|
9
|
+
```bash
|
|
10
|
+
npm install ngx-easy-image-drawing
|
|
11
|
+
```
|
|
11
12
|
|
|
12
|
-
|
|
13
|
+
## Usage
|
|
13
14
|
|
|
14
|
-
|
|
15
|
+
1. Import
|
|
15
16
|
|
|
16
|
-
|
|
17
|
+
```typescript
|
|
18
|
+
import { EasyImageDrawing } from "ngx-easy-image-drawing";
|
|
17
19
|
|
|
18
|
-
|
|
20
|
+
@NgModule({
|
|
21
|
+
imports: [NgxEasyImageDrawingModule],
|
|
22
|
+
})
|
|
23
|
+
export class AppModule {}
|
|
24
|
+
```
|
|
19
25
|
|
|
20
|
-
|
|
26
|
+
2. Use it in your template
|
|
21
27
|
|
|
22
|
-
|
|
28
|
+
```html
|
|
29
|
+
<easy-image-drawing
|
|
30
|
+
[height]="canvasHeight"
|
|
31
|
+
[width]="canvasWidth"
|
|
32
|
+
[src]="uploadImageFilePreview"
|
|
33
|
+
[showCancelButton]="false"
|
|
34
|
+
forceSizeExport="true"
|
|
35
|
+
outputMimeType="uploadImageFile.type"
|
|
36
|
+
outputQuality="1"
|
|
37
|
+
(savedImage)="handleSavedImage($event)">
|
|
38
|
+
</easy-image-drawing>
|
|
39
|
+
```
|
|
23
40
|
|
|
24
|
-
|
|
41
|
+
## Options
|
|
42
|
+
|
|
43
|
+
```markdown
|
|
44
|
+
| Option | Type | Description |
|
|
45
|
+
| ---------------- | -------------------- | ------------------------------------------------------------------------------------------------- |
|
|
46
|
+
| height | number | The height of the canvas in pixels. |
|
|
47
|
+
| width | number | The width of the canvas in pixels. |
|
|
48
|
+
| src | string | The image source URL. |
|
|
49
|
+
| showCancelButton | boolean | Whether to display a cancel button. |
|
|
50
|
+
| forceSizeExport | boolean | Whether to force the exported image size to match the canvas size. |
|
|
51
|
+
| outputMimeType | string | The MIME type of the exported image (e.g., 'image/jpeg', 'image/png'). |
|
|
52
|
+
| outputQuality | number | The quality of the exported image (0-1). |
|
|
53
|
+
| savedImage | EventEmitter<string> | An event emitted when the image is saved. The event payload is a data URL representing the image. |
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## Example
|
|
57
|
+
|
|
58
|
+
```typescript
|
|
59
|
+
import { Component } from "@angular/core";
|
|
60
|
+
|
|
61
|
+
@Component({
|
|
62
|
+
selector: "app-my-component",
|
|
63
|
+
template: ` <easy-image-drawing [height]="300" [width]="400" [src]="imageUrl" (savedImage)="handleSavedImage($event)"></easy-image-drawing> `,
|
|
64
|
+
})
|
|
65
|
+
export class MyComponent {
|
|
66
|
+
// You can use uploaded url from input html
|
|
67
|
+
imageUrl = "path/to/your/image.jpg";
|
|
68
|
+
|
|
69
|
+
handleSavedImage(imageData: string) {
|
|
70
|
+
// Handle the saved image data here
|
|
71
|
+
console.log(imageData);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## Keywords
|
|
77
|
+
|
|
78
|
+
Run `image drawing canvas angular ngx`
|