DEfusion.org.uk

I have just downloaded ther cropper and it is great. just wondered if there is any way to change the ratio of the selection box, after the cropper has been initiated? IE, i have a selection box with different ratios in, and i need it to change without a page reload.

Many Thanks.

hmm I am seeing that code was removed from my last post Sammy I had the same problem under IE 6 My solution does not use scriptocoluos.js I am inluding all scripts directly into page
src=”/mim/wspolne/.js/cropper/lib/prototype.js” defer=”defer”>
src=”/mim/wspolne/.js/cropper/lib/builder.js” defer=”defer”>
src=”/mim/wspolne/.js/cropper/lib/dragdrop.js” defer=”defer”>
src=”/mim/wspolne/.js/cropper/cropper.js” defer=”defer”>
src=”/mim/wspolne/.js/cropper/onEndCrop_function.js” defer=”defer”>
The order is important.
The last one file consist of my implementation of onEndCrop and code used for creating Cropper object. I hope it helps :)

Wow! This script is something! Thank you so much for seeing the effort.

... But I also have a small problem, as I’m not that much of a javaScript developer. All of the test HTML scripts work just fine, but when I include the script to my site, it works quite randomly. So of course I’m a bit confused ‘cos I’ve ran out of knowledge here. I’m building a feature that users can upload an image if they want and its resized on the server side. Later on they can crop the image (just as an extra feature) on their browser. So the image data is read from a database blob, user can define the crop area on their browser and then the co-ordinates are sent to server and voila! If I’ve understood correctly, that Event.observe(‘load’ ...) should take care that the page and the image is loaded before the script is run. But I think 4 times out of five I’ll get 2 errors. a) Draggable is not defined (line19/cropper.js) and new Cropper.Img has no properties (on the HTML page). So it seems to me that the script is run before the image is loaded. Can someone give me a gentle push towards how to solve this problem? Like I wrote, I’m bit confused since sometimes the script works and sometimes it doesn’t… Tried all of the trick I know, but of course that is not a lot :)

But keep up the good work! This script is really something!!

hi
I have found the solution. I am including all needed .js files directly, without using scriptaculous.js.

and I am moving onEndDrop function from .html file to other .js file which is included to HTML file

that’s solved problem with using tools at IE 6.

Hi all
I have problem with IE 6. I can’t load the page. The problem is with scriptoculous.js file. This script writes to the output only libraries given as script params and ended. :/ There is no following page code. When I am removing this file from code, all page is loaded. Under firefox 1.5 there is no problem Thanks for any help

I like your updates! They are very useful. Thanks.

i would like to use the selected image on a new image in order to zoom the selected image some ideas pls
to use in a state map
how to use the selected image as a new image
and how to avoid the darkening of the image is there an option fej same color and a rectangle with border to select
thanks

AMAZİNG!!!!

It doesn’t seem to work with Scriptaculous 1.6.5. Can anyone confirm?

pls improve:
add the function of zoom in/out,
input data directly to textfield

这几天一直在做这个，终于可以实际应用了：

http://www2.zhuatu.com/crop/index.asp?testImage=2.jpg

只是还有几个问题，一直无法解决：

1、图片放大缩小后，那个透明层没有随之放大缩小。找不到解药。
2、图片下那几个文本框，无法直接填数字。怎样改成直接填数字也可以？
3、裁减后为什么只能另存为bmp？我想另存为jpg。

good job !
thanks !

http://www2.zhuatu.com/crop/1.htm

test2 error
help me

两个测试，试一下，可以发现，测试一没问题。因为图片不大。

但，测试二，问题来了。大图片，我虽然按比例缩小显示了，但裁减的时候，其实还是在原大小上裁减。所以造成定位不准。

我呼唤高手，怎样做到，让大图缩小显示，裁减的位置也是在缩小的图上进行的。

Event.observe( window, ‘load’, function() {.......

show white overlay on some Internet Explorer 6, even after updating windows,

any suggestion

For the problem in post 223(“2. When displaying an initial crop area on the image (onload), the arrow keys do not work. We first have to move the area a bit to make the arrows work.”) additionally: – if the ratio is set and the image is in the initial state, if the side of the image is dragged to the right, or up, the selection box jumps out of the image. If the image is moved a little then there are no problems. This seems to be some initialization problem, so isn’t there a way to set the fields of the image crop after the instantiation to simulate an image move without explicitely having to move the image by hand?

Thanks!

Hi,

Can I save the cropped image using code ????

I implemented the cropper but found a few problems :

1. After using the arrows to move the crop area, the callback function OnEndCrop is not called. How to display the coordinates after each move with the arrows ?

2. When displaying an initial crop area on the image (onload), the arrow keys do not work. We first have to move the area a bit to make the arrows work.

Dave

For a given image I have used
//zoomWidth: Final image width after applying zoom(in/out)
//zoomHeight: Final image height after applying zoom(in/out)
//x1,y1, cropWidth and cropHeight are same as x1, y1 , w & h in above example

image = ScaleToFixedSize(image, zoomWidth, zoomHeight);
image = Crop(image, x1,y1,cropWidth,cropHeight);

private Image ScaleToFixedSize(Image imgPhoto, int Width, int Height)

{
int sourceWidth = imgPhoto.Width;
int sourceHeight = imgPhoto.Height;
int sourceX = 0;
int sourceY = 0;
int destX = 0;
int destY = 0;

float nPercent = 0;
float nPercentW = 0;
float nPercentH = 0;

nPercentW = ((float)Width / (float)sourceWidth);
nPercentH = ((float)Height / (float)sourceHeight);

//if we have to pad the height pad both the top and the bottom
//with the difference between the scaled height and the desired height
if (nPercentH

I’m testing the component but I have a problem.
The image is displayed in an IFRAME. I added the code to the page that is displayed in the IFRAME. But nothing happends when I click on the image.

What’s wrong ?