ngx-easy-image-drawing 0.0.1 → 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.
Files changed (2) hide show
  1. package/README.md +65 -13
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,24 +1,76 @@
1
- # NgxEasyImageDrawing
1
+ # ngx-easy-image-drawing
2
2
 
3
- This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.1.0.
3
+ **Angular library for easy image drawing on a canvas**
4
4
 
5
- ## Code scaffolding
5
+ This library provides a simple and efficient way to allow users to draw on images within your Angular applications.
6
6
 
7
- Run `ng generate component component-name --project ngx-easy-image-drawing` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-easy-image-drawing`.
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
- ## Build
9
+ ```bash
10
+ npm install ngx-easy-image-drawing
11
11
 
12
- Run `ng build ngx-easy-image-drawing` to build the project. The build artifacts will be stored in the `dist/` directory.
12
+ Import Module
13
13
 
14
- ## Publishing
14
+ TypeScript
15
15
 
16
- After building your library with `ng build ngx-easy-image-drawing`, go to the dist folder `cd dist/ngx-easy-image-drawing` and run `npm publish`.
16
+ import { NgxEasyImageDrawingModule } from 'ngx-easy-image-drawing';
17
17
 
18
- ## Running unit tests
18
+ @NgModule({
19
+ imports: [
20
+ NgxEasyImageDrawingModule
21
+ ]
22
+ })
23
+ export class AppModule { }
19
24
 
20
- Run `ng test ngx-easy-image-drawing` to execute the unit tests via [Karma](https://karma-runner.github.io).
25
+ Usage
21
26
 
22
- ## Further help
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>
23
39
 
24
- To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
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
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ngx-easy-image-drawing",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^18.1.0",
6
6
  "@angular/core": "^18.1.0"