SV: [thelist] DHTML/Javascript thumbnail crop creator

Sun Aug 31 07:54:19 CDT 2003

As I said earlier the scripts is only tested in Mozilla and IE6.

The script is now improved and handles positioning better and you there
is checks for image boundaries added.

The public interface for the class ImageBox is the following:
Constructor:
ImageBox(strImageId) ; don't use this constructor, use the static method
createBox() instead

Class methods:
static createBox(strImageId) : ImageBox ; creates a new box with the
given id 
static getBox(strImageId) : ImageBox ; gets an already created box with
the given id

Instance methods:
getX() : int ; returns the left of the drawn rectangle relative to the
left position of the image
getY() : int ; returns the top of the drawn rectangle relative to the
top position of the image
getWidth() : int ; returns the width of the drawn rectangle
getHeight() : int ; returns the height of the drawn rectangle
toggleCrop() : void ; clips the image according to the drawn rectangle
or shows the whole image
toString() : String ; returns a string representation of the object

Example usage:
With the following image tag in the document flow:
    <img id="image"
src="http://mozilla.org/frontpage/productShotFirebird.jpg"/>

And the following button to preview the cropping and alert the box data
    <input type="button" value="demo" onclick="demo()"/>

You use the ImageBox class like the following:
    window.onload = function() {
      ImageBox.createBox("image");
    }

    function demo() {
      var box = ImageBox.getBox("image");
	box.toggleCrop();
      alert(box);	
    }

/Marcus

<html>
  <head>
  <script>
    var moz = ((document.all)? false : true);
    var ie = ((document.all)? true : false);

    function ImageBox(imgId) {      
      var origX, origY;
      var imgPosition, imgDimension;
      var dragDiv, overLayer;
      var isCropped = false;

      function init() {
        var img = document.getElementById(imgId);        
        imgPosition = ElementUtil.getElementPosition(img);
        imgDimension = ElementUtil.getElementDimension(img);        

        // I put this div over the image to remove drag behaviour 
        // on image in mozilla.
        if(moz) {
          overLayer = document.createElement("div");
          document.body.appendChild(overLayer);
          overLayer.style.position = "absolute";
          overLayer.style.left = imgPosition.left;
          overLayer.style.top = imgPosition.top;
          overLayer.style.width = imgDimension.width;
          overLayer.style.height = imgDimension.height;
        }

        dragDiv = document.createElement("div");
        document.body.appendChild(dragDiv);                        
        dragDiv.style.visibility = "hidden";
        dragDiv.style.position = "absolute";
        dragDiv.style.border = "1px solid blue";
        dragDiv.style.width = "0px";
        dragDiv.style.height = "0px";
        dragDiv.style.zIndex = 3;
        dragDiv.style.left = "20px";
        dragDiv.style.top = "20px";
        dragDiv.style.overflow = "hidden";      

        if(ie) {
          // Removes default drag behaviour on image
          ElementUtil.addEventListener(img, "drag", function() {return
false;});
          // Adds my "drag" behaviour to the image
          ElementUtil.addEventListener(img, "mousedown", mouseDown);
        }
        if(moz) {
          ElementUtil.addEventListener(overLayer, "mousedown",
mouseDown);      
        }        
      }   

      function mouseDown(evt) {
        if(!evt) {
          evt = event;
        }
        dragDiv.style.visibility = "visible";
        dragDiv.style.left = evt.clientX;
        dragDiv.style.top = evt.clientY;
        dragDiv.style.width = "1px";
        dragDiv.style.height = "1px";
        origX = evt.clientX;
        origY = evt.clientY;
        ElementUtil.addEventListener(document, "mousemove", mouseMove);
        ElementUtil.addEventListener(document, "mouseup", mouseUp); 
        evt.cancelBubble = true;
        return false;     
      }

      function mouseMove(evt) {
        if(!evt) {
          evt = event;
        }                       
        if(evt.clientX < imgPosition.left) {
          dragDiv.style.left = imgPosition.left;
          dragDiv.style.width = origX - imgPosition.left;        
        }
        else if(evt.clientX > (imgPosition.left + imgDimension.width)) {

          dragDiv.style.left = origX;
          if(ie) {            
            dragDiv.style.width = imgDimension.width - (origX -
imgPosition.left);
          }
          else if(moz) {
            dragDiv.style.width = imgDimension.width - (origX -
imgPosition.left) - 2;
          }
        }
        else {
          var newWidth = evt.clientX - origX;
          var newLeft = -1;
          if(newWidth < 0) {
            if(evt.clientX > imgPosition.left) {
              newLeft = evt.clientX;
            }
            newWidth = origX - evt.clientX;
          }
          if(newLeft != -1) {
            dragDiv.style.left = newLeft;
          }
          dragDiv.style.width = newWidth;
        }        

        if(evt.clientY < imgPosition.top) {
          dragDiv.style.top = imgPosition.top;
          dragDiv.style.height = origY - imgPosition.top;        
        }
        else if(evt.clientY > (imgPosition.top + imgDimension.height)) {

          dragDiv.style.top = origY;
          if(ie) {
            dragDiv.style.height = imgDimension.height - (origY -
imgPosition.top);
          }
          else if(moz) {
            dragDiv.style.height = imgDimension.height - (origY -
imgPosition.top) - 2;
          }
        }
        else {
          var newHeight = evt.clientY - origY;
          var newTop = -1;
          if(newHeight < 0) {
            if(evt.clientY > imgPosition.top) {
              newTop = evt.clientY;
            }
            newHeight = origY - evt.clientY;
          }
          if(newTop != -1) {
            dragDiv.style.top = newTop;
          }
          dragDiv.style.height = newHeight;
        }
      }      

      function mouseUp(evt) {        
        ElementUtil.removeEventListener(document, "mousemove",
mouseMove);  
        ElementUtil.removeEventListener(document, "mouseup", mouseUp);
      } 

      init();

      this.getX = function() {
        return (parseInt(dragDiv.style.left) -
parseInt(imgPosition.left));
      }

      this.getY = function() {
        return (parseInt(dragDiv.style.top) -
parseInt(imgPosition.top));
      }

      this.getWidth = function() {
        return parseInt(dragDiv.style.width);
      }

      this.getHeight = function() {
        return parseInt(dragDiv.style.height);
      }    

      this.toggleCrop = function() {
        var img = document.getElementById(imgId);
        var str = "";
        if(isCropped) {
          str = "rect(auto auto auto auto)";
          isCropped = false;
        }
        else {
          var top = this.getY();
          var left = this.getX();
          var bottom = this.getY() + this.getHeight();
          var right = this.getX() + this.getWidth();
          if(moz) {
            bottom = bottom + 2;
            right = right + 2;
          }
          str = "rect(" + top + "px, " + 
          right + "px, " + 
          bottom + "px, " + left + "px)";  
          isCropped = true;
        }
        img.style.clip = str;
      }  

      this.toString = function() {
        var str = "Left: " + this.getX() + "px\n" +
        "Top: " + this.getY() + "px\n" +
        "Width: " + this.getWidth() + "px\n" + 
        "Height: " + this.getHeight() + "px";
        return str;     
      }
    }
    ImageBox.boxes = new Array();
    ImageBox.createBox = function(imgId) {
      ImageBox.boxes[imgId] = new ImageBox(imgId);
    }
    ImageBox.getBox = function(imgId) {
      return ImageBox.boxes[imgId];
    }

    var ElementUtil = new Object();
    ElementUtil.getElementPosition = function(elt){
      var position = new Object();    
      if(elt.style.position == "absolute") {
        position.left = parseInt(elt.style.left);
        position.top = parseInt(elt.style.top);
      }
      else {
        position.left = ElementUtil.calcPosition(elt, "Left");      
        position.top = ElementUtil.calcPosition(elt, "Top");      
      }  
      return position;
    }

    ElementUtil.calcPosition = function(elt, dir){
        var tmpElt = elt;
        var pos = parseInt(tmpElt["offset" + dir]);
        while(tmpElt.tagName != "BODY") {
            tmpElt = tmpElt.offsetParent;
            pos += parseInt(tmpElt["offset" + dir]);
        }
        return pos;
    }

    ElementUtil.getElementDimension = function(elt) {
      var dim = new Object();
      dim.width = elt.offsetWidth;
      dim.height = elt.offsetHeight;
      return dim;
    }    

    ElementUtil.addEventListener = function(o, type, handler) {
      if(ie) {
        o.attachEvent("on" + type, handler);
      }
      else if(moz) {
        o.addEventListener(type, handler, false);
      }
    }

    ElementUtil.removeEventListener = function(o, type, handler) {
      if(ie) {
        o.detachEvent("on" + type, handler);
      }
      else if(moz) {
        o.removeEventListener(type, handler, false);
      }
    }

    window.onload = function() {
      ImageBox.createBox("image");
      ImageBox.createBox("image3");
    }

    function demo() {
      var box = ImageBox.getBox("image");
	box.toggleCrop();
      alert(box);	
    }  
    </script>  
  </head>
  <body>
    <img style="position:absolute;left:700px;top:230px" 
      id="image"
src="http://mozilla.org/frontpage/productShotFirebird.jpg">
    <input type="button" value="show box data" onclick="demo();">
    <table>
      <tr>
        <td><img
src="http://mozilla.org/frontpage/productShotFirebird.jpg" 
                 id="image3"></td>
      </tr>
    </table>
  </body>
</html>