SV: [thelist] DHTML/Javascript thumbnail crop creator

Sat Aug 30 21:37:47 CDT 2003

Hi Andy

I think this is what you are looking for. It's sparkling new (just for
you) but it isn't perfect, you can add some more behaviour to it (more
specifically in comments). This code comes as is (written at 4am in the
morning...;). The code seems to work in IE6 and Firebird 0.6. Haven't
tested it more than that

If you wonder over anything just ask... but you won't get an answer
until tomorrow because it's really, really bedtime for me :)

/Marcus

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

    function ImageBox(imgId) {      
      var origX, origY;

      // I put this div over the image to remove drag behaviour 
      // on image in mozilla.
      if(moz) {
        var overLayer = document.createElement("div");
        document.body.appendChild(overLayer);
        var point = getPosition(document.getElementById(imgId));
        var dim = getDimension(document.getElementById(imgId));      
        overLayer.style.position = "absolute";
        overLayer.style.left = point.left;
        overLayer.style.top = point.top;
        overLayer.style.width = dim.width;
        overLayer.style.height = dim.height;
        overLayer.style.border = "1px solid red";
      }

      var 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";      

      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;
        addEventListener(document, "mousemove", mouseMove);
        addEventListener(document, "mouseup", mouseUp); 
        evt.cancelBubble = true;
        return false;     
      }

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

      function mouseMove(evt) {
        if(!evt) {
          evt = event;
        }               
        var newWidth = evt.clientX - origX;
        var newHeight = evt.clientY - origY;
        // You can add lots and lots of checks and arithmetics here to
        // to add possibility to go to "negative" widths, height, tops
and lefts
        // and also see to it so you don't drag outside the image
        // I simply didn't have the energy
        dragDiv.style.width = newWidth;
        dragDiv.style.height = newHeight;
      }

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

      this.getX = function() {
        return (parseInt(dragDiv.style.left) - parseInt(point.left)) +
"px";
      }

      this.getY = function() {
        return (parseInt(dragDiv.style.top) - parseInt(point.top)) +
"px";
      }

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

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

    function getPosition(elt) {
      var point = new Object();      
      // You might have to do some more advanced tricks here like
      // looping through the offset parent until you get to the top
      // and add the positions as you go up
      point.left = elt.offsetLeft;
      point.top = elt.offsetTop;
      return point;
    }

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

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

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

    function showResult() {
      var str = "Left: " + box.getX() + "\n" +
      "Top: " + box.getY() + "\n" +
      "Width: " + box.getWidth() + "\n" + 
      "Height: " + box.getHeight();
      alert(str);
    }

    function init() {
      box = new ImageBox("image");
    }
    var box = null;

  </script>

  </head>
  <body onload="init();">
    <img style="position:absolute;left:200px;top:230px" id="image"
src="Exempel.jpg">
    <input type="button" value="show box data" onclick="showResult();">
  </body>
</html>