Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-4884] toImage() on device with retina display is pixellated (captured at half resolution)

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2012-02-15T10:30:33.000+0000
Affected Version/sRelease 1.6.0
Fix Version/sSprint 2012-04, Release 2.0.0
ComponentsiOS
Labelsmodule_imageview, qe-testadded
ReporterMatthew O'Riordan
AssigneeVishal Duggal
Created2011-07-22T09:38:01.000+0000
Updated2012-03-06T11:17:30.000+0000

Description

If you call var a = view.toImage() on a view, and set an ImageView to that blob i.e. imageView.image = a on an Iphone with retina display, then the image is displayed at normal resolution and thus is pixelated on an iPhone 4. There is a very simple fix to this already out there in the wild, see [https://github.com/iamyellow/titanium_mobile/](https://github.com/iamyellow/titanium_mobile/commit/b7ac93e257339e60510a88a5767455f6b1120034#iphone/Classes/TiViewProxy.m) I would recommend that change is made to all appropriate UI controls which have a toImage() method. 
var win = Titanium.UI.createWindow({
  backgroundColor: '#FFF'
});

var sourceView = Titanium.UI.createView({
  width: 155,
  left: 5,
  height: 240,
  borderWidth: 1,
  borderColor: '#000'
});

sourceView.add(Titanium.UI.createLabel({
  text: 'Here is some nice smooth antialised text',
  font: { 
    fontSize: 20
  }
}));

var targetView = Titanium.UI.createImageView({
  width: 155,
  right: 5,
  height: 240,
  borderWidth: 1,
  borderColor: '#000'
});

var btn = Titanium.UI.createButton({
  title: 'Copy image to target on right',
  width: 300,
  height: 30,
  bottom: 10
});

btn.addEventListener('click', function() {
  targetView.image = sourceView.toImage();
});

win.add(btn);
win.add(targetView);
win.add(sourceView);
win.open();
Please remember this issue is only visible when using an iOS 4 Retina Device.

Comments

  1. Paul Dowsett 2011-07-25

    Matthew Thank you for the ticket. In order for us to progress it, we need a proper [usecase](http://wiki.appcelerator.org/display/guides/Contributing+to+Titanium#ContributingtoTitanium-CreatingGoodUsecases) that can be used to demonstrate the issue and also confirm that the subsequent bugfix works. Also, please check the ticket against the [Jira Ticket Checklist](http://wiki.appcelerator.org/display/guides/Contributing+to+Titanium#ContributingtoTitanium-Summary%3AJiraTicketChecklist) in order to complete some of the fields. Many thanks
  2. Matthew O'Riordan 2011-07-29

    Hi Paul Ok, here goes, think this is all the info you need. Do remember that a fix already exists (which I have tested) at https://github.com/iamyellow/titanium_mobile/commit/b7ac93e257339e60510a88a5767455f6b1120034#iphone/Classes/TiViewProxy.m Environment: Titanium SDK version: 1.7.2 (I don't see where build date / hash comes from, I am using the version that was automatically installed by Titanium Studio when 1.7.2 was released a week or so ago). I see an [INFO] log saying something about 1.7.2.97c3689, is that what you need? Platform & version: iOS 4.3, OSX 10.7 (Lion) Device Details: iOS simulator and iOS device when using RETINA display Host Operating System: OSX 10.7 Titanium Studio version: Titanium Studio, build: 1.0.2.201107130739 Code for app.js example 
       
   var sourceView = Titanium.UI.createView({
     width: 155,
     left: 5,
     height: 240,
     borderWidth: 1,
     borderColor: '#000'
   });
   sourceView.add(Titanium.UI.createLabel({
     text: 'Here is some nice smooth antialised text',
     font: { 
       fontSize: 20
     }
   }));
   
   var targetView = Titanium.UI.createImageView({
     width: 155,
     right: 5,
     height: 240,
     borderWidth: 1,
     borderColor: '#000'
   });
   
   var btn = Titanium.UI.createButton({
     title: 'Copy image to target on right',
     width: 300,
     height: 30,
     bottom: 10
   });
   btn.addEventListener('click', function() {
     targetView.image = sourceView.toImage();
   });
   
   var win = Titanium.UI.currentWindow;
   win.add(btn);
   win.add(targetView);
   win.add(sourceView);
    Please remember this issue is only visible when using an iOS 4 Retina Device. Hope that helps, shout if you need anything else. Matt
  3. Paul Dowsett 2011-08-02

    Matt It's getting there, but unfortunately the code will not run without modification (it doesn't contain the window creation statement). Please refer to the [Creating Good Use-cases](http://wiki.appcelerator.org/display/guides/Contributing+to+Titanium#ContributingtoTitanium-CreatingGoodUsecases) guide for more info on this. You should be able to edit the ticket itself and enter the new information to the relevant fields. Thanks for your cooperation so far. Once the above is done, I can move the ticket to the correct project.
  4. Matthew O'Riordan 2011-08-02

    Come on Paul, you are being very difficult now. I provided perfectly good working code that you can use VERY easily by simply creating a window with this code, and you are just not trying to help. I am contributing to your product to help improve it, and you're not being cooperative. I am really surprised at this attitude from Appcelerator as you have a product that is far from perfect, and you have people like myself who are trying to help improve it with constant resistance and bureaucracy. The reason this code did not run is that because Titanium Mobile has so many bugs, I've created a single project with multiple files in it that are created using a tab system, so that I don't have to create a new project for every bug I come across, I simply add a new tab, and create a new JS file for that tab. So to get my example to work, all you need to do is change the file name of app.js to bug.js, and in app.js use the following code: 
       var win = Titanium.UI.createWindow({
     backgroundColor: '#FFF',
     url: 'bug.js'
   });
   win.open();
    I can't believe I had to provide you with that code. Maybe you should read this, http://www.jacquesmattheij.com/How+not+to+handle+open+source+feedback
  5. Paul Dowsett 2011-08-03

  6. Matthew O'Riordan 2011-08-03

    Thanks for pushing this through
  7. Blain Hamon 2011-11-29

    Odd question: What about those of whom who want a non-retina image? As in, I can see someone using the toImage to compose a graphic of a known pixel size. By always using retina scale, it would break their code. I'm thinking we should keep the 1.0 scale for backwards compatibility, but offer that toImage takes an optional argument object property to indicate that things can be made for 2.0 scale.
  8. Vishal Duggal 2012-02-14

    Use this for testing 
       var win = Titanium.UI.createWindow({
     backgroundColor: '#FFF'
   });
   
   var sourceView = Titanium.UI.createView({
     width: 155,
     left: 5,
     height: 240,
     borderWidth: 1,
     borderColor: '#000'
   });
   
   sourceView.add(Titanium.UI.createLabel({
     text: 'Here is some nice smooth antialised text',
     font: { 
       fontSize: 20
     }
   }));
   
   var targetView = Titanium.UI.createImageView({
     width: 155,
     right: 5,
     height: 240,
     borderWidth: 1,
     borderColor: '#000'
   });
   
   var btn = Titanium.UI.createButton({
     title: 'Copy image to target on right',
     width: 300,
     height: 30,
     bottom: 10
   });
   
   btn.addEventListener('click', function() {
     targetView.image = sourceView.toImage(null,true);
   });
   
   win.add(btn);
   win.add(targetView);
   win.add(sourceView);
   win.open();
  9. Vishal Duggal 2012-02-14

    Pull pending https://github.com/appcelerator/titanium_mobile/pull/1416
  10. Max Stepanov 2012-02-15

    Pull request https://github.com/appcelerator/titanium_mobile/pull/1416 merged.
  11. Wilson Luu 2012-03-06

    Closing bug. Verified fix on: SDK build: 2.0.0.v20120305174654 Titanium Studio, build: 1.0.9.201202141208 xcode: 4.2 Device: iphone 4S (5.0.1)

JSON Source