bergben / ng2-img-max

Angular 2 module to resize images down to a certain width and height or to reduce the quality to fit a certain maximal filesize - all in the browser.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Resizing is not working on IOS

Vi-dot opened this issue · comments

Hello,
Nice library, but I have an issue only on IOS (Safari and Chrome)
(it works like a charm on Windows Firefox/Chrome and Mac Safari).

Here is my code :

  public backgroundImage: string = null;

  public setBackgroundImg() {

    let xhr = new XMLHttpRequest();
    xhr.open('GET', (this.platformLocation as any).location.href+'/assets/background4.jpg', true);
    xhr.responseType = 'blob';

    xhr.onload = (e) => {
      console.log('xhr.onload OK', e, xhr);
      
      if (xhr.status == 200) {
        let blob = xhr.response;
        let size = Math.max(window.screen.width, window.screen.height);
        console.log('xhr.status=200 OK', blob, size);

        this.ng2ImgMaxService.resize([blob], size, size).subscribe( result => {
          console.log('ng2ImgMaxService.resize', result);

          this.backgroundImage = this.sanitizer.bypassSecurityTrustStyle('url('+window.URL.createObjectURL(result)+')');
        });
      }
    };
    xhr.send();
  }

Here is the trace :

- xhr.onload OK

- xhr.status=200 OK

- [Error] ERROR
Error: Uncaught (in promise): [object Object]
resolvePromise — zone.js:824
(fonction anonyme) — zone.js:876
onInvokeTask — core.es5.js:3881
runTask — zone.js:192
drainMicroTaskQueue — zone.js:602
invokeTask — zone.js:503
invokeTask — zone.js:1540
globalZoneAwareCallback — zone.js:1566
	defaultErrorLogger (vendor.bundle.js:79023)
	handleError (vendor.bundle.js:79083)
	next (vendor.bundle.js:82506:148)
	(fonction anonyme) (vendor.bundle.js:81638)
	__tryOrUnsub (vendor.bundle.js:24462)
	next (vendor.bundle.js:24409)
	_next (vendor.bundle.js:24349)
	next (vendor.bundle.js:24313)
	next (vendor.bundle.js:24057)
	emit (vendor.bundle.js:81624)
	run (polyfills.bundle.js:2687)
	onHandleError (vendor.bundle.js:81915)
	runGuarded (polyfills.bundle.js:2703)
	_loop_1 (polyfills.bundle.js:3247)
	microtaskDrainDone (polyfills.bundle.js:3256)
	drainMicroTaskQueue (polyfills.bundle.js:3155)
	invokeTask (polyfills.bundle.js:3048)
	invokeTask (polyfills.bundle.js:4085)
	globalZoneAwareCallback (polyfills.bundle.js:4111)

Any idea ?

I try Demo page on IOS, and I get the same issue.

Hey @Vi-dot, please refer to bergben/ng2-img-tools#14 and the link there... Some work would have to be done to support iOS. :(

Hey @Vi-dot. This should work now, can you try the demo page please?

I try that. Thanks