DEfusion.org.uk

Hi there,
Nice work, however how come when the cropper.uncompressed.js file is used instead of cropper.js it doesn’t work?
I’m trying to update the textboxes whilst resizing and allow them to control the cropping?

Is it possible to save the cropped section without using gd or something similar ? :\ MediaTemple GS servers don’t allow you to install programs like that.

Oops, the prev comment was supposed to have a img src example that used a width of 350px.. that got stripped off..

scales the image to 350px. That causes the script to get the x,y coordinates wrong. Issue disappears if I remove width specification.

Has anyone figured out a simple solution/fix for this issue?

Thanks,
Vinay.

Hello Serdar,

/**

* Create an area to click & drag around on as the default browser behaviour is to let you drag the image
*/
.imgCrop_dragArea {
width: 100%;
height: 100%;
z-index: 200;
position: absolute;
top: 0;
left: 0;
overflow: scroll;
}

Setting overflow property is enough for your need.

Rightio, I’ve got it working; but it may seem like a bit of a hack for the way our site works. I’ve introduced three new options into the initialize.

overFlowEnabled: 0,
containerWidth:0,
containerHeight:0

Then i’ve changed setParams to enable/disable overflow on imgWrap based on the information given above.

if (this.options.overFlowEnabled) {
// resize the container to fit the containing div
$( this.imgWrap ).setStyle( {‘width’:this.options.containerWidth + ‘px’,’height’:this.options.containerHeight + ‘px’, ‘overflow’:’auto’ } );
// resize the dragArea to fit the image
$( this.dragArea ).setStyle( { ‘width’:this.imgW +’px’,’height’:this.imgH +’px’ } );
}else{
// resize the container to fit the image
$( this.imgWrap ).setStyle( { ‘width’: this.imgW + ‘px’, ‘height’: this.imgH + ‘px’ } );
}

hopefully that helps a few people, and seems to be x-browser.

Not sure if I’m missing something, but what do I do with the coordinates to show the croped image on another page? Do I use PHP to crop the image? Does the javascript do it on the page?

Hi Dave,

is there a way to stop the crop beyond a maximum amount on the x and y? so we can have the crop set to a set amount and not allow the user to change the size

Hello;
I have been using the codes you have written, in one of my projects. However I do have a problem that I believe you may provide an easy solution.
I use the code in Asp.net. I need to enlarge a picture in webform while in a panel. Due to the limits of the panel, the image is shown only at the size of the panel and the scroll bars are shown on the panel to see the other part of the image. Although in design view, the image is shown in the panel correctly, when aspx page is run, the image over sizes and goes out of the boundaries of the panel.

Is there any way to correct this problem?

Thank you.

Heres the full fix,

// resize the container to fit the image
$( this.imgWrap ).setStyle( { ‘overflow’:’auto’ } );

// resize the container to fit the image
$( this.dragArea ).setStyle( { ‘width’:this.imgW +’px’,’height’:this.imgH +’px’ } );

Got a few issues still. but its a fix for what I need.

Hey Dave,

Tried that and I couldn’t get it working, although I do think it is possible that way. One other method I have succeeded with is changing the JS file to use

// resize the container to fit the image
$( this.imgWrap ).setStyle( { ‘overflow’:’auto’ } );

Rather than implicitly setting the height and width of imgWrap.

It works the location out correctly but the grey overlay doesn’t correctly work, which seems like an easy fix. If I persue this method I will post up the code.

Thanks for the help.

codes are be disable !

yeap thanks for this nice script. Maybe you can help me for this posting. How can i do cropping image save as. Sorry IM use asp and this code.

thanks for thy answer.

Hello,

This is certainly a wonderful script. I have a question, what would I need to do to have the x1,y1,x2,y2 callbacks updated dynamically as the drag/resize is actually being done rather than at the end of the crop action? I have seen drag scripts where the coords are updated during the drag/resize itself. Any help would be appreciated.

Pat

Brilliant tool, but has anyone got a workaround/fix for the scrolling issue in IExplorer. I’ve created a Div with the following style, {width: 924px; height: 487px; overflow: auto;padding: 0; margin: 0; float: left; } the image to crop sits inside this div. As mentioned in your issues bit, it breaks out in IE but is perfect in FF. Its driving me mad, if it can’t be done it can’t be done. But i’d love to get this working.

very excellent.
Do you provide this in Asp.net? thanks

Sir,
on basis of the co -ordinates the image get marked when it is focused on the text box.
But what i can not achieve is when the focus goes to the next box i could not reset the cropping and another layer comes on the top of the existing one.
plz help.

Regards
Debasis

Wow… atleast in FF2/Win everything runs super-smoothly. Before I start reading 300+ comments, is there already a PHP script known somewhere I could use for saving the cropped area?
Thanks a lot – nice work.