[Sommaire] [Imprimer]

   1  /**************************************************

   2   * imgedit.js

   3   * 2003-10-17

   4   * www.sonnd.com / www.supergarv.de

   5   *

   6   * COPYRIGHT (C) BY sonnd / Garvin Hicking

   7   * Published as GPL. Copyright notice has to stay in effect.

   8   **************************************************/
   9  
  10  // Gets a position of an element on a certain axis

  11  function imgedit_position(element, axis) {
  12      if (axis == 'x') {
  13          return (element.x) ? element.x : imgedit_subposition(element, 'Left');
  14      } else {
  15          return (element.y) ? element.y : imgedit_subposition(element, 'Top');
  16      }
  17  }
  18  
  19  // Calculate possible referenced subpositions to really get the absolute position.

  20  function imgedit_subposition(element, axis) {
  21      currentPos = 0;
  22      while (element != null) {
  23          currentPos += element['offset' + axis];
  24          element     = element.offsetParent;
  25      }
  26  
  27      return currentPos;
  28  }
  29  
  30  // Places the cropping area to a certain X/Y coordinate. Then clips the overlay picture correspondingly

  31  function imgedit_placeArea(new_x, new_y) {
  32      o_area.style.left    = new_x + 'px';
  33      o_area.style.top     = new_y + 'px';
  34      o_overlay.style.clip = "rect(" + (new_y+area_border) + " " + (new_x+inner_area_x) + " " + (new_y+inner_area_y) + " " + (new_x+area_border) + ")";
  35  }
  36  
  37  // Set correct restraints of the cropping area inside which it can move

  38  function imgedit_setMax(new_width, new_height) {
  39      o_area.maxX = imgedit_getMax('x', new_width, area_orientation);
  40      o_area.maxY = imgedit_getMax('y', new_height, area_orientation);
  41  }
  42  
  43  // Toggle the current area orientation to the opposite one

  44  function imgedit_areaOrientation() {
  45      if (area_orientation == 'h') {
  46          imgedit_toggleAreaOrientation('v');
  47      } else {
  48          imgedit_toggleAreaOrientation('h');
  49      }
  50  
  51      return false;
  52  }
  53  
  54  // Toggle the current area orientation

  55  function imgedit_toggleAreaOrientation(new_orientation) {
  56      if (new_orientation == area_orientation) {
  57          return;
  58      }
  59  
  60      // Display the corresponding cropping area and hide the other one.

  61      if (new_orientation == 'h') {
  62          area_orientation         = 'h';
  63          o_area                   = o_harea;
  64          area_x                   = harea_x;
  65          area_y                   = harea_y;
  66          inner_area_x             = inner_harea_x;
  67          inner_area_y             = inner_harea_y;
  68  
  69          o_varea.style.visibility = 'hidden';
  70          o_area.style.left        = o_varea.style.left;
  71          o_area.style.top         = o_varea.style.top;
  72          o_area.style.visibility  = 'visible';
  73      } else {
  74          area_orientation         = 'v';
  75          o_area                   = o_varea;
  76          area_x                   = varea_x;
  77          area_y                   = varea_y;
  78          inner_area_x             = inner_varea_x;
  79          inner_area_y             = inner_varea_y;
  80  
  81          o_harea.style.visibility = 'hidden';
  82          o_area.style.left        = o_harea.style.left;
  83          o_area.style.top         = o_harea.style.top;
  84          o_area.style.visibility  = 'visible';
  85      }
  86  
  87      // Set the new clipping inside the cropping area

  88      imgedit_setMax(o_backdrop.width, o_backdrop.height);
  89      o_overlay.style.clip = "rect(" + (parseInt(o_area.style.top)+area_border) + " " + (parseInt(o_area.style.left)+inner_area_x) + " " + (parseInt(o_area.style.top)+inner_area_y) + " " + (parseInt(o_area.style.left)+area_border) + ")";
  90  }
  91  
  92  // Zoom the image. Takes a given stepping (can be negative)

  93  function imgedit_zoom(step) {
  94      pos = parseInt(o_zoombutton.style.top);
  95      if (pos+step > slider_top && pos+step < slider_bottom) {
  96          imgedit_zoomTo(position(o_zoombutton, 'y') + step);
  97          o_zoombutton.style.top = pos + step + 'px';
  98      }
  99  
 100      return false;
 101  }
 102  
 103  // Automatically resize the window to fit cropping area

 104  function imgedit_autoSize(flip) {
 105  
 106      // First find the largest side

 107      if (real_x > real_y) {
 108          // The image is a horizontal one. Resize height to fit.

 109          fitmode = 'height';
 110      } else {
 111          // The image is a vertical one. Resize width to fit.

 112          fitmode = 'width';
 113      }
 114  
 115      // Check if the size should be flipped. If it is 'true' the image will completely fit inside the cropping area.

 116      // If it is 'false', it will only fit one side inside the cropping area

 117      if (flip == 'true') {
 118          if (fitmode == 'width') {
 119              fitmode = 'height';
 120          } else {
 121              fitmode = 'width';
 122          }
 123      }
 124  
 125      // Get new width/height of the image

 126      if (fitmode == 'width') {
 127          new_width  = inner_area_x - area_border;
 128          ratio      = new_width / real_x;
 129          new_height = real_y * ratio;
 130      } else {
 131          new_height = inner_area_y - area_border;
 132          ratio      = new_height / real_y;
 133          new_width  = real_x * ratio;
 134      }
 135  
 136      // Place cropping area to (0|0), because the image has been resized?

 137      imgedit_scaleIMG(new_width, new_height);
 138      imgedit_placeArea(-area_border, -area_border);
 139  
 140      // Place the slider to corresponding ratio.

 141      o_zoombutton.style.top = slider_bottom - parseInt(ratio/2 * (slider_middle/3)) + 'px';
 142  
 143      // Adjust some settings inside the HTML form.

 144      document.getElementById('scaletext').style.visibility = 'visible';
 145      document.getElementById('autoguess_clicked').value = 'true';
 146      new_ratio = ratio;
 147  
 148      return false;
 149  }
 150  
 151  // Get the maximum width/height for a certain axis the cropping area is allowed to move to

 152  function imgedit_getMax(axis, pixels, area_orientation) {
 153  
 154      // Which is the size we should get?

 155      if (area_orientation == 'h') {
 156          maxarea_x = harea_x;
 157          maxarea_y = harea_y
 158      } else if (area_orientation == 'v') {
 159          maxarea_x = varea_x;
 160          maxarea_y = varea_y
 161      } else {
 162          maxarea_x = area_x;
 163          maxarea_y = area_y
 164      }
 165  
 166      if (axis == 'x') {
 167          value = pixels - maxarea_x + area_border;
 168      } else {
 169          value = pixels - maxarea_y + area_border;
 170      }
 171  
 172      if (value < -area_border) {
 173          value = -area_border;
 174      }
 175  
 176      return value;
 177  }
 178  
 179  // Scales the background image to a certain size

 180  function imgedit_scaleIMG(new_width, new_height) {
 181      o_backdrop.width = new_width;
 182      o_backdrop.height = new_height;
 183  
 184      o_overlay.width = new_width;
 185      o_overlay.height = new_height;
 186  
 187      imgedit_setMax(new_width, new_height);
 188  
 189      return true;
 190  }
 191  
 192  // Zooms the image to a certain stepping

 193  function imgedit_zoomTo(y) {
 194      current = slider_bottom - y;
 195  
 196      temp_height = current - slider_middle;
 197      temp_ratio = temp_height / (slider_middle*3);
 198  
 199      if (current > slider_middle) {
 200          // make smaller than 100%

 201          new_ratio = 1 + (temp_ratio+temp_ratio);
 202      } else {
 203          // make larger than 100%

 204          new_ratio = 1 + (temp_ratio+temp_ratio);
 205      }
 206  
 207      new_width = parseInt(real_x * new_ratio);
 208      new_height = parseInt(real_y * new_ratio);
 209  
 210      imgedit_scaleIMG(new_width, new_height);
 211  
 212      return true;
 213  }
 214  
 215  // OnSubmit catch. Parses current JS values into the form

 216  function imgedit_getCoordinates() {
 217      document.getElementById('zoombox_x').value        = parseInt(o_area.style.left);
 218      document.getElementById('zoombox_y').value        = parseInt(o_area.style.top);
 219      document.getElementById('zoombox_factor').value   = new_ratio;
 220      document.getElementById('area_orientation').value = area_orientation;
 221  
 222      return true;
 223  }
 224  
 225  // Initializes everything

 226  function imgedit_init(zoombox_width, init_area_border, pad_left, pad_top, init_area_orientation) {
 227      // Store objects

 228      o_backdrop   = document.getElementById("backdrop");
 229      o_overlay    = document.getElementById("overlay");
 230      o_harea      = document.getElementById("harea");
 231      o_varea      = document.getElementById("varea");
 232      o_zoombutton = document.getElementById("zoombutton");
 233  
 234      // Object sizes

 235      full_x = parseInt(o_backdrop.width);
 236      full_y = parseInt(o_backdrop.height);
 237  
 238      real_x = document.getElementById('real_img_width').value;
 239      real_y = document.getElementById('real_img_height').value;
 240  
 241      area_border  = init_area_border;
 242  
 243      harea_x = parseInt(o_harea.width);
 244      harea_y = parseInt(o_harea.height);
 245  
 246      varea_x = parseInt(o_varea.width);
 247      varea_y = parseInt(o_varea.height);
 248  
 249      inner_harea_x = harea_x - area_border;
 250      inner_harea_y = harea_y - area_border;
 251  
 252      inner_varea_x = varea_x - area_border;
 253      inner_varea_y = varea_y - area_border;
 254  
 255      new_ratio = document.getElementById('zoombox_factor').value;
 256  
 257      slider_width = 10;
 258      slider_top = 0;
 259      slider_bottom = 95;
 260      slider_space = slider_bottom - slider_top;
 261      slider_middle = slider_space / 2;
 262      zoombox_left = -(o_zoombutton.width/2) + (slider_width/2);
 263  
 264      // Make objects dragabble

 265      DOMDrag.init(o_harea,      null, -area_border, imgedit_getMax('x', full_x, 'h'), -area_border, imgedit_getMax('y', full_y, 'h'));
 266      DOMDrag.init(o_varea,      null, -area_border, imgedit_getMax('x', full_x, 'v'), -area_border, imgedit_getMax('y', full_y, 'v'));
 267      DOMDrag.init(o_zoombutton, null, zoombox_left, zoombox_left, slider_top, slider_bottom);
 268  
 269      o_harea.onDrag = function (x, y) {
 270          o_overlay.style.clip = "rect(" + (y+area_border) + " " + (x+inner_harea_x) + " " + (y+inner_harea_y) + " " + (x+area_border) + ")";
 271      }
 272  
 273      o_varea.onDrag = function (x, y) {
 274          o_overlay.style.clip = "rect(" + (y+area_border) + " " + (x+inner_varea_x) + " " + (y+inner_varea_y) + " " + (x+area_border) + ")";
 275      }
 276  
 277      o_zoombutton.onDrag = function (x, y) {
 278          imgedit_zoomTo(y);
 279      }
 280  
 281      o_zoombutton.style.left       = zoombox_left + 'px';
 282  
 283      zf = document.getElementById('zoombox_factor').value;
 284      if (zf != 1) {
 285          o_zoombutton.style.top        = slider_bottom - parseInt(zf/2 * (slider_middle/3)) + 'px';
 286      } else {
 287          o_zoombutton.style.top        = slider_top + slider_middle + 'px';
 288      }
 289  
 290      o_zoombutton.style.visibility = 'visible';
 291  
 292      o_harea.style.cursor = 'move';
 293      o_harea.style.left   = pad_left + 'px';
 294      o_harea.style.top    = pad_top  + 'px';
 295  
 296      o_varea.style.cursor = 'move';
 297      o_varea.style.left   = pad_left + 'px';
 298      o_varea.style.top    = pad_top  + 'px';
 299  
 300      area_orientation     = '';
 301      imgedit_toggleAreaOrientation(init_area_orientation);
 302  }