DekGenius.com
[ Team LiB ] Previous Section Next Section

Recipe 15.4 Loading an External Image (All Formats)

15.4.1 Problem

You want to load image formats such as BMP, GIF, PNG, or progressive JPEG files into your Flash movie.

15.4.2 Solution

Because MovieClip.loadMovie( ) supports only nonprogressive JPEG files, convert the image into the proper JPEG format before calling loadMovie( ).

15.4.3 Discussion

The Flash Player supports runtime loading of only nonprogressive JPEG images. If you want to load images of another format, you have two basic options:

  • Convert the image to JPEG format and save it to the server during authoring time.

  • Use a server-side script to convert the image from the original format to a JPEG on the fly.

This recipe provides several different scripts depending on the server platform you are using. ColdFusion, Perl, .NET, and PHP scripts are included.

The ColdFusion version of the script is Java-based, so it requires ColdFusion MX. Additionally, this script requires that the <cfcontent> tag is enabled on the server. Some server administrators disable this tag for security reasons. You can download the necessary files, already compiled, from http://www.person13.com/ascb/.

Alternatively, if you want to write the code yourself, follow these steps:

  1. To compile the Java classes, you need the Java 2 Standard Development Kit (J2SDK), available from http://java.sun.com/j2se/downloads.html.

  2. Download and install the Java Advanced Imaging (JAI) API on your local computer. You need this so that you can compile the Java class. You can download the API from http://java.sun.com/products/java-media/jai/.

  3. Make sure to include the JAI JAR files in your system's classpath.

  4. Upload the jai_codec.jar and jai_core.jar files to the WEB-INF/lib/ directory on your ColdFusion server under the web root.

  5. Create a new Java document and save it as ImageConverter.java to your local computer.

  6. Add the following code to the ImageConverter.java document:

    package imaging;
    
    import java.net.*;
    import javax.media.jai.*;
    
    public class ImageConverter {
    
      private RenderedOp image = null;
    
      // This method accepts the location of the image to convert and the location
      // where to save the new image file locally.
      public void convertImage(String location, String fileSaveLocation) 
      throws Exception{
        URL url = new URL(location);
        image = JAI.create("url", url);
        JAI.create("fileStore", image, fileSaveLocation, "JPEG", null);
      }
    }
  7. Once you have added the code to the file, save it and compile it into ImageConverter.class. Keep the .class file in the same directory as the source.

  8. Create a new directory named imaging within the WEB-INF/classes/ directory on your ColdFusion server under the web root.

  9. Upload ImageConverter.class to the imaging directory on the server.

  10. Create a new ColdFusion page and name it getMyImage.cfm.

  11. Add the following code to getMyImage.cfm:

    <cfobject type="java" name="ic" class="imaging.ImageConverter" action="create">
    <cflock type="exclusive" timeout="5">
      <cfscript>
        tempImage = "#ExpandPath('./')#" & "myCFImage.jpg";
        ic.convertImage(URL.url, tempImage);
      </cfscript>
    </cflock>
    <cfcontent deletefile="yes" file="#tempImage#" type="image/jpeg">
  12. Upload getMyImage.cfm to your ColdFusion web root.

  13. Refer to the testing instructions at the end of this recipe, following the alternative language implementations.

If your server uses Perl, then follow these steps.

  1. Make sure that the ImageMagick Perl module is installed. (This module is fairly common but not ubiquitous; ask your webmaster to install it if necessary.) ImageMagick is available from http://www.imagemagick.com.

  2. Create a new document named getMyImage.cgi. (Some servers use .pl in place of the .cgi extension. If you are unsure, contact your webmaster.)

  3. Add the following code to getMyImage.cgi:

    #!/usr/bin/perl
    
    use CGI;
    use HTTP::Request;
    use LWP::UserAgent;
    use Image::Magick;
    
    my $cgi = CGI->new(  );
    
    # Get the image from the URL.
    my $ua = LWP::UserAgent->new;
    my $request = HTTP::Request->new(GET => $cgi->param('url'));
    my $response = $ua->request($request);
    
    # Read the image into ImageMagick.
    my $image = Image::Magick->new(  );
    $image->BlobToImage($response->content);
    
    # Print the header and JPEG image to STDOUT.
    print $cgi->header(-type=>'image/jpeg');
    $image->Write('jpg:-');
  4. Save the document and upload it to your server in the directory for CGI scripts (usually cgi or cgi-bin).

  5. Make sure to correctly set the permissions on the file so that it can be executed (this applies to Unix servers only). The correct permissions value is 755. You can set the permissions from most FTP programs or use chmod.

  6. Refer to the testing instructions at the end of this recipe, following the alternative language implementations.

If you are using a server that supports ASP.NET, you can write an ASPX page that can convert images to JPEGs on the fly. The .NET framework includes all the classes necessary to accomplish this, and therefore you do not need to concern yourself with adding any additional assemblies. Follow these steps to create the ASP.NET script:

  1. Create a new ASPX document and name it getMyImage.aspx.

  2. Add the following code to the document:

    <!-- set the content type for the page to image/jpeg so that the 
         correct data format is returned -->
    <%@ Page Language="C#" ContentType="image/jpeg" %>
    
    <%
    // Get the image from the URL passed to this ASPX page.
    System.Net.HttpWebRequest webRequest =
            (System.Net.HttpWebRequest)System.Net.WebRequest.Create(
             (string)Request.QueryString["url"]);
    System.Net.HttpWebResponse webResponse = 
            (System.Net.HttpWebResponse)webRequest.GetResponse(  );
    System.IO.Stream inStream = webResponse.GetResponseStream(  );
    
    // Create an Image object using the stream obtained from the image URL.
    System.Drawing.Image img = System.Drawing.Image.FromStream(inStream);
    
    // Save the output the image in JPEG format to the output stream.
    img.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);
    %>
  3. Save the document and upload it to your server.

  4. Refer to the testing instructions at the end of this recipe, following the alternative language implementations.

If you want to use PHP to convert images on the fly, then you can use PHP's image functions. However, be aware that the image functions require you to have the GD library installed for PHP. Most web hosts that offer PHP have this library installed, but if not, ask for it to be installed. Complete the following steps to create a PHP script that converts JPEG, GIF, PNG, and BMP images to a JPEG format that Flash can read:

  1. Create a new PHP document and name it getMyImage.php.

  2. Add the following code to the document:

    <?php
    // The following line is needed only if gd wasn't compiled in. 
    if (!extension_loaded('php_gd.so')) exit; // Change to php_gd.dll on Windows.
    header('Content-type: image/jpeg');
    $imgname = $_GET['url']; 
    switch(substr($imagename, -3)) { 
      case 'jpg':
      case 'jpeg':
        $im = imagecreatefromjpeg($imgname);
        break; 
      case 'gif':
        // This option is only available in gd1 or in the bundled gd library.
        $im = imagecreatefromgif($imgname);
        break;
      case 'png':
        $im = imagecreatefrompng($imgname); 
        break;
      case 'bmp':
        $im = imagecreatefromwbmp($imgname);
        break;
    }
    imagejpeg($im, '', 100);
    ?>
  3. Save the document and upload it to your server.

  4. See the following testing instructions.

To test the script in your chosen language, run it from a web browser. Regardless of the language implementation, the script expects a parameter named url that specifies the location of the image to convert. Each implementation should display the image (as a JPEG) in the browser window.

For example, if the CFML script is being served at http://www.mydomain.com/getMyImage.cfm and the image that you want to convert is at http://www.mydomain.com/myImage.png, you can test the script in a browser using http://www.mydomain.com/getMyImage.cfm?url=http://www.mydomain.com/myImage.png.

Similarly, you can test the Perl script in a browser using the following URL syntax:

http://www.mydomain.com/cgi-bin/getMyImage.cgi?url=http://www.mydomain.com/myImage.png

You can test the ASP.NET script in a browser using:

http://www.mydomain.com/getMyImage.aspx?url=http://www.mydomain.com/myImage.png

You can test the PHP script in a browser using:

http://www.mydomain.com/getMyImage.php?url=http://www.mydomain.com/myImage.png

Regardless of which language implementation you choose, you use it in the same manner. Once you have one of the server-side scripts in place, you can call it from a Flash movie with MovieClip.loadMovie( ). For example, you can load a converted PNG into a movie with the following code:

myMovieClip.imageHolder.loadMovie(
 "http://www.mydomain.com/getMyImage.cfm?url=http://www.mydomain.com/myImage.png");

As an additional benefit, each of the conversion scripts also overcomes Flash's sandbox security restrictions. This means that you can load images of any format from any domain.

15.4.4 See Also

Recipe 15.3 and Recipe 15.6

    [ Team LiB ] Previous Section Next Section