📄 ch13_01.htm
字号:
<?label 13. Creating Graphics on the Fly?><html><head><title>Creating Graphics on the Fly (CGI Programming with Perl)</title><link href="../style/style1.css" type="text/css" rel="stylesheet" /><meta name="DC.Creator" content="Scott Guelich, Gunther Birznieks and Shishir Gundavaram" /><meta scheme="MIME" content="text/xml" name="DC.Format" /><meta content="en-US" name="DC.Language" /><meta content="O'Reilly & Associates, Inc." name="DC.Publisher" /><meta scheme="ISBN" name="DC.Source" content="1565924193L" /><meta name="DC.Subject.Keyword" content="stuff" /><meta name="DC.Title" content="CGI Programming with Perl" /><meta content="Text.Monograph" name="DC.Type" /></head><body bgcolor="#ffffff"><img src="gifs/smbanner.gif" alt="Book Home" usemap="#banner-map" border="0" /><map name="banner-map"><area alt="CGI Programming with Perl" href="index.htm" coords="0,0,466,65" shape="rect" /><area alt="Search this book" href="jobjects/fsearch.htm" coords="467,0,514,18" shape="rect" /></map><div class="navbar"><table border="0" width="515"><tr><td width="172" valign="top" align="left"><a href="ch12_03.htm"><img src="../gifs/txtpreva.gif" alt="Previous" border="0" /></a></td><td width="171" valign="top" align="center"><a href="index.htm">CGI Programming with Perl</a></td><td width="172" valign="top" align="right"><a href="ch13_02.htm"><img src="../gifs/txtnexta.gif" alt="Next" border="0" /></a></td></tr></table></div><hr align="left" width="515" /><h1 class="chapter">Chapter 13. Creating Graphics on the Fly</h1><div class="htmltoc"><h4 class="tochead">Contents:</h4><p><a href="ch13_01.htm">File Formats</a><br><a href="ch13_02.htm">Outputting Image Data</a><br><a href="ch13_03.htm">Generating PNGs with GD</a><br><a href="ch13_04.htm">Additional GD Modules</a><br><a href="ch13_05.htm">PerlMagick</a><br></p></div><p>Throughout this book we have seen <a name="INDEX-2490" /> <a name="INDEX-2,491" />many examples of CGI scriptsgenerating dynamic output. However, in almost all cases, the outputhas been HTML. Certainly this is the most common format your scriptswill generate. However, CGI scripts can actually generate any type offormat, and in this chapter we will look at how we can dynamicallygenerate images.</p><p>Generating images <a name="INDEX-2492" />dynamicallyhas many uses. One of the most common is to generate graphs. If youhave a data source that is continually changing, such as the resultsof an online survey, a CGI script can generate a graph that presentsa visual snapshot of this data.</p><p>There are also times when generating images dynamically makes lesssense. It is much less efficient to generate an image dynamicallythan for your web server to serve the image from an image file. Thus,just because some of these tools allow you to generate really coolgraphics dynamically doesn't mean you must use them only in adynamic context. Unless the images you generate are based upon datathat changes, save the image to a static file and serve that instead.</p><p>This chapter presents a broad overview of the different toolsavailable for generating dynamic images online, and includesreferences with each for finding more information. The goal of thischapter is to explain techniques for generating images dynamicallyand familiarize you with the most popular tools available to you. Afull description of many of these tools along with others isavailable in a book of its own, <em class="citetitle">Programming Web Graphicswith Perl and GNU Software</em> by Shawn Wallace(O'Reilly & Associates, Inc.).</p><div class="sect1"><a name="ch13-41714" /><h2 class="sect1">13.1. File Formats</h2><p>Let's first review the <a name="INDEX-2493" /> <a name="INDEX-2,494" />image formats that are used online today.The most common image formats, of course, are GIF and JPEG, whichevery graphical web browser supports. Other file formats that we willdiscuss in this chapter include PNG and PDF.</p><a name="ch13-1-fm2xml" /><div class="sect2"><h3 class="sect2">13.1.1. GIF</h3><p>The <em class="firstterm">Graphics Interchange Format</em>(<em class="firstterm">GIF </em>) was<a name="INDEX-2495" /><a name="INDEX-2496" /><a name="INDEX-2497" /><a name="INDEX-2498" />created by <a name="INDEX-2,499" />CompuServe andreleased as an open standard in 1987. It quickly became a verypopular image format and, along with JPEG, became a standard formatfor images on the Web. GIF files are typically quite small,especially for images with few colors, which makes them well suitedfor transferring online.</p><p>GIF only supports up to 256 <a name="INDEX-2500" />colors, but it works well fortext and images, such as icons, which do not have many colors buthave sharp details. The<a name="INDEX-2501" /> <a name="INDEX-2,502" /> <a name="INDEX-2,503" /><a name="INDEX-2504" />compression algorithm that GIF uses,LZW, is lossless, which means that no image quality is lost duringcompression or decompression, allowing GIF files to accuratelycapture details.</p><p>The GIF file format has been extended to support basic<a name="INDEX-2505" />animation, which can loop. The movingbanner ads that you see online are typically animated GIF files. GIFfiles can also have a<a name="INDEX-2506" />transparent background byspecifying a single color in the image that should be displayed astransparent.</p><a name="ch13-2-fm2xml" /><div class="sect3"><h3 class="sect3">13.1.1.1. The LZW patent</h3><p>Unfortunately, CompuServe and others apparently failed to notice that<a name="INDEX-2507" />LZW, the compression algorithm used byGIF, was actually patented by Unisys in 1983. Unisys reportedlydiscovered that GIF uses LZW in the early 1990s and in 1994CompuServe and Unisys reached a settlement and announced thatdevelopers who write software supporting GIF must pay a licensing feeto Unisys. Note that this does not include web authors who use GIFfiles or users who browse them on the Web.</p><p>This turn of events created quite a stir among developers,<a name="INDEX-2508" /><a name="INDEX-2509" />especially opensource developers. As a result, CompuServe and others developed thePNG format as a LZW-free successor to GIF; we'll discuss PNGbelow. However, GIF remains a very popular file format, and PNG isnot supported by all browsers.</p><p>As a result of the LZW licensing issue, the tools we discuss in thischapter provide very limited support for GIF files, as we will see.</p></div></div><a name="ch13-3-fm2xml" /><div class="sect2"><h3 class="sect2">13.1.2. PNG</h3><p>The <em class="firstterm">Portable NetworkGraphic</em><a name="INDEX-2510" /> <a name="INDEX-2,511" /><a name="INDEX-2512" /> (<em class="firstterm">PNG</em>) format was created as a successor to the GIF format. Itadds the following features over GIF:</p><ul><li><p>PNG uses an efficient<a name="INDEX-2513" /><a name="INDEX-2514" />compression algorithm that is<em class="emphasis">not</em> LZW. In most cases, it achieves slightlybetter compression than the LZW algorithm.</p></li><li><p>PNG supports images in any of three modes: images with a limitedpalette of 256 or fewer colors, 16-bit grayscale images, and 48-bittrue color images.</p></li><li><p>PNG supports alpha channels, which allows varying degrees of<a name="INDEX-2515" />transparency.</p></li><li><p>PNG graphics have a better interlacing algorithm that allows users tomake out the contents of the image as it downloads much faster thanwith a GIF.</p></li></ul><p>For additional differences, as well as an demonstration of thedifference between the PNG and GIF interlacing, visit <a href="http://www.cdrom.com/pub/png/pngintro.html">http://www.cdrom.com/pub/png/pngintro.html</a>.</p><p>Unfortunately, many <a name="INDEX-2516" />browsers do not support PNG images. Ofthose that do, many do not support all of its features, such asmultiple levels of transparency. Support for PNG should continue toincrease, however, and older browsers that do not support it willeventually be upgraded.</p><p>PNG does not support animations.</p></div><a name="ch13-4-fm2xml" /><div class="sect2"><h3 class="sect2">13.1.3. JPEG</h3><p>The <em class="firstterm">Joint Photographic ExpertsGroup</em><a name="INDEX-2517" /><a name="INDEX-2518" /><a name="INDEX-2519" />(<em class="firstterm">JPEG </em>) is a standards body created togenerate an image format for encoding continuous tone images. TheirJPEG standard actually discusses a very general method for stillimage compression and not a file format. The file format that peopletypically think of as a JPEG is actually <em class="firstterm">JFIF</em>,the <em class="firstterm">JPEG File InterchangeFormat</em><a name="INDEX-2520" />. We will stickwith the more familiar term and also refer to a JFIF file as a JPEGfile.</p><p>JPEG files are ideal for encoding photographs. JPEG supports full,24-bit color but it uses a <a name="INDEX-2521" /><a name="INDEX-2522" /><a name="INDEX-2523" /> <a name="INDEX-2,524" />lossy compression algorithm, which meansthat each time the file is compressed, detail is lost. Because theencoding for JPEG files is done in blocks, it is most noticeable inimages that have very sharp details, such as text and line art. Thesedetails may appear blurred in a JPEG file.</p><p>JPEG files have no support for<a name="INDEX-2525" />animation or transparency.</p></div><a name="ch13-5-fm2xml" /><div class="sect2"><h3 class="sect2">13.1.4. PDF</h3><p>Adobe's <em class="firstterm">Portable Document Format</em>(<em class="firstterm">PDF </em>) is<a name="INDEX-2526" /><a name="INDEX-2527" /><a name="INDEX-2528" /><a name="INDEX-2529" />more than just an image format. It isactually a language derived from PostScript that can include text,basic shapes, line art, and images, as well as numerous otherelements. Unlike images, which are typically displayed within an HTMLfile, PDF files are typically standalone documents, and users use abrowser plug-in or external application such as Adobe Acrobat to<a name="INDEX-2530" /><a name="INDEX-2531" />viewthem.</p></div></div><hr align="left" width="515" /><div class="navbar"><table border="0" width="515"><tr><td width="172" valign="top" align="left"><a href="ch12_03.htm"><img src="../gifs/txtpreva.gif" alt="Previous" border="0" /></a></td><td width="171" valign="top" align="center"><a href="index.htm"><img src="../gifs/txthome.gif" alt="Home" border="0" /></a></td><td width="172" valign="top" align="right"><a href="ch13_02.htm"><img src="../gifs/txtnexta.gif" alt="Next" border="0" /></a></td></tr><tr><td width="172" valign="top" align="left">12.3. Inverted Index Search</td><td width="171" valign="top" align="center"><a href="index/index.htm"><img src="../gifs/index.gif" alt="Book Index" border="0" /></a></td><td width="172" valign="top" align="right">13.2. Outputting Image Data</td></tr></table></div><hr align="left" width="515" /><img src="../gifs/navbar.gif" alt="Library Navigation Links" usemap="#library-map" border="0" /><p><font size="-1"><a href="copyrght.htm">Copyright © 2001</a> O'Reilly & Associates. All rights reserved.</font></p><map name="library-map"><area href="../index.htm" coords="1,1,83,102" shape="rect" /><area href="../lnut/index.htm" coords="81,0,152,95" shape="rect" /><area href="../run/index.htm" coords="172,2,252,105" shape="rect" /><area href="../apache/index.htm" coords="238,2,334,95" shape="rect" /><area href="../sql/index.htm" coords="336,0,412,104" shape="rect" /><area href="../dbi/index.htm" coords="415,0,507,101" shape="rect" /><area href="../cgi/index.htm" coords="511,0,601,99" shape="rect" /></map></body></html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -