Victor Image Processing Library How-to Tips

Create animation with JPEG images and JavaScript






















In this example we create a series of JPEG images that make the logo appear to be growing. The individual images are shown at left. Each image is just large enough to hold it's logo. This creates the most compact of image file sizes and leads to faster downloads. The JavaScript code is able to handle this difference in image sizes, but the JS code is larger because of that. For another example with a much simpler JS script displaying an animation composed of images that all are of the same dimension take a look at anim3.html.

The procedure is:

  • determine the dimensions of the source image and allocate a temporary image buffer of the same size.
  • for each frame to be in the animation:
    • use the Victor Library resizeex function to resize the original image into the temporary image buffer to create each of the smaller images.

      The number of frames in the animation determines the size of the smaller images.

      The size of each image is calculated:

               frame width  = original image width  * frame number / total number of frames
               frame length = original image length * frame number / total number of frames      
    • call the Victor Library savejpg function to save the small image into a jpeg image file
  • release the temporary image buffer

The JavaScript script preloads all the images and displays them as the animation with control over the delay time between display of the frames. The individual frames are contained in the image files displayed at left.


VB Source Code | C/C++ Source Code | JavaScript Source Code


Make growing images - the Visual Basic Source Code

Requires Victor Image Processing Library for 32-bit Windows v 5.3 or higher.
' Data Type Definitions ........................................... 
Type imgdes
   ibuff As Long
   stx As Long
   sty As Long
   endx As Long
   endy As Long
   buffwidth As Long
   palette As Long
   colors As Long
   imgtype As Long
   bmh As Long
   hBitmap As Long
End Type
' Function Declarations ........................................... 
Declare Function allocimage Lib "VIC32.DLL" (image As imgdes, ByVal wid As Long, ByVal leng As Long, ByVal bppixel As Long) As Long
Declare Sub freeimage Lib "VIC32.DLL" (image As imgdes)
Declare Function savejpg Lib "VIC32.DLL" (ByVal fname As String, srcimg As imgdes, ByVal quality As Long) As Long
Declare Sub setimagearea Lib "VIC32.DLL" (image As imgdes, ByVal stx As Long, ByVal sty As Long, ByVal endx As Long, ByVal endy As Long)
Declare Sub RtlMoveMemory Lib "kernel32" (ByVal des As Long, ByVal src As Long, ByVal cnt As Long)
Declare Sub CopyMemory Lib "kernel32" Alias "RtlMoveMemory" (des As Any, ByVal src As Long, ByVal cnt As Long)
' The Function .................................................... 
Public Function makegrowingimages(frames As Long, srcimg As imgdes)
Dim rcode As Long   ' NO_ERROR
Dim cols As Long
Dim rows As Long
Dim j As Long
Dim wd As Long
Dim ht As Long
Dim desimg As imgdes
Dim fname As String
Dim bmh As BITMAPINFOHEADER
   cols = srcimg.endx - srcimg.stx + 1
   rows = srcimg.endy - srcimg.sty + 1
   getbmhfromimage bmh, srcimg        ' Helper function, below
   rcode = allocimage(desimg, cols, rows, bmh.biBitCount)
   If (rcode = NO_ERROR) Then
      For j = 1 To frames
         wd = j * cols / frames      '  width of each frame
         ht = j * rows / frames      '  height of each frame
         setimagearea desimg, 0, 0, wd - 1, ht - 1  '  Use only as much area as the frame requires
         
         rcode = resizeex(srcimg, desimg, 1)
         If (rcode = NO_ERROR) Then
        '  New name for each image saved
            fname = LCase$("image" & j & ".jpg")
            rcode = savejpg(fname, desimg, 50)
            If (rcode <> NO_ERROR) Then GoTo free
         End If
         
         Next j
free:
      freeimage desimg
   End If
   makegrowingimages = rcode
End Function
' Helper Function ................................................. 
' Get BITMAPINFOHEADER from an image descriptor
Public Sub getbmhfromimage(newBmh As BITMAPINFOHEADER, image As imgdes)
    CopyMemory newBmh, image.bmh, 40   ' 40=size of BITMAPINFOHEADER
End Sub




Make growing images - the C Source Code

Requires Victor Image Processing Library for 32-bit Windows v 5.3 or higher.
// Use src image to make a set of emerging images. 
int makegrowingimages(int frames, imgdes *srcimg)
{
   int rcode = NO_ERROR;
   int cols, rows;
   int j;
   int wd, ht;
   char fname[80];
   imgdes desimg;
   cols = srcimg->endx - srcimg->stx + 1;
   rows = srcimg->endy - srcimg->sty + 1;
   rcode = allocimage(&desimg, cols, rows, srcimg->bmh->biBitCount);
   if(rcode == NO_ERROR) {
      for(j = 1; j <= frames && rcode == NO_ERROR; j++) {
         wd = j * cols/frames;    // width of each frame
         ht = j * rows/frames;    // height of each frame
         setimagearea(&desimg, 0, 0, wd-1, ht-1);  // Use only as much area as the frame requires
         rcode = resizeex(srcimg, &desimg, 1 );
         if(rcode == NO_ERROR) {
            wsprintf(fname, "image%d.jpg", j);
            rcode = savejpg(fname, &desimg, 50);
            }
         }
      freeimage(&desimg);
      }
   return (rcode);
}


Make growing images - the JavaScript Source Code

For the JavaScript source use the scripts from the head and body of this page, or download directly from http://javascript.about.com/library/scripts/blslideshow.htm


Victor Image Processing Library

Victor Image Processing Library homepage | Victor Product Summary | more source code




Copyright © 2002 Catenary Systems Inc. All rights reserved. Victor Image Processing Library is a trademark of Catenary Systems.