📄 ch12.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<!-- This document was created from RTF source by rtftohtml version 3.0.1 -->
<META NAME="GENERATOR" Content="Symantec Visual Page 1.0">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=iso-8859-1">
<TITLE>Without a title - Title</TITLE>
</HEAD>
<BODY BACKGROUND="r2harch.gif" tppabs="http://210.32.137.15/ebook/Web%20Programming%20with%20Perl%205/r2harch.gif" TEXT="#000000" BGCOLOR="#FFFFFF">
<H2 ALIGN="CENTER"><A HREF="ch11.htm" tppabs="http://210.32.137.15/ebook/Web%20Programming%20with%20Perl%205/ch11.htm"><IMG SRC="blanprev.gif" tppabs="http://210.32.137.15/ebook/Web%20Programming%20with%20Perl%205/blanprev.gif" WIDTH="37" HEIGHT="37"
ALIGN="BOTTOM" BORDER="2"></A><A HREF="index-1.htm" tppabs="http://210.32.137.15/ebook/Web%20Programming%20with%20Perl%205/index-1.htm"><IMG SRC="blantoc.gif" tppabs="http://210.32.137.15/ebook/Web%20Programming%20with%20Perl%205/blantoc.gif" WIDTH="42"
HEIGHT="37" ALIGN="BOTTOM" BORDER="2"></A><A HREF="ch13.htm" tppabs="http://210.32.137.15/ebook/Web%20Programming%20with%20Perl%205/ch13.htm"><IMG SRC="blannext.gif" tppabs="http://210.32.137.15/ebook/Web%20Programming%20with%20Perl%205/blannext.gif"
WIDTH="45" HEIGHT="37" ALIGN="BOTTOM" BORDER="2"></A><BR>
<BR>
<FONT COLOR="#0000AA">12</FONT><BR>
<A NAME="Heading1"></A><FONT COLOR="#000077">Multimedia<BR>
</FONT>
<HR>
</H2>
<UL>
<LI><A HREF="#Heading1">Multimedia</A>
<UL>
<LI><A HREF="#Heading2">Implementation Issues</A>
<LI><A HREF="#Heading3">GD: Dynamic Images</A>
<UL>
<LI><A HREF="#Heading4">GD::Image Module</A>
<LI><A HREF="#Heading5">GD::Polygon Module</A>
<LI><A HREF="#Heading6">GD::Font Module</A>
</UL>
<LI><A HREF="#Heading7">Hangman Using the GD Module</A>
<LI><A HREF="#Heading8">Server Push Animation Techniques</A>
<LI><A HREF="#Heading9">Other Techniques</A>
<UL>
<LI><A HREF="#Heading10">Embedding AVI, QuickTime, WAV, and GIF89a within HTML</A>
</UL>
<LI><A HREF="#Heading11">Summary</A>
</UL>
</UL>
<P>
<HR>
</P>
<UL>
<LI>Implementation Issues
<P>
<LI>GD: Dynamic Images
<P>
<LI>Hangman Using the GD Module
<P>
<LI>Server Push Animation Techniques
<P>
<LI>Other Techniques
</UL>
<P>Multimedia is an ambiguous term that is used to describe many different things.
This chapter focuses on multimedia as that which goes beyond ordinary text and graphics,
pushing the limits of HTML to bring Web pages to life. An immediate thought that
may come to mind is that of adding audio and video. Small, animated graphics are
a popular attraction for many Web site builders. Although many animation techniques
might be best done using a client-side language such as Java, you can do several
things from the server using Perl.</P>
<P>In this chapter, you explore the use of the <TT>GD</TT> Perl modules developed
by Lincoln Stein. You also look into server push techniques and quickly review other
ways you can embed multimedia into your Web pages.
<H3 ALIGN="CENTER"><A NAME="Heading2"></A><FONT COLOR="#000077">Implementation Issues</FONT></H3>
<P>One important consideration when discussing multimedia is performance. Bandwidth
is once again the limiting factor when you're creating good animation representation
on the Web. You should consider some of the ideas discussed previously in this book
to reduce the size of your images. Although your animated graphics may entice people
to visit your Web site, the visitors can just as easily be driven away by those same
graphics because of the time it may take to download them.</P>
<P>Another important consideration is color depth. Images are best represented using
24-bit color; however, using this color can be very expensive in terms of file size.
You have to measure the trade-off between representation of true color and performance.
One way to do so is to use a lower depth of color and create your own logical color
space. You can create an image that uses only 256 colors but define your own custom
colors to suit the image. Color depth becomes even more important as you start using
multiple images to create the animation.
<H3 ALIGN="CENTER"><A NAME="Heading3"></A><FONT COLOR="#000077">GD: Dynamic Images</FONT></H3>
<P>In CPAN, you can find a module called <TT>GD</TT>. This module provides a Perl
interface to the GD graphics library, which was written by Thomas Boutell. This library
provides several routines for creating, reading, writing, and manipulating GIF files.
The routines are implemented as graphic primitives such as line and arc drawing and
fill routines. Using this library, you also can render simple fonts as well as read
and utilize existing GIF files.</P>
<P>For the examples in this chapter, you will use the <TT>GD</TT> module to dynamically
create images for a Web page. First, however, you need to go over a few of the basics
concerning the <TT>GD</TT> module.
<H4 ALIGN="CENTER"><A NAME="Heading4"></A><FONT COLOR="#000077">GD::Image Module</FONT></H4>
<P>The <TT>GD::Image</TT> module provides an interface to the image data and graphics
primitive aspect of the GD library. This class contains interfaces for reading and
writing GIF files and dynamically creating GIF file contents. In the following sections,
you examine some of the functions provided in this class. <B><TT><BR>
<BR>
GD::Image::new(width, height)</TT></B> The <TT>GD::Image::new(width, height)</TT>
function creates a new empty image of width <TT>width</TT> and height <TT>height</TT>.
You begin here if you want to create a dynamic image using the drawing primitives.
Alternatively, you can construct a <TT>GD::Image</TT> object using <TT>newFromGif(FILEHANDLE)</TT>,
<TT>newFromXbm(FILEHANDLE)</TT>, or <TT>newFromGd(FILEHANDLE)</TT>. These constructors
load the image content data from <TT>FILEHANDLE</TT>, which can point to a file of
type GIF, XBM, or GD format. Storing files in GD format is not recommended because
no compression is performed, causing these files to potentially become rather large.
<BR>
<BR>
<B><TT>GD::Image::gif() and GD::Image::gd()</TT></B> The <TT>GD::Image::gif()</TT>and
<TT>GD::Image::gd()</TT> methods are used to emit a <TT>GD::Image</TT> object in
<BR>
either GIF or GD format. You generally use them after you have finished creating
your image content and are ready to either save the image to disk or return the image
data from a CGI script. <BR>
<BR>
<B><TT>GD::Image::colorAllocate(red, green, blue)</TT></B> The <TT>GD::Image::colorAllocate(red,
green, blue)</TT> method allocates a color corresponding to an RGB triplet. It returns
a color index value that can later be used with the drawing primitives. This color
index can also be passed into the <TT>colorDeallocate(colorIndex)</TT> method. A
number of special color index values are automatically allocated. These constants
are contained within the <TT>GD::</TT> namespace but are automatically exported when
the <TT>GD</TT> module is loaded. I mention these special color indices as I cover
their uses. <BR>
<BR>
<B><TT>GD::Image::transparent(colorIndex)</TT></B> The <TT>GD::Image::transparent(colorIndex)</TT>
method marks the color specified by <TT>colorIndex</TT> as transparent color. All
pixels using this color are invisible, thus allowing the background to appear. This
capability is useful for creating the illusion of nonrectangular images, because
all images are, in fact, rectangles, regardless of how they might appear.</P>
<P>A few other methods are related to color control, but I don't mention them here.
To get a complete reference on this module, be sure to check the latest version in
CPAN. <BR>
<BR>
<B><TT>GD::Image::setBrush(GD::Image)</TT></B> The <TT>GD::Image::setBrush(GD::Image)</TT>
method establishes a brush or pattern that you can use when drawing lines or arcs.
You first create a <TT>GD::Image</TT> object that acts as your brush, pass it as
an argument to this method, and then use the <TT>gdBrushed</TT> special color index
when calling one of the drawing primitives. <B><TT><BR>
<BR>
GD::Image::setTile(GD::Image)</TT></B> The <TT>GD::Image::setTile(GD::Image)</TT>
method establishes a tile pattern that you can use when filling areas. You first
create a <TT>GD::Image</TT> object that defines your pattern, pass it as an argument
to this method, and then use the <TT>gdTiled</TT> special color index as the fill
color for one of the drawing methods. <B><TT><BR>
<BR>
GD::Image::setPixel(x,y,colorIndex)</TT></B> The <TT>GD::Image::setPixel(x,y,colorIndex)</TT>
method sets the color of a single pixel value at location <TT>(x,y)</TT> to the color
specified by <TT>colorIndex</TT>. <B><TT><BR>
<BR>
GD::Image::line(x1,y1,x2,y2,colorIndex)</TT></B> The <TT>GD::Image::line(x1,y1,x2,y2,colorIndex)</TT>
method draws a line from <TT>(x1,y1)</TT> to <TT>(x2,y2)</TT> using the color specified
by <TT>colorIndex</TT>. You can also use the <TT>dashedLine()</TT> method to draw
a dashed or dotted line. To obtain greater control over the appearance of your dotted
line, you can also use the <TT>setStyle()</TT> method and specify the <TT>gdStyled</TT>
special color index value as your <TT>colorIndex </TT>for the <TT>line()</TT> method.
<B><TT><BR>
<BR>
GD::Image::rectangle(x1,y1,x2,y2,colorIndex)</TT></B> The <TT>GD::Image::rectangle(x1,y1,x2,y2,colorIndex)</TT>
method draws a rectangle using the color specified in <TT>colorIndex</TT>. <TT>(x1,y1)</TT>
refers to the upper-left corner of the rectangle, and <TT>(x2,y2)</TT> refers to
the lower-right corner. You can draw a filled rectangle using the <TT>filledRectangle()</TT>
method. <BR>
<BR>
<B><TT>GD::Image::polygon(polygon,colorIndex)</TT></B> The <TT>GD::Image::polygon(polygon,colorIndex)</TT>
method draws a polygon defined by a <TT>GD::Polygon</TT> object, which I describe
later in this chapter. The <TT>colorIndex</TT> specifies the color in which to draw
the polygon. You can also draw a filled polygon using the <TT>filledPolygon()</TT>
method. <B><TT><BR>
<BR>
GD::Image::arc(cx,cy,width,height,start,end,colorIndex)</TT></B> The <TT>GD::Image::arc(cx,cy,width,height,start,end,colorIndex)</TT>
method draws arcs or ellipses using the color specified in <TT>colorIndex</TT>. <TT>(cx,cy)</TT>
defines the center point, and <TT>width</TT> and <TT>height</TT> specify the width
and height of the ellipse. <TT>start</TT> and <TT>end</TT> specify the angles at
which to begin and end the arc. These values are specified in degrees between 0 and
360. A start of 0 and end of 360 with height equal to width would produce a full
circle. <B><TT><BR>
<BR>
GD::Image::fill(x,y,colorIndex)</TT></B> The <TT>GD::Image::fill(x,y,colorIndex)</TT>
method fills a region with the color specified by <TT>colorIndex</TT>. It starts
at location <TT>(x,y)</TT> and continues setting the color of adjacent pixels until
it reaches a pixel of a different color than the starting pixel. In addition to normal
RGB colors, you can also use the special color <TT>gdTiled</TT> to fill with a pattern.
<B><TT><BR>
<BR>
GD::Image::string(font,x,y,string,colorIndex)</TT></B> The <TT>GD::Image::string(font,x,y,string,colorIndex)</TT>
method enables you to draw text into your image using the specified <TT>font</TT>
and <TT>colorIndex</TT>. <TT>(x,y)</TT> defines the pixel location at which to draw
the string. The fonts from which you can choose are <TT>gdSmallFont</TT>, <TT>gdMediumBoldFont</TT>,
<TT>gdTinyFont</TT>, and <TT>gdLargeFont</TT>. <B><TT><BR>
<BR>
GD::Image::stringUp(font,x,y,string,colorIndex)</TT></B> The <TT>GD::Image::stringUp(font,x,y,string,colorIndex)</TT>
method is the same as <TT>string()</TT>, except that it draws the text rotated counterclockwise
at 90 degrees. <B><TT><BR>
<BR>
GD::Image::interlaced()</TT></B> The <TT>GD::Image::interlaced()</TT> method enables
you to set or query whether the image is interlaced. An interlaced image provides
a venetian-blinds effect on some viewers while the image is first being displayed.
Calling this method with no parameters returns <TT>1</TT> or <TT>0</TT>, depending
on whether the image is interlaced or not. Calling this method with a <TT>1</TT>
or <TT>0</TT> sets or removes the interlaced attribute of the image. <B><TT><BR>
<BR>
GD::Image::getBounds()</TT></B> The <TT>GD::Image::getBounds()</TT> method returns
the width and height of the image in a two-<BR>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -