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

' 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

// 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

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