blueimp/JavaScript-Load-Image

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.