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 of the original image dimensions with white space around the resized logo. This animation can be displayed with a very simple JavaScript code. For another example with a more complex JS script displaying an animation composed of images that are of different sizes take a look at anim2.html. One other nice feature of this animation example -- the viewer can turn it off! 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 resized logo width = original image width * frame number / total number of frames frame length = original image length resized logo length = original image length * frame number / total number of frames call the Victor Library savejpg function to save the image into a jpeg image file each image file holds an image of the original image dimensions 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)
Declare Function zeroimage Lib "VIC32.DLL" (ByVal level As Long, image As imgdes) As Long


' The Function .................................................... 
Public Function makeuniformsizegrowingimages(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 stx as Long
Dim sty as Long
Dim endx as Long
Dim endy 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)
   rcode = zeroimage(255, desimg);    ' set background to white

   If (rcode = NO_ERROR) Then

      For j = 1 To frames

         wd = j * cols / frames      '  width of each image area
         ht = j * rows / frames      '  height of each image area

          ' center the image in the frame
         stx = (cols / 2) - (wd / 2)
         endx = stx + wd - 1

         sty = (rows / 2) - (ht / 2)
         endy = sty + ht - 1

         setimagearea desimg, stx, sty, endx, endy  '  resize into the area of interest
         rcode = resizeex(srcimg, desimg, 1)
         setimagearea desimg, 0, 0, cols - 1, rows - 1  ' reset area so we save entire image

         If (rcode = NO_ERROR) Then
            '  New name for each image saved
            fname = LCase$("uimage" & j & ".jpg")
            rcode = savejpg(fname, desimg, 50)
            If (rcode <> NO_ERROR) Then GoTo free
         End If
         
         Next j
free:

      freeimage desimg
   End If
   makeuniformsizegrowingimages = 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, all of the same dimensions. 
int makeuniformsizegrowingimages(int frames, imgdes *srcimg)
{
   int rcode = NO_ERROR;
   int cols, rows;
   int j;
   int wd, ht;
   int stx, sty, endx, endy;
   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) {
      rcode = zeroimage(255, &desimg);  // set background to white

      for(j = 1; j <= frames && rcode == NO_ERROR; j++) {

         wd = j * cols/frames;    // width of image area in each frame
         ht = j * rows/frames;    // height of image area in each frame

         // center the image in the frame
         stx = (cols / 2) - (wd / 2);
         endx = stx + wd - 1;

         sty = (rows / 2) - (ht / 2);
         endy = sty + ht - 1;

         setimagearea(&desimg, stx, sty, endx, endy);  // resize into the area of interest
         rcode = resizeex(srcimg, &desimg, 1 );
         setimagearea(&desimg, 0, 0, cols - 1, rows - 1);  // reset area so we save entire image
         if(rcode == NO_ERROR) {
            wsprintf(fname, "uimage%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