DEfusion.org.uk

Sorry, I cant see brackets in the previous message. Now I’m posting it without brackets:
If img tag is inserted in a table cell (tag td, tag img, tag td end), then the image disappears …

@Lubo

I’ve had reports before that the cropper doesn’t work within a table cell, but I’ve also had reports that adding the table-layout:fixed style to the table helps.

How do i save the image to a folder afther i crop the image how ?

Please see the FAQ’s for how to save images, this is not part of the cropper JS.

Work good with few modifications, but i think using Flash or Silverlight is a better idea for image cropping and manipulation.

Hello!

I ve implemented your script into my page / and everything works finde except that it is not working with chrome.

Maybe you can help:
http://tapestry.1045711.n5.nabble.com/Javascript-Image-Cropper-with-Chrome-td5713110.html

thx..
alex

if you know to save images from cropper you need to use PHP

function onEndCrop( coords, dimensions ) {
$( ‘x1’ ).value = coords.x1;
$( ‘y1’ ).value = coords.y1;
$( ‘x2’ ).value = coords.x2;
$( ‘y2’ ).value = coords.y2;
$( ‘width’ ).value = dimensions.width;
$( ‘height’ ).value = dimensions.height;
}

// example with a preview of crop results, must have minimumm dimensions
Event.observe(
window,
‘load’,
function() {
new Cropper.ImgWithPreview(
‘testImage’,
{
minWidth: 210,
minHeight: 296,
ratioDim: { x: 210, y: 296 },
displayOnInit: true,
onEndCrop: onEndCrop,
previewWrap: ‘previewArea’
}
)
}
);

< ?php

//You do not need to alter these functions
function resizeThumbnailImage($thumb_image_name, $image, $width, $height, $start_width, $start_height, $scale){
$newImageWidth = ceil($width * $scale);
$newImageHeight = ceil($height * $scale);
$newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
$source = imagecreatefromjpeg($image);
imagecopyresampled($newImage,$source,0,0,$start_width,$start_height,$newImageWidth,$newImageHeight,$width,$height);
imagejpeg($newImage,$thumb_image_name,90);
chmod($thumb_image_name, 0777);
return $thumb_image_name;
}

$large_photo_exists = "”;

$thumb_width = “210”;

$upload_path = ”./”;// The path to where the image will be saved
$large_image_name = “castle.jpg”; // New name of the large image
$thumb_image_name = “thumbnail_pic.jpg”; // New name of the thumbnail image
$large_image_location = $upload_path.$large_image_name;
$thumb_image_location = $upload_path.$thumb_image_name;
if (isset($_POST[“upload_thumbnail”]) && strlen($large_photo_exists)>0) {
//Get the new coordinates to crop the image.
$x1 = $_POST[“x1”];
$y1 = $_POST[“y1”];
$x2 = $_POST[“x2”];
$y2 = $_POST[“y2”];
$w = $_POST[“width”];
$h = $_POST[“height”];
//Scale the image to the thumb_width set above
$scale = $w/$w;
$cropped = resizeThumbnailImage($thumb_image_location, $large_image_location,$w,$h,$x1,$y1,$scale);
//Reload the page again to view the thumbnail
header(“location:”.$_SERVER[“PHP_SELF”]);
exit();
}
?>

of course you need also HTML FORM

Is it possible to keep the cropper tool to be constant value like 100*100?
It would be great help if someone say the solution.

Sathish:

Simply set the min & max options to the same value and you’ll get a fix size cropper.

Really nicely done! Have you ever thought about moving this to a GitHub project by chance?

Great work! Is it possible to limit the crop area to a certain region of the picture? I just want them to be able to crop from a 500×300 pixel rectangle from the center of the picture.

Is anyone else also have a problem in IE 9. The select box is never visible?

I am also having trouble with it working with IE9. Sometimes it works. Sometimes it does not. Seems to work great with all of the other browsers that I have tried. I just downloaded version 1.2.2 yesterday and the IE9 problem is still there.

Me using IE-8
jsCropperUI.1.2.2 downloaded
Giving the following error:
Line: 17
Char: 1
Error: ‘Class’ undefined
Code: 800A1391
Source: MS jScript runtime error

I’m having a problem successfully saving crop points from last selection.

User enters page—> Crops image—> Saves page, re-loads, cropper should stay in the same position. I’m not sure what the problem is, and I’ve been getting very interesting results.

Here is just the script in my JSP.

Event.observe(window, ‘load’, function() {
new Cropper.ImgWithPreview(‘cropImage’, {
previewWrap : ‘previewWrap’,
minWidth : 80,
minHeight : 80,
ratioDim : {
x : 1,
y : 1,
},
onEndCrop : onEndCrop,
onloadCoords : {
x1 : document.getElementById(“px1”).value,
y1 : document.getElementById(“py1”).value,
x2 : document.getElementById(“px2”).value,
y2 : document.getElementById(“py2”).value,
}
});
});

function onEndCrop(coords, dimensions) {
$(“x1”).value = coords.x1;
document.getElementById(“x2”).value = coords.x2;
document.getElementById(“y1”).value = coords.y1;
document.getElementById(“y2”).value = coords.y2;

$(‘width’).value = dimensions.width;
$(‘height’).value = dimensions.height;
}

I’m quite confused since it sometimes work, and sometimes just completely fails.

Is there something I could be missing? Or another function from cropper.js I could utilize?

Thanks,

– Jay

Hi, I’m trying to persuade the preview area div to display it’s content in a separate iframe. I thought about firing some simple code on the mouseover event of the ‘testWrap’ div to transfer the background image(?) of the preview div to the target div in the separate iframe but with no luck.

Am I taking the right approach?
Any help appreciated.

Hey There. I discovered your blog the usage of MSN. That is
a very neatly written article. I’ll make sure to bookmark it and return to learn more of your useful info. Thank you for the post. I’ll certainly comeback.