Use of JavaScript-Load-Image in an Angular 7 project
alignsoft opened this issue · 2 comments
In looking through the demo and documentation, this is one of the few libraries that provides comprehensive EXIF and IPTC extraction, two things I need, however, I'm working in Angular, and I cannot for the life of me find a way to make use of this library in Angular.
This isn't a bug, clearly, or a feature request per say, but if there is any way anyone could provide some guidance as to how to incorporate this into an Angular 7 project, I would be eternally grateful.
I haven't worked with Angular since Angular 1, but here's a demo with the latest version:
https://angular-n5aegg.stackblitz.io (demo)
https://stackblitz.com/edit/angular-n5aegg (editor)
app.component.html
<input type="file" (change)="handleFileInput($event)">
<div #image></div>
app.component.ts
import { Component, ViewChild, Renderer2 } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
constructor(private renderer:Renderer2) {}
@ViewChild('image', {static: true}) image;
handleFileInput(event) {
window.loadImage(event.target.files[0], (img) => {
if (this.image.nativeElement.firstChild) {
this.renderer.removeChild(
this.image.nativeElement,
this.image.nativeElement.firstChild
);
}
this.renderer.appendChild(this.image.nativeElement, img);
}, {
maxWidth: 300
})
}
}
Closing this as resolved.