Image Processing

An example for image upload, resizing and saving.

// display form for uploading
this.imageUploadForm();

// get uploaded image - if any
var rawimage = req.get("rawimage");

if (req.get("uploadError")) {
 // looks like the file uploaded has exceeded uploadLimit ...
  res.write("<H2>File too big to handle!</H2>");

} else if (rawimage) {
  if (rawimage.contentLength == 0) {
    // looks like nothing was uploaded ...
    res.write("<H2>What was that?</H2>");

  } else {
    // looks fine, so set up parameter-object
    // maxWidth and maxHeight are optional ...
    var imgParams = new HopObject();
    imgParams.name = "testbild";
    imgParams.saveTo = "/usr/local/httpd/htdocs/test/";
    imgParams.maxWidth = 100;
    imgParams.maxHeight = 100;
    // save/resize the image
    var result = this.saveImg(rawimage,imgParams);
    // any errors?
    if (result.error) {
      // something went wrong during saving or resizing ...
      res.write("<H2>" + result.errorMsg + "</H2>");
    } else {
      // the image is on disk, so for now we just display the results
     for (var i in result)
    res.write(i + ": " + result[i] + "<BR>");
  }
 }
}

<FORM METHOD="POST" ACTION="<%= this.href("imageUpload") %>"
ENCTYPE="multipart/form-data">
<INPUT TYPE="FILE" NAME="rawimage">& <INPUT TYPE="SUBMIT" VALUE="save">
</FORM>

////////////////////////////////////////////////////////
// save image as file on local disk       //
// but before check if image should be resized    //
// input params:  - uploaded image        //
//      - parameter-object      //
// return param:  - parameter-object with add. props  //
////////////////////////////////////////////////////////

function saveImg(rawimage,imgParams) {
 if (rawimage && (!rawimage.contentType ||
rawimage.contentType.indexOf("image/") < 0)) {
  // whatever the user has uploaded, it was no image!
  imgParams.error = true;
  imgParams.errorMsg = "This was definetly no image!";
 } else {
  // determine filetype of image (one could do this also by checking the
mimetype)
  imgParams.type =
rawimage.name.substring(rawimage.name.lastIndexOf(".") + 1);
  var img = new Image(rawimage.getContent());
  // check if resizing is necessary
  if (imgParams.maxWidth && imgParams.maxHeight && img.width >
imgParams.maxWidth && img.height > imgParams.maxHeight) {
   var hfact = imgParams.maxWidth / img.width;
   var vfact = imgParams.maxHeight / img.height;
   imgParams.width = Math.round(img.width * (hfact < vfact ? hfact :
vfact));
   imgParams.height = Math.round(img.height * (hfact < vfact ? hfact :
vfact));
   var doResize = true;
  } else if (imgParams.maxWidth && img.width > imgParams.maxWidth) {
   var fact = imgParams.maxWidth / img.width;
   imgParams.width = imgParams.maxWidth;
   imgParams.height = Math.round(img.height * fact);
   var doResize = true;
  } else if (imgParams.maxHeight && img.height > imgParams.maxHeight) {
   var fact = imgParams.maxHeight / img.height;
   imgParams.height = imgParams.maxHeight;
   imgParams.width = Math.round(img.width * fact);
   var doResize = true;
  }
  if (doResize) {
   img.resize(imgParams.width,imgParams.height);
   if (rawimage.contentType == 'image/gif') {
    img.reduceColors(256);
   }
  }
  // finally we save the image
  img.saveAs(imgParams.saveTo + imgParams.name + "." + imgParams.type);
 }
 return (imgParams);
}

... comment

Page last modified on 2001-09-05 14:45 by hns