DEfusion.org.uk

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.

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

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]

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

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~

thank you.

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

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)

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

Any pointers to the alternative lib?

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

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.

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]

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~

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!

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?

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

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 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.

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.