{"_id":"@bengchet/ngx-pica","_rev":"2-1b044d183da0ce6bacf5d811c697c93a","name":"@bengchet/ngx-pica","dist-tags":{"latest":"10.1.1"},"versions":{"10.1.0":{"name":"@bengchet/ngx-pica","version":"10.1.0","description":"Angular (LTS) module to resize images files in browser","license":"MIT","keywords":["angular","pica","exifr","image","resize","compress"],"peerDependencies":{"@angular/common":">=9.0.0","@angular/core":">=9.0.0","pica":"^6.0.0","exifr":">=6.0.0"},"repository":{"type":"git","url":"git+https://github.com/bengchet/ngx-pica.git"},"bugs":{"url":"https://github.com/bengchet/ngx-pica/issues"},"homepage":"https://github.com/bengchet/ngx-pica#readme","_id":"@bengchet/ngx-pica@10.1.0","_nodeVersion":"14.16.0","_npmVersion":"7.18.1","dist":{"integrity":"sha512-xfHRwQBGBBt64zk/y1T1Z/D2tDTeQLIDC5WkqAKwHWrj/OzxZrCf4fZt4Z3lAgQvWS8vH4tmHUgF1PlVfib5cA==","shasum":"3183a951f27f5b87f0bab4d47a5be682830e6adb","tarball":"https://registry.npmjs.org/@bengchet/ngx-pica/-/ngx-pica-10.1.0.tgz","fileCount":18,"unpackedSize":36294,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJholVGCRA9TVsSAnZWagAAVdsP/iG/5N/MIF6Kdw4WXeX+\nMVnfwY0ejJnIGggL90DooPHQKegWAJXwSa/56C7GEtCjMe0xFL5MMxn65vqF\nzT0D2AgV2zt7MQnCmLq2CdpeyZKSEed4ayuWNoDlYwqCQTcsrbgHrX1oToG3\n8fHA+QOZTSDtgIhls+aPiZ1hBa4xxpRQ1MTSniH01W3JHLw+CXdkfdM+vYA4\nswsmaA3nz56Hs5W2042K1MTF3A0FRhEClpCBewd71ZR1TkBdBIppyeIwqIBc\nqTAVLutCJ2SFGDyq5Oc0NLFcY+WeWT5l61ZuEDd7rkff/2EEHF1pnUgm9nMh\nM3wykvXRzSrN3Z4ZD9yPCzUXxsNDczaHaV8sCVBvu2gyzSpvL58cSu69QEBN\nOIRpv6j6+CAQkS4GnT4JJUA3ICZRbFqGcjPcSI72xjal4s7GtNiFV2XyzMrq\ni77FPpPPSgfQUQvS7D7VyWB+txPjPlG0H95NCo/Nh2IQEqHUu60O8TPFRjum\nsqHprpbGY7YtBBKGmp/RbYD13cCuEjIlSCcIk8D8yArOzPD8vKYhrk+uVNt9\nbC29cdeWMIl8whf1C5c3KFpgdmAru1nGgPiC57AHLo0hqDCn6QBY1cnOdGls\n/rC7TXovpT84FtrGRcTVPbKK0ZXXpc74eZaYM+/1eToRjXNvYvPNzveRD0A/\nwBF0\r\n=rofn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMyJXzdrZ3K6LEQqubQ2si4djxY2fd6w24Y7ANff/4pwIgTEcVZSe4JUjLjhfpZYDLXYkpISN13osSf3Cu1IriFW4="}]},"_npmUser":{"name":"bengchet","email":"popfibo@gmail.com"},"directories":{},"maintainers":[{"name":"bengchet","email":"popfibo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-pica_10.1.0_1638028614680_0.21226720297272617"},"_hasShrinkwrap":false},"10.1.1":{"name":"@bengchet/ngx-pica","version":"10.1.1","description":"Angular (LTS) module to resize images files in browser","license":"MIT","keywords":["angular","pica","exifr","image","resize","compress"],"peerDependencies":{"@angular/common":">=9.0.0","@angular/core":">=9.0.0","pica":"^6.0.0","exifr":">=6.0.0"},"repository":{"type":"git","url":"git+https://github.com/bengchet/ngx-pica.git"},"main":"bundles/bengchet-ngx-pica.umd.js","module":"fesm5/bengchet-ngx-pica.js","es2015":"fesm2015/bengchet-ngx-pica.js","esm5":"esm5/bengchet-ngx-pica.js","esm2015":"esm2015/bengchet-ngx-pica.js","fesm5":"fesm5/bengchet-ngx-pica.js","fesm2015":"fesm2015/bengchet-ngx-pica.js","typings":"bengchet-ngx-pica.d.ts","metadata":"bengchet-ngx-pica.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0"},"bugs":{"url":"https://github.com/bengchet/ngx-pica/issues"},"homepage":"https://github.com/bengchet/ngx-pica#readme","_id":"@bengchet/ngx-pica@10.1.1","_nodeVersion":"14.16.0","_npmVersion":"7.18.1","dist":{"integrity":"sha512-cGfopWTvaU+AKTfFe5BAlZ/0t385IWfmz5MwhvM0H6JuvFSTgvGe/rfc3+f8aP6NfFRnx9W9DMOs/gkg8fXn+Q==","shasum":"f0cad43cb1770cb784a1243a59b77a083e0d05eb","tarball":"https://registry.npmjs.org/@bengchet/ngx-pica/-/ngx-pica-10.1.1.tgz","fileCount":35,"unpackedSize":362322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJholziCRA9TVsSAnZWagAAcd0QAJ1E/WP3wpM5MkTtsSyy\nJVGYkBP8dlErKcUzxPSaExMYnLUKF1jZmJrgEqZK1eADrgMBXK/ziSjtM3/h\n3hcTL8dXCjhtR3tfsqaCNZHuCWdXamny4Y5gZHUJiCSf00BfiM4YgWenWhUK\n9Ig+/ieE3i4T+uV29HPvfVnvvrjePxV1X2t2lmudBcKP6KOH3eplP9eeA4h/\nuwMhEgN19dl4ekslbE7Zjc2U8oZVoUb17EP3WedLQjeGWq0bR8MJaOVyEpLZ\nL1vvsTZKbYL3im0QxGqPrpXaLOzEVl/5FLFob/dQGvfgiHjaP6FbMBMGRm5+\n1T1ZhClVwCDsd5FM1sHc/SRX9ncChJqDWKL9vxslClwwi81ch/r+kRCraNuI\n9LOINBhkqdC8/cSIi/k8Rdhx98E2bMiWCcWDQybFjyrU6FlmifDYJU6Fbefl\nklkEhMQJngVCdpryo/otuLXXgOjV76XryBNuwcidsXjcg0LDjEDBBqRSZF2g\nQJWbd9EER4Ny5yRoLxRvbu+/ZVvnLLHeP2D49HwUn9VSmwuxEWEAKkALyAiN\nzGT0xb86sPwM3qqVpd8bRgOyy6Y/TCmXNJQNcy4cCrCrDU3/RDUWEEna16By\nP0tATIe/ZvDNBQ67v/wvqVF1pb1UYVGe55a3msfwCMQmPWfretPJwb4QduiB\nsG64\r\n=BEtz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXTwuYm6r+/E0ZggCJe2bBOLboM2xdMbKcfkmk0NIUyAIgVngigGK63EyH1VUM68bVf0WYI4kcLmD453ZF419CmG4="}]},"_npmUser":{"name":"bengchet","email":"popfibo@gmail.com"},"directories":{},"maintainers":[{"name":"bengchet","email":"popfibo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-pica_10.1.1_1638030562252_0.8845081231800349"},"_hasShrinkwrap":false}},"time":{"created":"2021-11-27T15:56:54.624Z","10.1.0":"2021-11-27T15:56:54.867Z","modified":"2022-04-04T18:22:35.756Z","10.1.1":"2021-11-27T16:29:22.430Z"},"maintainers":[{"name":"bengchet","email":"popfibo@gmail.com"}],"description":"Angular (LTS) module to resize images files in browser","homepage":"https://github.com/bengchet/ngx-pica#readme","keywords":["angular","pica","exifr","image","resize","compress"],"repository":{"type":"git","url":"git+https://github.com/bengchet/ngx-pica.git"},"bugs":{"url":"https://github.com/bengchet/ngx-pica/issues"},"license":"MIT","readme":"# @digitalascetic/ngx-pica\n> @digitalascetic/ngx-pica is an Angular (LTS) module to resize images files in browser using <a href=\"https://github.com/nodeca/pica\">pica - high quality image resize in browser</a>.\n\n[![latest](https://img.shields.io/npm/v/%40digitalascetic/ngx-pica/latest.svg)](https://www.npmjs.com/package/@digitalascetic/ngx-pica) \n\n## Important\n@digitalascetic/ngx-pica Angular 5 compatibility is under version **1.1.8**  \n```bash\n$ npm install @digitalascetic/ngx-pica@1.1.8 --save\n```\n\n## Install\n1. Add `ngx-pica` module as dependency to your project.\n```bash\n$ npm install pica exifr @digitalascetic/ngx-pica --save\n```\n2. Include `NgxPicaModule` into your main AppModule or in module where you will use it.\n```\n// app.module.ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgxPicaModule } from '@digitalascetic/ngx-pica';\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    NgxPicaModule\n  ],\n  declarations: [ AppComponent ],\n  exports: [ AppComponent ]\n})\nexport class AppModule {}\n```\n\n\n\n## Services\n* **NgxPicaService** - Manipulate images using <a href=\"https://github.com/nodeca/pica\">pica - high quality image resize in browser</a>\n* **NgxPicaImageService** - Supplementary services to help you work with images\n\n## NgxPicaService Methods\n#### `.resizeImages(files: File[], width: number, height: number, options?: NgxPicaResizeOptionsInterface): Observable<File>`\nThis method resize an array of images doing it sequentially to optimize CPU and memory use.\n* **files:[]** - Array of images to resize\n* **width** - Width to be resized (px)\n* **height** - Height to be resized (px)\n* **options** - Based on <a href=\"https://github.com/nodeca/pica#resizefrom-to-options---promise\">pica - resize options</a>, we've also added aspect ratio options: \n    * **keepAspectRatio** - Set true to ensure the aspect ratio of the image is maintained as it get resized\n    * **forceMinDimensions** - Set true to ensure the dimensions of image resized will be greater than width and height values defined\n\nThe Observable receives a next on every file that has been resized.\nIf something goes wrong the Observable receive an error.\n\nAll errors are wrapped by NgxPicaErrorInterface.\n\n### `.resizeImage(file: File, width: number, height: number, options?: NgxPicaResizeOptionsInterface): Observable<File>`\nSame as above but only takes one file instead of an array of files.\n\n### `.compressImages(files: File[], sizeInMB: number): Observable<File>`\nThis method compress an array of images doing it sequentially to optimize CPU and memory use.\n* **files:[]** - Array of images to resize\n* **sizeInMB** - File size in MegaBytes\n\nThe Observable receives a next on every file that has been resized.\nIf something goes wrong the Observable receive an error.\n\nAll errors are wrapped by NgxPicaErrorInterface.\n\n### `.compressImage(file: File, sizeInMB: number): Observable<File>`\nSame as above but only takes one file instead of an array of files.\n\n## NgxPicaImageService Methods\n#### `.isImage(file: File): boolean`\nThis method check if a file is an image or not\n\n## Data Structures\n```\nexport interface AspectRatioOptions {\n    keepAspectRatio: boolean;\n    forceDimensions?: boolean;\n}\n```\n\n```\nexport interface NgxPicaResizeOptionsInterface {\n    aspectRatio?: AspectRatioOptions;\n    quality?: number;\n    alpha?: boolean;\n    unsharpAmount?: number;\n    unsharpRadius?: number;\n    unsharpThreshold?: number;\n}\n```\n```\nexport enum NgxPicaErrorType {\n    NO_FILES_RECEIVED = 'NO_FILES_RECEIVED',\n    CANVAS_CONTEXT_IDENTIFIER_NOT_SUPPORTED = 'CANVAS_CONTEXT_IDENTIFIER_NOT_SUPPORTED',\n    NOT_BE_ABLE_TO_COMPRESS_ENOUGH = 'NOT_BE_ABLE_TO_COMPRESS_ENOUGH'\n}\n\nexport interface NgxPicaErrorInterface {\n    err: NgxPicaErrorType;\n    file?: File;\n}\n```\n\n## Example\n\n\n```ts\nimport { Component, EventEmitter } from '@angular/core';\nimport { NgxPicaService } from '@digitalascetic/ngx-pica';\n\n@Component({\n  selector: 'app-home',\n  template: `\n      <img *ngFor=\"let image of images\" [src]=\"image\" />\n  \n      <input type=\"file\" [attr.accept]=\"image/*\" multiple\n             (change)=\"handleFiles($event)\">\n  `\n})\nexport class AppHomeComponent {\n    images: File[] = [];\n    \n    constructor(private _ngxPicaService: NgxPicaService) {\n    \n    }\n    \n    public handleFiles(event: any) {\n        const files: File[] = event.target.files;\n        \n        this._ngxPicaService.resizeImages(files, 1200, 880)\n            .subscribe((imageResized: File) => {\n                let reader: FileReader = new FileReader();\n                \n                reader.addEventListener('load', (event: any) => {\n                    this.images.push(event.target.result);\n                }, false);\n                \n                reader.readAsDataURL(imageResized);\n                \n            }, (err: NgxPicaErrorInterface) => {\n                throw err.err;\n            });\n    }\n```  \n","readmeFilename":"README.md"}