Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-17567] Android: Converting a blob into a valid image does not maintain dimensions

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2014-11-22T00:51:28.000+0000
Affected Version/sRelease 3.2.2
Fix Version/sRelease 4.0.0
ComponentsAndroid
Labelsexalture, parity, supportTeam
ReporterPriya Agarwal
AssigneeSunila
Created2014-08-27T22:14:08.000+0000
Updated2015-02-11T21:35:08.000+0000

Description

Issue description

Looking for a cross-platform way to create image thumbnail files asynchronously. Titanium is able to read an image file asynchronously into a buffer and then a blob. If we assign that blob to the image property of an ImageView, it displays as I expect. However, the blob is not recognised as an image by any of the Ti.Blob.image* methods. The blob has a mime type of "application/octet-stream" and a height and width of 0. Meanwhile Android is able to get height and width properly.

Steps to reproduce

Launch sample app. You can see that the fishImage ImageView loads its image directly from a file path in its "image" property.

earthImage is loaded in index.js asynchronously using a file stream. Once the file contents are read completely, they are assigned to the image property of $.earthImage.

Notice, the blob you get as a result of "earthBuffer.toBlob()" can't be used for any other image manipulation (e.g. creating thumbnails). It doesn't have a valid height, or width on Android.

E.G. 
$.earthImage.image = earthBuffer.toBlob();
Ti.API.info( $.earthImage.image.height + ' . '+ $.earthImage.image.width + ' . '+ $.earthImage.image.mimeType);

Android

04-24 15:11:03.812: I/TiAPI(28395):  0 . 0 . application/octet-stream

iOS

[INFO] 1600 . 2560 . application/octet-stream
[INFO] 1600 . 2560 . application/octet-stream

Attachments

FileDateSize
MapModule.zip2014-08-29T06:51:00.000+00005985406

Comments

  1. Sabil Rahim 2014-08-27

    Issue was reproducible with 3.3.0 and 3.4.0
  2. Sunila 2014-08-29

    Attached sample is a native IOS project, do we have a JavaScript titanium sample?
  3. Sunila 2014-08-29

    Tried with the following sample and Android works without any issues (I can see 'width' and 'height' and thumbnail creation also works fine. 
                        var earthFile,
   	earthFileStream,
   	earthBuffer=null;
   
   
   	var w = Ti.UI.createWindow({backgroundColor:'white'});
   	
   	
   	var earthImage = Titanium.UI.createImageView();
   	w.add(earthImage);
   	
   	function fileReader(args) {
   		if (args.bytesProcessed === -1) {
   			Ti.API.error('Done');
   			var blob = earthBuffer.toBlob();
   			Ti.API.info( "Width= " + blob.width + ' Height='+ blob.height + ' mimetype='+ blob.mimeType);
   			earthImage.image = blob.imageAsThumbnail(30);
   			earthBuffer.release();
   	
   			earthImage.animate({
   				opacity: 1,
   				duration: 100
   			});
   		} else {
   			Ti.API.error(args.bytesProcessed + ' of ' + args.totalBytesProcessed);
   			if (earthBuffer == null) {
   				earthBuffer = Ti.createBuffer();
   			}
   	
   			earthBuffer.append(args.buffer);
   		}
   	}
   
   	function loadEarth() {
   		earthImage.image = null;
   		earthImage.opacity = 0;
   	
   		earthFile = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, "", 'KS_nav_ui.png');
   		earthFileStream = Ti.Filesystem.openStream(Ti.Filesystem.MODE_READ, earthFile.nativePath);
   		earthBuffer = null;
   	
   		Ti.Stream.pump(earthFileStream, fileReader, 512, true);
   	}
   
   	earthImage.addEventListener('singletap', loadEarth);
   	
   	w.open();
   	loadEarth();
  4. Sabil Rahim 2014-08-29

    updated with the right sample code. tested on Nexus 4 running Android 4.0.4 with SDK 3.3.0.GA and master. [~salachi] Do retest with attached sample app.
  5. Sunila 2014-08-30

    Tried with the attached sample and I don't see the problem, dimension is returned properly Here is the Log 08-30 21:52:30.093: I/TiAPI(14539): 1600 . 2560 . application/octet-stream 08-30 21:52:30.101: I/TiAPI(14539): 1600 . 2560 . application/octet-stream
  6. Joe Falcone 2014-10-11

  7. Joe Falcone 2014-10-11

  8. Sunila 2014-10-14

    Replaced the use of getFileExtensionFromUrl as it is for encoded url and won't work with path with special characters. https://github.com/appcelerator/titanium_mobile/pull/6216
  9. Sunila 2014-10-15

    Test case copied from TC var picture1 = 'picture@2x.png'; var file1 = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, picture1); var blob1 = file1.read(); Ti.API.info('blob: ' + JSON.stringify(blob1, null, 2)); var picture2 = 'pic@ture.png'; var file2 = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, picture2); var blob2 = file2.read(); Ti.API.info('blob: ' + JSON.stringify(blob2, null, 2));
  10. Ashraf Abu 2014-11-13

    I tried it with the PR: https://github.com/appcelerator/titanium_mobile/pull/6216 and the MapModule.zip code. The log for height and width was as follows: [INFO] : 0 . 0 . application/octet-stream Adding comments for a possible fix in the pull request.
  11. Ewan Harris 2015-02-11

    Verified fix using: Mac OSX 10.10.2 Appcelerator Studio, build: 4.0.0.201502051633 Titanium SDK build: 4.0.0.v20150211081857 Titanium CLI, build: 3.6.0-dev Alloy: 1.5.1 Android Build tools 21.1.1 Nexus 5 (5.0.1), Galaxy S3 (4.4.2) Built to both devices, when converting the blob to an image the dimensions are maintained. Closing ticket.

JSON Source