This repository was archived by the owner on Sep 26, 2022. It is now read-only.
  
  
  
  
  
Description
Describe the bug
Fetching larger images with responseType 'blob' results in inconsistent base64 encoding between iOS and Android.
iOS: encoded string is just one line
Android: encoded string is wrapped and has multiple lines -> this leads to issues when using it as dataUrl in angular
Android:
/9j/4AAQSkZJRgABAgAAAQABAAD//gAQTGF2YzU4LjU0LjEwMAD/2wBDAAgMDA4MDhAQEBAQEBMS
ExQUFBMTExMUFBQVFRUZGRkVFRUUFBUVGBgZGRscGxoaGRocHB4eHiQkIiIqKiszMz7/xACdAAAB
BQEBAQAAAAAAAAAAAAAFBwQDBgIBAAgBAAMBAQEAAAAAAAAAAAAAAAABAgMEBRAAAQMCAwQGBQkF
BwQDAQEBAQIAESEDBDEScUFhUSIFE5GBsTLBodFyYrLwUiMzFAZCgiRzNOHCFaLxkmNDszVTJaPS
dIPiRBEBAQADAQEAAgIDAQEBAAAAAAERMQJBIRIyUQNhccGBQiL/wAARCAFoAoADASIAAhEAAxEA
iOS:
/9j/4AAQSkZJRgABAgAAAQABAAD//gAQTGF2YzU4LjU0LjEwMAD/2wBDAAgKCgsKCw0NDQ0NDRAPEBAQEBAQEBAQEBASEhIVFRUSEhIQEBISFBQVFRcXFxUVFRUXFxkZGR4eHBwjIyQrKzP/xACvAAACAwEBAQEAAAAAAAAAAAACAQADBAUGBwgBAQEBAQEBAQEAAAAAAAAAAAABAgMEBQYHEAACAQIEAwUGAwUGBQUBAQEAAQIDERIxIQRRBUFhIoFxE7GRFAahMlLBQmLRciMzgpJD8RXw4dIHY6IWJJNUU3M0shEAAgIAAwUHAQcEAgMBAQAAAAECESESA0FhMQRRcRORIgWBsXIjBtEzwTJSofBiQhQ0siThkmP/wAARCAFoAoADASIAAhEAAxEA/
To Reproduce
Steps to reproduce the behavior:
- fetch a larger image with responseType: 'blob'
- create dataUrl with the returned data
- use it in angular as background image through style property
// component.ts
this.backgroundImageUrl = this.domSanitizer.bypassSecurityTrustStyle(`url(${dataUrl}) !important`);
// component.html
<div [style.background-image]="backgroundImageUrl">...</div>
- image is not shown in Android due to wrapping
Expected behavior
The base64 encoded result is not wrapped in Android and consistent between the platforms.
Smartphone (please complete the following information):
- Device: Samsung Galaxy S8
- OS: Android 9
- Browser: Chrome
- Version 97.0.4692.87
Additional context: