Chapter 5. Graphics and Imaging

Many Chrome Apps don’t just display text and forms; they display graphics of all sorts, both those drawn by the app and those brought into the app, such as photographs. Many of the related APIs are part of HTML5 and aren’t unique to Chrome Apps, but their use in Chrome Apps does have its peculiarities, as I’ll describe in this chapter. I’ll also show you how to use the mediaGalleries API that is (as of this writing) unique to Chrome Apps.

Outputting Graphics

Until now, all of our examples showed fairly mundane user interfaces, built up from simple HTML objects, mostly text areas and buttons. However, desktop apps need to be much snazzier, with more-advanced GUIs.

The next few sections describe six different ways to create a user interface: simple text, HTML tables, positioned HTML, drawing on a canvas, Scalable Vector Graphics (SVG), and creating a PDF. Next, we’ll look at how to display images, chiefly JPEGs. Finally, we’ll investigate the Chrome mediaGalleries API, which makes it straightforward for your app to access media files stored on the local computer.

Calendar Example

To show all the different ways of displaying graphics from a Chrome App, we’ll implement the same calendar example each way. The calendar-related part of the app, which calculates the months and days, will stay the same; only the output code will change as we go through all six variations. Figure 5-1 shows the first variation, a plain-vanilla calendar that displays as just text. ...

Get Programming Chrome Apps now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.