Category Archives: Usability

Hi,

i’m still with the images stuff

now i needed to integrate a crop image script using js. so i started to look for a premade solution. you can find several of them here, here and here. i was looking for a mootools based solution and i found 4. for my surprise,one didn’t exist anymore,  one of them didn’t worked with mootools 1.2, the others was too complicated and not flexible and none offer what i really needed, that was able to offer “mirrors” as preview of the crop in 2 different sizes. in my adventure, i tried to fix the first one (MooCrop) porting it to 1.2 but i leave it why it would take me too much work, then i tried to modify cwCrop but the code structure seems to be less flexible, and finally i decided to go with uvumiCrop, as it already have a mirror function and just need to be converted into a multi-div function.

so for those who want the mirror feature in the uvumiCrop script, here are the functions and code you need to replace:

Add this to the class var declaration

previewImageArray:new Array(),

On some place around line 102, paste this

this.previewImageArray = new Array();

replace with this from lines 285 to 354

if(this.options.preview){
 if(isArray(this.options.preview)){
 var previewImgObjArray=new Array();
 this.options.preview.each(function (item,index){
 var initWidth= $(item).getStyle('width');
 var initHeight= $(item).getStyle('height');
 //we put the preview in a wrapper div with a fixed height, because preview height and width may change.
 var previewWrapperObj = new Element('div',{
 styles:{
 height:initHeight
 }
 }).wraps($(item));

 //Setting the preview container
 $(item).setStyles({
 display:'block',
 position:'relative',
 width:initWidth,
 height:initHeight,
 overflow:'hidden',
 margin:'auto',
 fontSize:0,
 lineHeight:0,
 opacity:1,
 visibility: 'visible'
 });

 //cloning the original image for the preview
 var previewImageObJ = this.target.clone();
 previewImageObJ.set('id','imgObj_'+index);
 previewImageObJ.removeProperties('width','height').setStyle('position','absolute').inject($(item));
 previewImgObjArray.push(new Array('imgObj_'+index,item,initWidth,initHeight));
 }.bind(this));
 this.previewImageArray=previewImgObjArray;
 }else{
 if($(this.options.preview)){
 this.preview = $(this.options.preview);
 //we put the preview in a wrapper div with a fixed height, because preview height and width may change.
 this.previewWrapper = new Element('div',{
 styles:{
 height:this.previewSize.y+2*this.preview.getStyle('border-width').toInt()+this.preview.getStyle('margin-top').toInt()+this.preview.getStyle('margin-bottom').toInt()
 }
 }).wraps(this.preview);
 }else{
 var previewWrapper = new Element('div',{
 'class':'preview'
 }).inject(this.toolBox,'top');
 this.preview = new Element('div').inject(previewWrapper)
 }

 //Setting the preview container
 this.preview.setStyles({
 display:'block',
 position:'relative',
 width:this.previewSize.x,
 height:this.previewSize.y,
 overflow:'hidden',
 margin:'auto',
 fontSize:0,
 lineHeight:0,
 opacity:0
 });

 //cloning the original image for the preview
 this.previewImage = this.target.clone();
 this.previewImage.removeProperties('width','height').setStyle('position','absolute').inject(this.preview);
//            this.addEvent('onPreview',this.updatePreview.bind(this));
 }
 this.addEvent('onPreview',this.updatePreview.bind(this));
 }

replace updatePreview function with this code below:

//Function to update the preview
 updatePreview: function(top,left,width,height){
 if(this.previewImageArray.length>0){
 this.previewImageArray.each(function (item,index){
 if(height*item[2].toInt()/width<item[3]){
 $(item[1]).setStyles({
 width:item[2],
 height:(item[3].toInt()*height/width).toInt()
 });
 $(item[0]).setStyles({
 width:(this.target_coord.width*item[2].toInt()*this.scaleRatio/width).toInt(),
 height:'auto',
 top:-(top*item[2].toInt()/width).toInt(),
 left:-(left*item[2].toInt()/width).toInt()
 });
 }else{
 $(item[1]).setStyles({
 height:item[3],
 width:item[3]
 });
 $(item[0]).setStyles({
 height:(this.target_coord.height*item[3].toInt()*this.scaleRatio/height).toInt(),
 width:'auto',
 top:-(top*item[3].toInt()/height).toInt(),
 left:-(left*item[3].toInt()/height).toInt()
 });
 }
 }.bind(this));
 }else{
 if(height*this.previewSize.x/width<this.previewSize.y){
 this.preview.setStyles({
 width:this.previewSize.x,
 height:(this.previewSize.x*height/width).toInt()
 });
 this.previewImage.setStyles({
 width:(this.target_coord.width*this.previewSize.x*this.scaleRatio/width).toInt(),
 height:'auto',
 top:-(top*this.previewSize.x/width).toInt(),
 left:-(left*this.previewSize.x/width).toInt()
 });
 }else{
 this.preview.setStyles({
 height:this.previewSize.y,
 width:(this.previewSize.y*width/height).toInt()
 });
 this.previewImage.setStyles({
 height:(this.target_coord.height*this.previewSize.y*this.scaleRatio/height).toInt(),
 width:'auto',
 top:-(top*this.previewSize.y/height).toInt(),
 left:-(left*this.previewSize.y/height).toInt()
 });
 }
 }
 },

and the isArray() function used at the beginning of the code:

function isArray(obj) {
 return obj.constructor == Array;
}

so, now in the initialization of the uvumiCrop object, you set the preview property as a array ( new Array(‘id1′,’id2′) ) with the id’s of the divs that will be used as mirrors. is important that you set the width and height of each div before you create the uvumiCrop object. this code will maintain the original behavior of the original script, you can still have the floating mirror and the unique mirror.

is also important to mention that i changed the code so the container don’t get the width and height deformed and work as a container hiding the rest of the image. is done like this so the user can know really how it will look after the crop process.

i have sent this post to the developer, so maybe he include it on the next release

i hope you find this useful and save you some time

Regards,

Shadow.