Develop Reference

Ionic 5 load blob into image have to run ChangeDetectorRef for last image

I have an IONIC 5 + capacitor + Angular 9 APP which does load an array of images from the server. It does load the image one by one. Each image component calls a document service which returns the Blob downloaded from the server:
this.documentService.download(fileDocumentDownloadRequest)
.subscribe((r: Blob) => {
if (r) {
const reader = new FileReader();
reader.onloadend = () => {
this.loading = false;
this.imageSrc = reader.result;
};
reader.readAsDataURL(r);
} else {
this.loading = false;
}
},
async e => {
console.log('Error loading image', e);
},
() => {
this.loading = false;
});
All works fine however if I have 2 images (the HTML displays the images in a 2-col grid display) it does not work as in the images get downloaded however they don't get rendered.
If I have multiple images, let's say 8, they get rendered except the last one. I played around in the UI and as soon as I click somewhere the last image gets rendered. What I did then was adding the changeDetectorRef.detectChanges() call inside the onloadend event. That works but I'm sure that's not the way of doing it.
The HTML I have for this:
<div class="w-100 h-125px"
(click)="imageSelected = !imageSelected; showImageActions()"
[ngClass]="{'border-yellow': imageSelected}">
<div class="position-absolute w-100 h-100 background-light-gray"></div>
<ion-img *ngIf="!loading && imageSrc"
[src]="imageSrc"
class="position-relative z-index-plus-1 w-100 h-100 object-fit-cover">
</ion-img>
<ng-container *ngIf="loading">
<div class="position-absolute content-centered-middle">
<ion-spinner></ion-spinner>
</div>
</ng-container>
</div>
I have tried both the onload event as well as the onloadend event. With both I get the exact same result.
By the way, I could not use the standard new FileReader() constructor to get the file reader to work on the Android device. Reading various posts I found a solution that worked:
private getFileReader(): FileReader {
const fileReader = new FileReader();
const zoneOriginalInstance = (fileReader as any)['__zone_symbol__originalInstance'];
return zoneOriginalInstance || fileReader;
}
So my question is whether this is an actual bug on IONIC or the file reader events should be handled differently - I'm fairly new in mobile development and would like to understand why this is happening.
Many thanks!

Xamarin Android Url image get request receiving 403 error but not on iOS

I am working on an xamarin app that has images stored in an S3 bucket. The querying works correctly in xamarin when using the correctly constructed Url:
https:// + BucketName + path + ".jpg?AWSAccessKeyId=keycode&Expires=expireNumber&Signature=signatureCode"
When using
Image.Source = urlAddress (as the above format)
The image is loaded fine
Part of the apps pages have custom renderers with Images that need to be rendered via url address. We are updating the images via url at each os level. The iOS is working correctly using the following code:
using (var url = new NSUrl(uri))
using (var data = NSData.FromUrl(url))
if (data != null)
return UIImage.LoadFromData(data);
Which successfully gets the image from Url and updates it. However I am having major issues having it work on Android. I have tried the following area:
making a basic android url and setting the imageView with the following code. Which has been explained to not work here https://forums.xamarin.com/discussion/4323/image-from-url-in-imageview
Android.Net.Uri url = Android.Net.Uri.Parse(url);
imageView.SetImageURI(url);
On that same link using WebClient was suggested by user 'rmacias' to download the data via the url and parse the bytes to an android Bitmap.
private Bitmap GetImageBitmapFromUrl(string url){
Bitmap imageBitmap = null;
using (var webClient = new WebClient())
{
var imageBytes = webClient.DownloadData(url);
if (imageBytes != null && imageBytes.Length > 0)
{
imageBitmap = BitmapFactory.DecodeByteArray(imageBytes, 0, imageBytes.Length);
}
}
return imageBitmap;}
This returns a 403 forbidden error. at the line var imageBytes = webClient.DownloadData(url)
However the same process is working in iOS, the string is already authenticated and I have set the authentication timeout for several minutes incase of slow load. I have also tiued the same url requesting method with the .Net.Http library.
It crashes at res = (HttpWebResponse)request.GetResponse(); with the same 403 Forbidden error.
I have tried multiple things with header authentications for the WebClient and Http client. It feels that its something specific about android requesting url data because the authentication in the url string works for the Xamarin images and in the ioS code.
I'm thinking there is something specific to android that I am missing? Help is much appreciated!

How about using HttpClient, which can leverage the platform specific HttpClientHandler's which Xamarin provides?
So something like:
// make sure to reuse your HttpClient instance, it is a shared resource
// using it in a using() and disposing it all the time, will leave
// sockets open and bog down the connection!
private static HttpClient _httpClient;
public async Task<byte[]> GetImageDataAsync(string url)
{
if (_httpClient == null)
{
// you could inject AndroidHttpClientHandler or NSUrlSessionHandler here...
_httpClient = new HttpClient();
// set headers etc...
}
var response = await _httpClient.GetAsync(url).ConfigureAwait(false);
if (!response.IsSuccessStatusCode)
return null;
var result = await response.Content.ReadAsByteArrayAsync().ConfigureAwait(false);
return result;
}
Then you can use this platform agnostically like:
var data = await GetImageDataAsync(url);
imageBitmap = BitmapFactory.DecodeByteArray(data, 0, data.Length);
on iOS
var data = await GetImageDataAsync(url);
var imageData = NSData.FromArray(data);
imageBitmap = UIImage.LoadFromData(imageData);
There are also nice libraries, such as FFImageLoading, which support this out of the box, with effects, loading of images in TableViews etc., which you can consider as an alternative.

ListView reusing old images

I created a plugin using Picasso and it uses the android.widget.ImageView to load the cached image into.
The plugin works fine if using a Repeater but whenever i try using it with a ListView after scrolling past about the 7th item the ListView begins to reuse old images even if the image source is different

The reason why is because list views reuse the entire fragment; so what happens is that your img being reused gets the old image shown unless you clear it.
I actually use Picasso myself; and this is my current picasso library.
So if you look in my code below, when I set the new .url, I clear the existing image. (I made a comment on the specific line) -- This way the image now show blank, and then picasso loads it from either memory, disk or a remote url (in my case a remote url) and it will assign the proper image.
"use strict";
var Img = require('ui/image').Image;
var application = require("application");
var PT = com.squareup.picasso.Target.extend("Target",{
_owner: null,
_url: null,
onBitmapLoaded: function(bitmap, from) {
// Since the actual image / target is cached; it is possible that the
// target will not match so we don't replace the image already seen
if (this._url !== this._owner._url) {
return;
}
this._owner.src = bitmap;
},
onBitmapFailed: function(ed) {
console.log("Failed File", this._url);
},
onPrepareLoad: function(ed) {
}
});
Object.defineProperty(Img.prototype, "url", {
get: function () {
return this._url;
},
set: function(src) {
if (src == null || src === "") {
this._url = "";
this.src = null;
return;
}
var dest = src;
this._url = dest;
this.src = null; // -- THIS IS THE LINE TO CLEAR THE IMAGE
try {
var target = new PT();
target._owner = this;
target._url = dest;
var x = com.squareup.picasso.Picasso.with(application.android.context).load(dest).into(target);
} catch (e) {
console.log("Exception",e);
}
},
enumerable: true,
configurable: true
});
Please note you only need to require this class once, then it attaches itself to the <Image> component and adds the new .url property; this allows me to use this in the Declarative XML in all the rest of the screens and when I need picasso, I just use the .url property to have picasso take over the loading of that image.

Loading binary image data to an image fails on Android 4.1 in Cordova Project

I have serious issues loading binary image data into a simple image-element. I coded a cordova app (using Sencha touch) which loads images the following way:
xhr.open('GET', imageUrl, true);
xhr.responseType = 'blob';
xhr.addEventListener('load', function () {
if (xhr.status === 200) {
// onload needed since Google Chrome doesn't support addEventListener for FileReader
fileReader.onload = function (evt) {
image.setSrc(evt.target.result);
};
// Load blob as Data URL
fileReader.readAsDataURL(xhr.response);
}
}, false);
On Android 5 and 4.4 (these are the ones I tested) it works like a charm. Now I ran it Android 4.1 on an ASUS Tablet and the onload callback doesn't get fired. When I throw a blob in the readAsDataURL-function, at least the onload callback is fired, but the image doesn't show any image as well :(
Has anyone a suggestion, what the failure could be or what I'm doing wrong?

Ah, finally I got it to work on Android 4.1.1 (ASUS Tablet) with the following code. Another issue was, that saving an arraybuffer response from the xhr could not simply serialized, so I converted the stuff to string. Also I receive the blob taking into account, that on some systems the Blob object simply isn't there:
function arrayBufferToString(buf) {
return String.fromCharCode.apply(null, new Uint8Array(buf));
};
function stringToArrayBuffer(str) {
var buf = new ArrayBuffer(str.length*2); // 2 bytes for each char
var bufView = new Uint8Array(buf);
for (var i=0, strLen=str.length; i<strLen; i++) {
bufView[i] = str.charCodeAt(i);
}
return buf;
};
function getBlob(content, type) {
var blob = null;
// Android 4 only has the deprecated BlobBuilder :-(
try {
blob = new Blob([content], {type: type});
} catch(e) {
window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder ||
window.MozBlobBuilder || window.MSBlobBuilder;
if (window.BlobBuilder)
{
var bb = new BlobBuilder();
bb.append(content);
blob = bb.getBlob(type);
}
}
return blob;
};
cachedFile = getCachedFile(...); // not of interest here, I think :-)
if (cachedFile)
{
callback.apply(this, [window.webkitURL.createObjectURL(getBlob(stringToArrayBuffer(cachedFile.data), 'image/jpeg'))]);
}
else {
xhr.open('GET', imageUrl, true);
xhr.responseType = 'arraybuffer';
xhr.addEventListener('load', function () {
if (xhr.status === 200) {
cachedFile = {
url: imageUrl,
data: arrayBufferToString(xhr.response)
};
addCachedFile(cachedFile); // not of interest here, I think :-)
callback.apply(this, [window.webkitURL.createObjectURL(getBlob(xhr.response, 'image/jpeg'))]);
}
}, false);
// Send XHR
xhr.send();
}
Edit: Just did a little change and now used the Uint8Array Class instead of the Uint16Array Class because I got errors: "RangeError: byte length of Uint16Array should be a multiple of 2". Now it works well.
Edit2: Just saw, that the above code doesn't work out in all situations because of the usage of Uint8Array resp. Uint16Array.
Now I think I have a solid solution: I convert the binary responded by the image url into a base64 using canvas with the function from here http://appcropolis.com/blog/web-technology/javascript-encode-images-dataurl/ . Takes a little time, but still a working solution :)

Downloading Transparent PNG's on Android using Appcelerator turns the background black

Can anyone shed any light on why, using the Image Factory module to download and store images on Android, does it ignore the transparency on PNG graphics and give them a black background?
It works fine on iOS and everything is "as is".
Do I need to add anything to the download script to retain the transparency?
Help!
Here is my download script, I'm building using Titanium 3.5.1 GA:
function getMarker(url, filename) {
// this will enable us to have multiple file sizes per device
var filename2 = filename.replace(".png", "#2x.png");
var filename3 = filename.replace(".png", "#3x.png");
var mapMarker = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, 'map_marker_icons', filename);
var mapMarker2 = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, 'map_marker_icons', filename2);
var mapMarker3 = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, 'map_marker_icons', filename3);
// now we need to download the map marker and save it into our device
var getMarker = Titanium.Network.createHTTPClient({
timeout: 30000
});
getMarker.onload = function() {
// if the file loads, then write to the filesystem
if (getMarker.status == 200) {
// resize the images into non-retina, retina and retina HD and only download and resize what is actyally required
var getOriginal = ImageFactory.imageWithAlpha(this.responseData, {});
var resized2 = ImageFactory.imageAsResized(getOriginal, {
width: 50,
height: 50
});
mapMarker.write(resized2);
Ti.API.info(filename + " Image resized");
//I ALWAYS NULL ANY PROXIES CREATED SO THAT IT CAN BE RELEASED
mapMarker = null;
} else {
Ti.API.info("Image not loaded");
}
// load the tours in next
loadNav();
};
getMarker.onerror = function(e) {
Ti.API.info('XHR Error ' + e.error);
//alert('markers data error');
};
getMarker.ondatastream = function(e) {
//Ti.API.info('Download progress: ' + e.progress);
};
// open the client
getMarker.open('GET', url);
// change the loading message
MainActInd.message = 'Downloading Markers';
// show the indicator
MainActInd.show();
// send the data
getMarker.send(); }
Any help would be much appreciated!
Simon

Please try the following code, I tried it on Android and iOS with a png Url, first I GET the photo with HTTP client request, then I save it as a file with extension png and then I read it with an ImageView.
index.js:
$.win.open();
savePng("https://cdn1.iconfinder.com/data/icons/social-media-set/29/Soundcloud-128.png");
function savePng(pngUrl) {
var client = Titanium.Network.createHTTPClient({
onload : function(e) {
var image_file = Ti.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory, "test.png");
image_file.write(this.responseData);
$.img.image = image_file.read();
},
onerror : function(e) {
alert(e.error);
},
timeout : 10000
});
client.open("GET", pngUrl);
client.send();
}
index.xml:
<Alloy>
<Window id="win" backgroundColor="gray">
<ImageView id="img" />
</Window>
</Alloy>