lumia app labs #14: working with high-resolution images in windows phone 8
DESCRIPTION
The ability of the new Nokia Lumia 1020 smartphone to capture stunning high-resolution images opens up new innovation possibilities for app developers. In this webinar, we focus on how to use the Microsoft Windows Phone 8 Camera and Imaging APIs in your apps to manage images captured by the high-resolution camera module in the Nokia Lumia 1020 smartphone. This webinar will presents image-related dos and don’ts for your app designs, along with practical code examples for the capturing and managing of high-resolution images in ways that will provide the best possible user experience. For detailed documentation on the imaging features in Nokia Lumia smartphones see http://www.developer.nokia.com/Resources/Library/Lumia/#!imaging.html For more details about developing for Nokia Lumia smartphones visit http://www.developer.nokia.com/windowsphone Check out details of the other Lumia App Labs, including the future schedule, here: http://www.developer.nokia.com/Develop/Windows_Phone/Learn/TRANSCRIPT
![Page 1: LUMIA APP LABS #14: WORKING WITH HIGH-RESOLUTION IMAGES IN WINDOWS PHONE 8](https://reader034.vdocuments.net/reader034/viewer/2022051210/54c868824a79591c478b4581/html5/thumbnails/1.jpg)
WORKING WITH HIGH-RESOLUTION IMAGES
LUMIA APP LABS #14
Berthier Lemieux Technology Wizard
![Page 2: LUMIA APP LABS #14: WORKING WITH HIGH-RESOLUTION IMAGES IN WINDOWS PHONE 8](https://reader034.vdocuments.net/reader034/viewer/2022051210/54c868824a79591c478b4581/html5/thumbnails/2.jpg)
Sensor size 1/1.5” Pixel size 1.1 micron Optical Image Stabilization Total sensor : 7712x5360 = 41.3MP 16:9 mode : 7712x4352 = 33.6 MP 4:3 mode : 7136x5360 = 38.2 MP
NOKIA LUMIA 1020 CAMERA SENSOR
![Page 3: LUMIA APP LABS #14: WORKING WITH HIGH-RESOLUTION IMAGES IN WINDOWS PHONE 8](https://reader034.vdocuments.net/reader034/viewer/2022051210/54c868824a79591c478b4581/html5/thumbnails/3.jpg)
• By default, the PhotoCaptureDevice doesn’t expose the 34 or 38 megapixels resolutions.
• Applications needs to specifically be aware of that resolution.
5 MP OR HIGH RES?
Without any changes, your app will capture 5 MP images and they will look awesome!
![Page 4: LUMIA APP LABS #14: WORKING WITH HIGH-RESOLUTION IMAGES IN WINDOWS PHONE 8](https://reader034.vdocuments.net/reader034/viewer/2022051210/54c868824a79591c478b4581/html5/thumbnails/4.jpg)
ZOOMING
![Page 5: LUMIA APP LABS #14: WORKING WITH HIGH-RESOLUTION IMAGES IN WINDOWS PHONE 8](https://reader034.vdocuments.net/reader034/viewer/2022051210/54c868824a79591c478b4581/html5/thumbnails/5.jpg)
BE NICE TO YOUR NEIGHBOURS! High res images requires special attention and may break other applications. Don’t save full resolution images to the camera roll.
![Page 6: LUMIA APP LABS #14: WORKING WITH HIGH-RESOLUTION IMAGES IN WINDOWS PHONE 8](https://reader034.vdocuments.net/reader034/viewer/2022051210/54c868824a79591c478b4581/html5/thumbnails/6.jpg)
The camera application saves both the full resolution and an oversampled image simultaneously.
DUAL CAPTURE IN NOKIA CAMERA PRO
![Page 7: LUMIA APP LABS #14: WORKING WITH HIGH-RESOLUTION IMAGES IN WINDOWS PHONE 8](https://reader034.vdocuments.net/reader034/viewer/2022051210/54c868824a79591c478b4581/html5/thumbnails/7.jpg)
Use the data contained in the full resolution image to create the best 5MP image.
OVERSAMPLING
7136
5360 2592
1936
38.2 MP 5 MP
Standard 5 MP Oversampled 5 MP
![Page 8: LUMIA APP LABS #14: WORKING WITH HIGH-RESOLUTION IMAGES IN WINDOWS PHONE 8](https://reader034.vdocuments.net/reader034/viewer/2022051210/54c868824a79591c478b4581/html5/thumbnails/8.jpg)
• The high resolution image is saved locally to the application. • The high resolution image file, the ”original”, will never be modified.
That file can’t be accessed through the PhotoPickerTask. • An oversampled (5 MP) image is saved to the camera roll. • Whenever they desire, the user can reframe the image; change where
and how deep they want to zoom in on the image. A new oversampled (5 MP) image is saved to the camera roll, overwriting the existing one.
• It is highly recommended to follow a similar design pattern in your application.
DUAL CAPTURE IN NOKIA CAMERA PRO
![Page 9: LUMIA APP LABS #14: WORKING WITH HIGH-RESOLUTION IMAGES IN WINDOWS PHONE 8](https://reader034.vdocuments.net/reader034/viewer/2022051210/54c868824a79591c478b4581/html5/thumbnails/9.jpg)
Download the code from developer.nokia.com
SAMPLE APP: PHOTO INSPECTOR
![Page 10: LUMIA APP LABS #14: WORKING WITH HIGH-RESOLUTION IMAGES IN WINDOWS PHONE 8](https://reader034.vdocuments.net/reader034/viewer/2022051210/54c868824a79591c478b4581/html5/thumbnails/10.jpg)
1. Capture a high resolution image. 2. Save it to your local storage. 3. Do your magic. 4. Scale down the resulting image to 5MP. 5. Save the 5MP image to the camera roll. 6. Implement the Rich Media extension. 7. Keep application local storage clean.
STEPS
![Page 11: LUMIA APP LABS #14: WORKING WITH HIGH-RESOLUTION IMAGES IN WINDOWS PHONE 8](https://reader034.vdocuments.net/reader034/viewer/2022051210/54c868824a79591c478b4581/html5/thumbnails/11.jpg)
captureResolution = PhotoCaptureDevice.GetAvailableCaptureResolutions(SENSOR_LOCATION).First(); var deviceName = Microsoft.Phone.Info.DeviceStatus.DeviceName; if (deviceName.Contains("RM-875") || deviceName.Contains("RM-876") || deviceName.Contains("RM-877")) { // We now knows that the application runs on a Lumia 1020 captureResolution = new Windows.Foundation.Size(7712, 4352); // 16:9 ratio //captureResolution = new Windows.Foundation.Size(7136, 5360); // 4:3 ratio } _device = await PhotoCaptureDevice.OpenAsync(SENSOR_LOCATION, captureResolution);
STEP 1 : CAPTURE A HIGH RESOLUTION IMAGE
![Page 12: LUMIA APP LABS #14: WORKING WITH HIGH-RESOLUTION IMAGES IN WINDOWS PHONE 8](https://reader034.vdocuments.net/reader034/viewer/2022051210/54c868824a79591c478b4581/html5/thumbnails/12.jpg)
using (var store = IsolatedStorageFile.GetUserStoreForApplication()) { var localPath = @"\LocalImages"; if (!store.DirectoryExists(localPath)) { store.CreateDirectory(localPath); } using (var file = store.CreateFile(localPath + @"\" + filenameBase + @".jpg")) { using (var localImage = image.AsStream()) { localImage.CopyTo(file); file.Flush(); } } }
STEP 2 : SAVE HIGH RES TO LOCAL STORAGE
![Page 13: LUMIA APP LABS #14: WORKING WITH HIGH-RESOLUTION IMAGES IN WINDOWS PHONE 8](https://reader034.vdocuments.net/reader034/viewer/2022051210/54c868824a79591c478b4581/html5/thumbnails/13.jpg)
STEP 3 : DO YOUR MAGIC
![Page 14: LUMIA APP LABS #14: WORKING WITH HIGH-RESOLUTION IMAGES IN WINDOWS PHONE 8](https://reader034.vdocuments.net/reader034/viewer/2022051210/54c868824a79591c478b4581/html5/thumbnails/14.jpg)
This is easy to do, using the Nokia Imaging SDK.
STEP 4: SCALE DOWN THE RESULTING IMAGE TO 5MP
![Page 15: LUMIA APP LABS #14: WORKING WITH HIGH-RESOLUTION IMAGES IN WINDOWS PHONE 8](https://reader034.vdocuments.net/reader034/viewer/2022051210/54c868824a79591c478b4581/html5/thumbnails/15.jpg)
var library = new Microsoft.Xna.Framework.Media.MediaLibrary()) { using (var picture = library.SavePictureToCameraRoll(filenameBase, libraryImage)) { savedPath = picture.GetPath(); } } }
STEP 5 : SAVE THE 5MP IMAGE TO CAMERA ROLL
![Page 16: LUMIA APP LABS #14: WORKING WITH HIGH-RESOLUTION IMAGES IN WINDOWS PHONE 8](https://reader034.vdocuments.net/reader034/viewer/2022051210/54c868824a79591c478b4581/html5/thumbnails/16.jpg)
Register your app as a rich media application (in WMAppManifest.xml) When launched, the NavigationContext.QueryString of
your application will contain the 2 keys: {[Action, RichMediaEdit]} {[token, {9b6bb83d-18db-45d3-9ab1-44b7a80ff2ab}]}]
In your OnNavigatedTo, match the photo coming from the media library files with the locally saved photo
STEP 6: IMPLEMENT THE RICH MEDIA EXTENSION
![Page 17: LUMIA APP LABS #14: WORKING WITH HIGH-RESOLUTION IMAGES IN WINDOWS PHONE 8](https://reader034.vdocuments.net/reader034/viewer/2022051210/54c868824a79591c478b4581/html5/thumbnails/17.jpg)
protected override void OnNavigatedTo(NavigationEventArgs e) { … var queryString = this.NavigationContext.QueryString; if (queryString.ContainsKey("token")) { using (Microsoft.Xna.Framework.Media.Picture picture = library.GetPictureFromToken(token)) { var localPath = picture.GetPath(); /* ... Some code removed here : Parse the path to retrieve the filename */ using (var store = IsolatedStorageFile.GetUserStoreForApplication()) { if (store.FileExists(localPathCandidate)) { return store.OpenFile(localPathCandidate, FileMode.Open); } }
MATCH LOCAL FILE AND MEDIA LIBRARY FILE
![Page 18: LUMIA APP LABS #14: WORKING WITH HIGH-RESOLUTION IMAGES IN WINDOWS PHONE 8](https://reader034.vdocuments.net/reader034/viewer/2022051210/54c868824a79591c478b4581/html5/thumbnails/18.jpg)
• High resolution images are huge in size : Offer a way for users to delete the images you’re keeping in the local storage.
• It is a good practice to automatically check if the image has been deleted from the media library.
STEP 7 : KEEP APPLICATION LOCAL STORAGE CLEAN
![Page 19: LUMIA APP LABS #14: WORKING WITH HIGH-RESOLUTION IMAGES IN WINDOWS PHONE 8](https://reader034.vdocuments.net/reader034/viewer/2022051210/54c868824a79591c478b4581/html5/thumbnails/19.jpg)
Your application will capture amazing images on the Nokia Lumia 1020! If you decide to capture high res images:
• Follow the code sample from the “Photo Inspector”. • Be nice with your other third-party applications: don’t save high
resolution images to camera roll. • Use the Nokia Imaging SDK for scaling and cropping operations.
SUMMARY
![Page 20: LUMIA APP LABS #14: WORKING WITH HIGH-RESOLUTION IMAGES IN WINDOWS PHONE 8](https://reader034.vdocuments.net/reader034/viewer/2022051210/54c868824a79591c478b4581/html5/thumbnails/20.jpg)
• Imaging in the Lumia Developer’s Library: http://nokia.ly/WP_lib_img • Photo Inspector example application: http://nokia.ly/PhotoInspector • Nokia Imaging SDK: http://www.developer.nokia.com/imaging • Nokia Imaging discussion board: http://nokia.ly/DiBoImg • Lumia 1020 White paper: http://nokia.ly/N1020WhiteP • Windows Phone: Building a Camera App:
http://channel9.msdn.com/Events/Build/2013/2-210 • Rich media extensibility for Windows Phone 8:
http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj662942(v=vs.105).aspx
RESOURCES
![Page 21: LUMIA APP LABS #14: WORKING WITH HIGH-RESOLUTION IMAGES IN WINDOWS PHONE 8](https://reader034.vdocuments.net/reader034/viewer/2022051210/54c868824a79591c478b4581/html5/thumbnails/21.jpg)
THANK YOU!
![Page 22: LUMIA APP LABS #14: WORKING WITH HIGH-RESOLUTION IMAGES IN WINDOWS PHONE 8](https://reader034.vdocuments.net/reader034/viewer/2022051210/54c868824a79591c478b4581/html5/thumbnails/22.jpg)
NOKIA IMAGING WIKI COMPETITION 2013Q3 Write a great tutorial, guide or an article with code which shows how to use the Nokia Imaging SDK or Camera and any other Windows Phone APIs related to imaging in useful, imaginative and innovative ways and/or provide the best feedback on the Nokia Imaging SDK.
developer.nokia.com/Community/Wiki/