DEfusion.org.uk

Hi… is there a way to Remove Cropper? I found it on example-DynamicImage.htm, but I don’t want to use CropImageManager. I just do this to get cropper:

Event.observe(
‘id_img’,
‘click’,
function(){

new Cropper.Img(
‘id_img’,
{ minWidth: 10,
minHeight: 10,
onEndCrop: onEndCrop
});
});

So, when I click on imagem with id=’id_img’, Cropper is attched. How can I remove it?

Regards.

Hi Dave, it is a great work, congratulations. But i have some questions.

How i could get the cropper image and make a new image for upload it.

Because for example i need use it for the user can upload his picture and crop his face, like gmail do it when in configuration you upload a picture and you can crop you picture for get you face and it image is show it.

I hope that you could understand my bad english.

Thanks a lot for you work.

Great script! I have one question. I’m using the preview example. Is there a way to change the previewWrap div after the page is loaded, as to move the position of the preview image? I’ve tried to access previewWrap and change it’s value, but either it’s only used when the Cropper object is created or, more likely, my knowledge of OOP is less than stellar.

Thanks,
Mike

Hi

The text says the script would work with IE6 – I tried the demo page (http://www.defusion.org.uk/demos/060519/cropper.php), but the image turns completely black and the crop rectangle is just white … this is useless as you cannot see what you are cropping oO
Help? ;

Bye, GhostGambler

Using IE6 here I’m also getting black images with a white box where the cropper should be, works fine in FF and IE7 though. I’m guessing this is a transpanrency issue with IE6?

Any solutions?

Well, I’ve been struggling with bug/issue 027 – The cropper doesn’t work
correctly in a table cell in IE7. It seems to come down to a timing issue,
since it occasionally works, but most of the time the image fails to appear
under the cropping divs.

Has anyone found a fix or work-around for this? It’s pretty much a show-stopper
for me.

Thanks!

Hey Chris

I maybe had the same issue (trying to find the reason of the one I ran into), and maybe found a bugfix for yours: (I hope I can post the code here oO?)
instead of

try

this worked for me~

In IE7 cropper appears WHITE with Images NOT LOADING under the divs! Eeeeeeek!!

It however DOES WORK upon F5 (refresh) ... very strange ‘eh?

Anyone gots a work around for these?

PS: GhostG – Can you please elaborate on your solution, as it doesn’t make sense to me… Doesn’t the code execute onload anyway (example):

[lang]
Event.observe(
window,
‘load’,
function() {
new Cropper.ImgWithPreview(
‘cropImage’,
{ }
)
}
);[/lang]

I’ve got a couple of relatively simple test cases:
http://www.firecoral.com/local.html
and
http://www.firecoral.com/remote.html

The only difference in them is that local.html pulls it’s cropper.js from the
local machine while remote.html pulls all it’s files from this site (defusion.org.uk).

Try reloading each of them a few times in IE7.

Here’s what I see.

The first time I load local.html, it kind of works (I’m guessing because
the image is not cached). The second and other time, there’s no
sign of the image in the (top) table version. local.html remains broken
after that.

When I load remote.html, it usually appears to work through reloads although
the top image has some solid black bars above and below the crop box.

What’s the difference? Only one line – where cropper.js is served from.
All of this leads me believe that it’s some subtle timing issue. The idea
of using window.onload() would hint at this (although my application does
load dynamically and that doesn’t fix it).

Thanks much for the ideas though.

Hi
@Mike
Yes, your solutions seems similar to mine.
This was a fix in case someone did not use onload or observer, but just wrote a script-tag under the image and loaded the cropper there~ because that resulted in problems.
@Chris
I encounter the same problem on both pages, local and remote – no difference.

The problem seems to be a “fix” for IE – If you “remove” the fix, the image is displayed properly – but you can’t crop :D
Had not had enough time yet to play around with it a lot – just poked the code a little bit yesterday evening~
If I find something useful I’ll report it here, if I don’t, I’ve switched to another lib :P

Thanks Ghost. I played with the IE adjustments but still couldn’t get the
results you mentioned.

Any pointers to the alternative lib?

Sure, but those do not use prototype~
http://www.dhtmlgoodies.com/index.html?whichScript=image-crop
http://www.ajaxprogrammer.com/?p=9
(and I don’t know about the licenses)

cropper.css

replace this one with background-image and a transparent gif dotted with black pixels (I use this one http://ghostgambler.mangacarta.de/cropper/transBlack.gif)

replace this one with a totally transparent gif (sth. like that http://ghostgambler.mangacarta.de/cropper/trans.gif)

This is slow in IE6, but it works shrug

thank you.

hm…
IE7 and FF use the images too, which slows the cropper down in those two browsers as well.

Little change:
Leave original CSS as is and add to the bottom of the file (or after the already mentioned blocks):

The holy star attack limits the extra CSS to IE6 and lesser versions~

Well… it seems to be necessary to add an !important to both options, otherwise it won’t work~

I hacked together this .NET script that will generate the cropped image as a file. The code currently generates “small” and “thumbnail” files. You can edit the paths and parameters as needed. Be sure to enable write permissions for the output folder on your server.

[lang]

private void Page_Load(object sender, System.EventArgs e) {
GenerateThumbNailImagesForFolder(“Images”);
}

public void GenerateThumbNailImagesForFolder(string FolderName) {
string sPhysicalPath=””;
string sFileName=RequestObject(“image”);
string sThumbName = sFileName.Replace(”.”, ”_t.”);
string sSmallName = sFileName.Replace(”.”, ”_c.”);
sPhysicalPath = Server.MapPath(FolderName);

try {
this.GenerateThumbNail(100,80,sPhysicalPath,sFileName,sThumbName,ImageFormat.Jpeg);
this.GenerateThumbNail(40,50,sPhysicalPath,sFileName,sSmallName,ImageFormat.Jpeg);

}
catch (Exception) { }
}

public void GenerateThumbNail(int maxHeight, int maxWidth, string sPhysicalPath,string sOrgFileName,string sThumbNailFileName,ImageFormat oFormat) {
try {
System.Drawing.Image oImg = System.Drawing.Image.FromFile(sPhysicalPath + @”\” + sOrgFileName);
string dispRatio = “”;
int x1=Convert.ToInt16(RequestObject(“x1”));
int y1=Convert.ToInt16(RequestObject(“y1”));
int w1=Convert.ToInt16(RequestObject(“width”));
int h1=Convert.ToInt16(RequestObject(“height”));
int w2 = w1;
int h2 = h1;
long myRatio = (oImg.Height/maxHeight);
int newWidth = Convert.ToInt32((oImg.Width / myRatio));
if(w1>maxWidth) {
long myRatioW = (oImg.Width/newWidth);
dispRatio=Convert.ToString(myRatioW);
h2 = Convert.ToInt16((oImg.Height / myRatioW));
w2 = newWidth;

}
System.Drawing.Image oThumbNail = new Bitmap(w2, h2, oImg.PixelFormat);
Graphics oGraphic = Graphics.FromImage(oThumbNail);
oGraphic.CompositingQuality = CompositingQuality.HighQuality ;
oGraphic.SmoothingMode = SmoothingMode.HighQuality ;
oGraphic.InterpolationMode = InterpolationMode.HighQualityBicubic ;
oGraphic.DrawImage(oImg, new Rectangle(0, 0, w2, h2), x1, y1, w1, h1, GraphicsUnit.Pixel);
Response.Write(“”);
//Response.Write(“w: “w1” h:”h1” w2:”w2” h2:”h2” x:”x1” y:”y1” r:” +Convert.ToString(dispRatio));

oThumbNail.Save(sPhysicalPath + @”\” + sThumbNailFileName,oFormat);
oImg.Dispose();
}
catch (Exception ex) {
Response.Write(ex.Message);Response.Write(“Error writing file: ” + sPhysicalPath + @”\” + sThumbNailFileName+””);
}
}

public string RequestObject(string sName) {
string sRet=””;
try { sRet = Request[sName].ToString().Trim(); }
catch (Exception) { sRet = “”;}
return sRet;
}

[/lang]

How to copy or save the preview exactly as a square? I’ve tryed, but the image is the same as the original.

MAN you are crazy. This thing is 200 KB big! I am not willing to add 200kb to a page that is supposed to be no more than 50 KB. You need to make this shit smaller.

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.

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

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

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.

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

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.

codes are be disable !

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.

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.

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.

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

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?

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.

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.

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.

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

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.

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?

Thanks Dave for your quick response!
So far I have managed to update the textboxes whilst resizing by adding to onDrag (had to use 1.5.0 final of prototype), now for when you move the selection around. I’m slightly unsure where this function is?
Also if I wanted to type values in the textboxes and have them displayed would I use setAreaCoords?

Thanks for your time!

I really like this but i’m not sure if this can be done or not. Is it possible to save the preview picture as a image in a directory?? any help would be great.

Hello,
Just wanted to say awesome tool! It does exactly what I need it to do. But I am having an issue. IM on IE 6 and what IM doing is IM grabbing the coordinates using your tool and putting it into a form on the same page. I then submit the form via post and using PHP I store the information in a database. The problem is when the page refreshes the image is blank. I have to hit refresh for it to show up again. If I go to IE options and choose look for a new version on every visit instead of automatically then it works just fine. Any suggestions?

Hi,
i have a question about a cropper.
It is possible to use dinamic image change and image preview function?
If ‘YES’ can U tell me how i can do this?
Raker

Does anyone have a javascript code to save a cropped image?

It was discussed many times, what Javascript can’t handle or process images, only server side script like PHP, asp or any other. Look for more details or tutorials in search englines.

How do i pas the crop parameters to PHP?
I’m looking at using phpthumb and your javascript Cropper UI to send crop parameters to phpthumb.
Thankyou

If you want to transfer the cropping dates to PHP you can use the following way.

1. onevent read hidden form elements in which are the coords
2. calling ajax to transfer it to the server

Here is an example:
http://familientagebuch.de/rainer/2006/50.html#5

With this variant you cal also crop the image with imagemagick (convert)

Thanks. but that link is not in english language :S

hi Dave,

It does exactly what I need it to do, thank you very much
it is working perfectly fine, also easy to understand, i use it in my asp.net project.
thanks once again.