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

Question

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

Answer 1

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>