iOS: Adding black background on PNG

[adamalexander]

Situation:
I use the plugin, to chose a png file form my camera roll. and display it in an <img> tag using the FILE_URI

Expected Behaviour:
The transparent background on the png image gets replaced with a white background.

Actual Behaviour:
The transparent background on the png image gets replaced with a BLACK background.

[janpio]

Does this happen to all transparent pngs or only a special one?
Why the expected white background? Is the <img> on a white background?
Can you download and inspect the resulting file and look if the transparency is gone and replaced with black?

[adamalexander]

This happens to all pngs with transparent backgrounds. I expected a white background I guess because it's most common? I think most people would expect a white background instead of a black when converting a png to any jpg or the sorts. The <img> is in a div that has a white background (is this what you mean?). And yes, after inspecting and downloading the image, it has black instead of transparent or white.

[adamalexander]

@janpio have you come across any solutions?

[janpio]

No, my guess (without actually looking at the code) is that this is the default behavior of whatever code is used to read the png and convert it to the end result image - you should probably have a look at the code yourself.

I am also not 100% sure it would be a general expectation that this is converted into image on white, so I am not sure if this should be changed.

[BYOLARIS]

Same here, not resolved?

[breautek]

stale

[coffandro]

Facing the same issue here, trying to see if I can figure out a fix.

I'm on android and use the following code to get my image

class overview {
    this.pokemonImage.addEventListener('click', function () {
    	navigator.camera.getPicture(
    		function (uri) {
    			imageHandler.copyFile(uri, 'Dex/' + overview.pokemon['IconPath']);
    
    			imageHandler.loadImageFromFile(
    				cordova.file.dataDirectory + 'files/Dex/' + overview.pokemon['IconPath'],
    				function (source) {
    					overview.pokemonImage.src = source;
    				}
    			);
    		},
    		function () {},
    		{
    			destinationType: Camera.DestinationType.FILE_URI,
    			mediaType: Camera.MediaType.PICTURE,
    			sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
    		}
    	);
    });
}

class ImageHandler {
	constructor() {
		this.images = {};
	}

	loadImageFromFile(filename, _callback = null, _passthroughArgs = []) {
		window.resolveLocalFileSystemURL(
			filename,
			function success(fileEntry) {
				fileEntry.file(function (file) {
					var reader = new FileReader();
					reader.onloadend = function () {
						if (this.result) {
							var blob = new Blob([new Uint8Array(this.result)], {
								type: 'image/png',
							});

							if (imageHandler.images[filename] == blob) {
								if (_callback != undefined) {
									_callback(
										window.URL.createObjectURL(imageHandler.images[filename]),
										_passthroughArgs
									);
								}
							} else {
								imageHandler.images[filename] = blob;

								if (_callback != undefined) {
									_callback(window.URL.createObjectURL(blob), _passthroughArgs);
								}
							}
						}
					};
					reader.readAsArrayBuffer(file);
				});
			},
			errorCallback
		);
	}

	copyFile(baseFileURI, destPathName, fileSystem = LocalFileSystem.PERSISTENT) {
		var size = 5 * 1024 * 1024;

		window.resolveLocalFileSystemURL(
			baseFileURI,
			function (file) {
				window.requestFileSystem(
					fileSystem,
					size,
					function (fileSystem) {
						var documentsPath = fileSystem.root;
						console.log(documentsPath);
						file.copyTo(
							documentsPath,
							destPathName,
							function (res) {
								console.log('copying was successful to: ' + res.nativeURL);
							},
							errorCallback
						);
					},
					errorCallback
				);
			},
			errorCallback
		);
	}
}

[coffandro]

After playing around seems to be due to the copy function, at least in my case it works fine if I load it from the file system but not if i copy and then load

[coffandro]

Fixed my issue by forcing PNG encoding