{"id":23854709,"url":"https://github.com/PsySanchez/ngx-easy-image-drawing","last_synced_at":"2025-09-08T01:32:17.857Z","repository":{"id":251890441,"uuid":"838352679","full_name":"PsySanchez/ngx-easy-image-drawing","owner":"PsySanchez","description":null,"archived":false,"fork":false,"pushed_at":"2024-12-25T12:50:40.000Z","size":450,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-25T12:52:28.568Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PsySanchez.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-05T13:17:32.000Z","updated_at":"2024-12-25T12:50:44.000Z","dependencies_parsed_at":"2024-08-06T11:26:28.343Z","dependency_job_id":"36b89942-206e-49a4-b495-15aca6cce8c5","html_url":"https://github.com/PsySanchez/ngx-easy-image-drawing","commit_stats":null,"previous_names":["psysanchez/ngx-easy-image-drawing"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PsySanchez%2Fngx-easy-image-drawing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PsySanchez%2Fngx-easy-image-drawing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PsySanchez%2Fngx-easy-image-drawing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PsySanchez%2Fngx-easy-image-drawing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PsySanchez","download_url":"https://codeload.github.com/PsySanchez/ngx-easy-image-drawing/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232271882,"owners_count":18497768,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-03T00:01:32.194Z","updated_at":"2025-01-03T00:03:10.952Z","avatar_url":"https://github.com/PsySanchez.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Images"],"readme":"## ngx-easy-image-drawing\n\n![Example Image](https://github.com/PsySanchez/ngx-easy-image-drawing/blob/master/chess.png)\n\nAngular library for easy image drawing on a canvas.\n\nThis library provides a simple and efficient way to allow users to draw on images within your Angular applications.\n\n## Installation\n\n```bash\nnpm install ngx-easy-image-drawing\n```\n\n## Usage\n\n1. Import\n\n```typescript\nimport { EasyImageDrawing } from \"ngx-easy-image-drawing\";\n\n@NgModule({\n  imports: [EasyImageDrawing],\n})\nexport class AppModule {}\n```\n\n2. Use it in your template\n\n```html\n\u003ceasy-image-drawing\n  [height]=\"canvasHeight\"\n  [width]=\"canvasWidth\"\n  [src]=\"uploadImageFilePreview\"\n  (savedImage)=\"handleSavedImage($event)\"\n\u003e\n\u003c/easy-image-drawing\u003e\n```\n\n## Options\n\n```markdown\n| Option              | Type                 | Description                                                                                       |\n| ------------------- | -------------------- | ------------------------------------------------------------------------------------------------- |\n| height              | number               | The height of the canvas in pixels.                                                               |\n| width               | number               | The width of the canvas in pixels.                                                                |\n| src                 | string               | The image source URL.                                                                             |\n| saveButtonColor     | string               | The backbackground color for save button (optional parameter).                                    |\n| undoButtonColor     | string               | The backbackground color for save button (optional parameter).                                    |\n| forceSizeExport     | boolean              | Whether to force the exported image size to match the canvas size (in the pipeline).              |\n| outputMimeType      | string               | The MIME type of the exported image (e.g., 'image/jpeg', 'image/png') (in the pipeline).          |\n| outputQuality       | number               | The quality of the exported image (0-1) (in the pipeline).                                        |\n| showColorPicker     | boolean              | Show color picker (optional parameter). True by default.                                          |\n| showlineWidthPicker | boolean              | Show line width picker (optional parameter). True by default.                                     |\n| savedImage          | EventEmitter\u003cFile\u003e   | An event emitted when the image is saved. The event payload is a data URL representing the image. |\n\n```\n\n## Example\n\napp.component.ts\n\n```typescript\nimport { Component } from \"@angular/core\";\nimport { RouterOutlet } from \"@angular/router\";\nimport { EasyImageDrawing } from \"ngx-easy-image-drawing\";\n\n@Component({\n  selector: \"app-root\",\n  standalone: true,\n  imports: [RouterOutlet, EasyImageDrawing],\n  templateUrl: \"./app.component.html\",\n  styleUrl: \"./app.component.css\",\n})\nexport class AppComponent {\n  title = \"my-project\";\n\n  canvasHeight = 600;\n  canvasWidth = 600;\n  uploadImageFilePreview: any = null;\n  savedImage: any = null;\n\n  onFileChange(event: any) {\n    const file = event.target.files[0];\n    const reader = new FileReader();\n    // readAsDataURL reads the uploaded file content and returns a string representing the image data encoded as a DataURL.\n    reader.readAsDataURL(file);\n    // The DataURL typically starts with a prefix like data:image/jpeg;base64,. This prefix specifies the image format (image/jpeg) and encoding (base64).\n    reader.onload = (e: any) =\u003e {\n      // By assigning the complete DataURL string to uploadImageFilePreview, you provide the necessary information to the easy-image-drawing component to display the uploaded image.\n      this.uploadImageFilePreview = e.target.result;\n    };\n  }\n\n  handleSavedImage(event: any) {\n    this.savedImage = event;\n    // reset the image preview\n    this.uploadImageFilePreview = null;\n  }\n}\n```\n\napp.component.html\n\n```html\n\u003c!-- input image --\u003e\n\u003cinput type=\"file\" (change)=\"onFileChange($event)\" /\u003e\n\n\u003c!-- image preview --\u003e\n\u003c!-- use ngIf to show the image drawing component only when the image is uploaded --\u003e\n@if(uploadImageFilePreview) {\n\u003ceasy-image-drawing\n  [height]=\"canvasHeight\"\n  [width]=\"canvasWidth\"\n  [src]=\"uploadImageFilePreview\"\n  [showColorPicker]=\"true\"\n  [showlineWidthPicker]=\"true\"\n  saveButtonColor=\"#4caf50\"\n  undoButtonColor=\"#f44336\"\n  (savedImage)=\"handleSavedImage($event)\"\n\u003e\n\u003c/easy-image-drawing\u003e\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPsySanchez%2Fngx-easy-image-drawing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FPsySanchez%2Fngx-easy-image-drawing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPsySanchez%2Fngx-easy-image-drawing/lists"}