Taking pictures is all well and good, but what about when we wish to save an image to the filesystemso we can retrieve it again later? In this recipe we will do exactly that and also introduce you to the toImage() method which is inbuilt in many of the Titanium controls. This method takes a flattened image of the entire view it is called upon and is extremely useful for taking screenshots or grabbing an image of many controls lumped together in a single view.
Type in the following code after your btnGetPhoto object is created. You can replace the existing code that we've written to add the btnGetPhoto object to the navigation bar, as this code repeats that code and also extends it.
//save a photo to file system button
var btnSaveCurrentPhoto = Titanium.UI.createButton({
title: 'Save Photo',
zIndex: 2 //this appears over top of other components
});
btnSaveCurrentPhoto.addEventListener('click', function(e){
var media = scrollingView.toImage();
//if it doesn't exist, create it create a directory called
//"photos"
//and it will hold our saved images
var newDir = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory,'photos'),
if(!newDir.exists()){
newDir.createDirectory();
}
var fileName = 'photo-' + scrollingView.currentPage.toString() + '.png';
writeFile = Titanium.Filesystem.getFile(newDir.nativePath,fileName);
writeFile.write(media);
alert('You saved a file called ' + fileName + ' to the directory ' + newDir.nativePath);
var _imageFile = Titanium.Filesystem.getFile(newDir.nativePath,fileName);
if (!_imageFile.exists()) {
Ti.API.info('ERROR: The file ' + fileName + ' in the directory ' + newDir.nativePath + ' does not exist!'),
}
else {
Ti.API.info('OKAY!: The file ' + fileName + ' in the directory ' + newDir.nativePath + ' does exist!'),
}
});
//set the right nav button to our photo get button
if(Ti.Platform.osname == 'iphone') {
win.leftNavButton = btnSaveCurrentPhoto;
win.rightNavButton = btnGetPhoto;
}
else
{
//add it to the main window because android does
//not have 'right nav button'
btnGetPhoto.right = 20;
btnGetPhoto.top = 20;
win.add(btnGetPhoto);
//add it to the main window because android does
//not have 'left nav button'
btnSaveCurrentPhoto.left = 20;
btnSaveCurrentPhoto.top = 20;
win.add(btnSaveCurrentPhoto);
}The Titanium.FileSystem namespace opens up a range of file manipulation capabilities, but most importantly, gives us the basic tools in order to read and write a file to the application's storage space on the device. In this recipe we are using the toImage() method of the scrollingView to return a blob of the view's image representation.
We can then get a reference to the folder we wish to store the image file data in. As you can see in the code, we are getting a reference to that folder by creating a new variable such as var newDir = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory,'photos'), and then ensuring that the folder exists. If it doesn't exist, we can create the folder by calling the createDirectory() method on our newDir object.
Finally, our image data is saved in much the same way. First, we create a variable called writeFile, which is referencing our file name within the newDir object folder we have already created. We can then output the file to the filesystem using writeFile's "write()" method, passing in the image media variable as the file data to
save.