Creating PDF documents from images or screenshots

Mobile devices are wonderful consumers of PDF documents. But, what about creating them? Many scenarios, such as issuing recipes or invoices, require a PDF file to be created by the device. One easy approach for doing this is to convert an image into a PDF file. This approach works well with Titanium's robust image creation and maintenance functionality.

This recipe demonstrates how to convert a Ti.UI.View into a PDF document. Also demonstrated is how to use Titanium's Ti.Media.takeScreenshot API to convert a fullscreen image of your app into a PDF file. This could be helpful for consumers looking to "print" their screen.

Creating PDF documents from images or screenshots

Getting ready

This recipe leverages the bencoding.pdf native module. This module and supporting source code can be downloaded from the source code provided by the book, or individually through the links provided in the See also section at the end of this recipe. The installation process for this recipe is straightforward and only requires copying the two bencoding.pdf folders into their appropriate modules folder, as highlighted in the screenshot at the end of this section. If your Titanium project does not currently have a modules folder, you can simply copy the complete modules folder from this recipe into your project. In addition to the two native modules, you will need to copy the sampleUI.js file, shown the following screenshot:

Getting ready

After copying the modules folder, you will need to click on your tiapp.xml file in Titanium Studio, and add a reference to the bencoding.pdf modules, as shown in the following screenshot. Please note only one module entry will appear for bencoding.pdf, but both iOS and Android will be added to your tiapp.xml file, once selected.

Getting ready

How to do it…

Once you have added the sampleUI.js file and native modules to your project, you need to create your application namespaces in the app.js file and use require to import the module into your code, as the following snippet demonstrates:

//Create our application namespace
var my = {
    PDF : require('bencoding.pdf'),sampleUI : require('sampleUI'),isAndroid : Ti.Platform.osname === 'android'
};

Creating a UI for the recipe

Now, we create a Ti.UI.Window window to host the recipe's UI elements:

var win = Ti.UI.createWindow({
  title:'PDF Screenshot', backgroundColor:'#fff'
});

Once Ti.UI.Window has been created, the contents of the sample invoice is provided by our sampleUI module. The sampleUI module uses several Ti.UI.View and Ti.UI.Label controls to generate a sample invoice layout.

var vwContent = my.sampleUI.fetchInvoiceUI();
win.add(vwContent);

Creating a PDF from a view

Next, the makeImageButton button is added to the recipe's Ti.UI.Window. This button will later be used to create a PDF sample invoice.

var makeImageButton = Ti.UI.createButton({
    title:'Invoice PDF', bottom:5, left:10, width:135, height:50	
});
win.add(makeImageButton);

When the click event on the makeImageButton button is fired, a PDF is generated with the contents from the Ti.UI.View containing our sample invoice.

makeImageButton.addEventListener('click',function(e){
  1. The first step in generating a PDF is to create an image from the Ti.UI.View containing the invoice layout. The following snippet demonstrates how to do this on both iOS and Android:
      var image = ((my.isAndroid)? vwContent.toImage().media : vwContent.toImage());
  2. The image blob for the invoice Ti.UI.View is then provided to the convertImageToPDF method in the PDF Converters module. This method converts the provided image into a PDF Ti.File blob. In addition to the image on iOS, you can provide a resolution to be used in the conversion process. The following sample uses a resolution of 100:
      var pdfBlob = my.PDF.createConverters().convertImageToPDF(image,100);
  3. The invoice PDF Ti.File blob can then be saved using the standard Ti.FileSystem method, as the following snippet shows:
      var pdfFile = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, 'invoice.pdf'
  );
  pdfFile.write(pdfBlob);
});

Creating a PDF document from a screenshot

A similar technique can be used to create a PDF document containing a screenshot of the app. The first step in doing this is to add a button named ssButton to the recipe's Ti.UI.Window:

var ssButton = Ti.UI.createButton({
    title:'Screen to PDF', bottom:5, right:10, width:135, height:50
});
win.add(ssButton);

When we click on the ssButton button, a screenshot will be taken and converted into a PDF file:

ssButton.addEventListener('click',function(e){

The first step in this process is to use the Ti.Media.takeScreenshot API to take a screenshot of the app:

  Ti.Media.takeScreenshot(function(event){

The screenshot API returns an image blob of the device's screen:

    var image = event.media;

The screenshot image blob is then provided to the convertImageToPDF method in the PDF Converters module. This method converts the provided image into a PDF Ti.File blob. In addition to the image on iOS, you can provide a resolution to be used in the conversion process. This sample uses a resolution of 96 points:

    var pdfBlob = my.PDF.createConverters().convertImageToPDF(image,96);

The screenshot PDF Ti.File blob can then be saved using the standard Ti.FileSystem methods:

    var pdfFile = Ti.Filesystem.getFile(
      Ti.Filesystem.applicationDataDirectory, 'screenshot.pdf'
);
    pdfFile.write(pdfBlob);
  });
});

See also

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.224.73.102