Javascript UI Cropper with Multiple Previews

Below is the code I wrote to use mutliple preview windows with Dave Spurr's Javascript Cropper UI.

You can find a demo here

Usage is as follows:

PLAIN TEXT
HTML:
  1. <script src="lib/prototype.js" type="text/javascript"></script>
  2. <script src="lib/scriptaculous.js?load=builder,dragdrop" type="text/javascript"></script>
  3. <script src="cropper.js" type="text/javascript"></script>
  4. <script src="cropper.multiplepreviews.js" type="text/javascript"></script>
  5. <script type="text/javascript" charset="utf-8">          // example with multiple previews of crop results         Event.observe(              window,              \'load\',              function() {                  new Cropper.ImgWithManyPreviews(                      \'testImage\',                     {                         ratioDim: { x: 80, y: 80 },                         displayOnInit: true,                          onEndCrop: onEndCrop,                         previewWraps: [{name: \'previewArea\', width: 80, height: 80}, {name: \'previewArea2\', width: 40, height: 40}, {name: \'previewArea3\', width: 22, height: 22}]                     }                  )              }          );

It is important that you include you include name, height, and width for each preview box. Also, to avoid distortion, each preview should have the same ratio.

PLAIN TEXT
JavaScript:
  1. /**  * Extend the Cropper.Img class to allow for presentation of a preview image of the resulting crop,  * the option for displayOnInit is always overridden to true when displaying a preview image  *   * @author Andy Stanberry andy at lijit dot com  * @version 0.1  * Usage:  *   @param obj Image element to attach to  *  @param obj Optional options:  *   - see Cropper.Img for base options  *         *       - previewWraps array  *          An array of HTML elements, as well as their height and width, to show previews in      */ Cropper.ImgWithManyPreviews = Class.create();
  2.  
  3. Object.extend( Object.extend( Cropper.ImgWithManyPreviews.prototype, Cropper.Img.prototype ), {
  4.  
  5. /**      * Implements the abstract method from Cropper.Img to initialize preview image settings.     * Will only attach a preview image if an array of images is passed in.     *      * @see Croper.Img.subInitialize    */   subInitialize: function() {     /**      * Whether or not we\'ve attached a preview image          * @var boolean          */         this.hasPreviews = false;     if( typeof(this.options.previewWraps) != \'undefined\') {             this.previewWrapArray = $( this.options.previewWraps );             // Store the preview images in an array for easy access while updating    this.previewImg = new Array();       this.hasPreviewImg = new Array();
  7. // Don\'t do anythign if nothing is passed in       if(this.previewWrapArray.length> 0){     this.hasPreviews = true;                 this.options.displayOnInit = true;    }
  9. for(i = 0; i <this.previewWrapArray.length; i++){         if( typeof(this.previewWrapArray[i].name) != \'undefined\' &&                     this.previewWrapArray[i].height> 0 &&           this.previewWrapArray[i].width> 0) {
  11. var previewWrap = $(this.previewWrapArray[i].name);                     this.hasPreviewImg[i] = true;           this.previewImg[i] = this.img.cloneNode( false );
  13. // hide extra space from the preview area           previewWrap.addClassName( \'imgCrop_previewWrap\' );
  15. previewWrap.setStyle(            {              width: this.previewWrapArray[i].width + \'px\',           height: this.previewWrapArray[i].height + \'px\'                 }                     );
  17. previewWrap.appendChild( this.previewImg[i] );     }          }   }    },
  19. /**      * Implements the abstract method from Cropper.Img to draw the preview image     *      * @see Croper.Img.subDrawArea      */     subDrawArea: function() {     if( this.hasPreviews ) {    this.previewWrapArray = $( this.options.previewWraps );    for(i = 0; i <this.previewWrapArray.length; i++){                             if(this.hasPreviewImg[i]){                     // get the ratio of the select area to the src image                var calcWidth = this.calcW();      var calcHeight = this.calcH();           // ratios for the dimensions of the preview image                     var dimRatio = {              x: this.imgW / calcWidth,                    y: this.imgH / calcHeight                      };                      //ratios for the positions within the preview           var posRatio = {                          x: calcWidth / this.previewWrapArray[i].width,                          y: calcHeight / this.previewWrapArray[i].height                 };
  21. // setting the positions in an obj before apply styles for rendering speed increase                     var calcPos = {       w: Math.ceil( this.previewWrapArray[i].width * dimRatio.x ) + \'px\',                   h: Math.ceil( this.previewWrapArray[i].height * dimRatio.y ) + \'px\',                         x: \'-\' + Math.ceil( this.areaCoords.x1 / posRatio.x )  + \'px\',       y: \'-\' + Math.ceil( this.areaCoords.y1 / posRatio.y ) + \'px\'                     }
  23. // resize and move the image in the preview area                var previewStyle   = this.previewImg[i].style;           previewStyle.width    = calcPos.w;           previewStyle.height   = calcPos.h;           previewStyle.left = calcPos.x;                     previewStyle.top    = calcPos.y;             }    }       }  }
  25. });