tapmodo / jcrop Goto Github PK
View Code? Open in Web Editor NEWJcrop - The Javascript Image Cropping Engine
Home Page: https://jcrop.com
License: Other
Jcrop - The Javascript Image Cropping Engine
Home Page: https://jcrop.com
License: Other
Hi
I've noticed that when running the newest version of Jcrop and jQuery 1.6.1 in IE 7/8 the image doesn't show. It does work in IE 9 and Chrome.
Any ideas?
Thanks
Jon
I'm using Jcrop with a gallery plugin called gallery view. When an image is displayed in gallery it gets top or left attribute depending on aspect ratio to look center. When loading jcrop for that image jcrop-tracker element position it self badly ( minus top or left position eg: image: 17 top => jcrop-tracker will not have 17 top).
It's an issue or i missed something ?
Thank you,
The details can be found here. A video illustration is also included.
http://stackoverflow.com/questions/9510568/jcrop-preview-contains-strange-error
Note that i am not the author of the post, I just have same issue.
Changing the aspect ratio right now forces a selection of 0,0,0,0 to appear even if nothing was previously selected.
When something was previously selected, it changes the selection, but doesn't center the result over the previous area as expected.
Please support for a double-click/tap event handler on the cropped area (not the rest of the image) which could then be hooked into to execute the crop/etc.
I've tried using destroy() for non-image elements, and it doesn't work. It simply removes the whole element out of dom - not what it's expected to do.
I grasped into a code for a bit, and it turned out that the problem happens on line 321:
320 } else {
321 $img = $origimg.css(img_css).show();
322 img_mode = false;
323 if (options.shade === null) { options.shade = true; }
324 }
the $img doesn't contain a cloned copy of origimg, so the following code:
332 $div = $('<div />').width(boundx).height(boundy).addClass(cssClass('holder')).css({
333 position: 'relative',
334 backgroundColor: options.bgColor
335 }).insertAfter($origimg).append($img);
just moves the original element into a new position.
For some reason cloning the element doesn't work for me, so i did a small workaroung. I thing it doesn't worth
to be pulled into the repo as it doesn't fix the root of the problem, but people might find it useful
Thanks for your work,
Andrey
Hey there, I have no idea of what you want to add to the new version, but you should really publish a new one as fast as possible. the current 0.9.8 release is doing crazy shit in ie7. it tries to load strange urls. something like http://localhost/foo/barfunction(){ return ... }. Using the handlers also requests more of such urls. Using the latest HEAD is working nicely
I've been trying to use keypress event for Enter, but I couldn't do it because, apparently, Jcrop uses keypress event itself. Is there a way to have a callback for "Enter", which usually indicates that a crop is complete?
When I use Jrop, a radio button is add on the left of my image
I've dig a little and find out that it's because of KeyManager. In fact, it create a radio input which seem useful for moving the crop selection with the keyboard.
To hide it, I've change this:
position: 'fixed',
left: '-12000px',
width: '12px'
}),
by this :
position: 'fixed',
left: '-12000px',
width: '12px'
}),
Since I don't really understand why this input is here, I don't know if this fix is a good one.
Hope somebody will enlighten me about it and fix this properly.
Hi!
I have a crop selection like this:
http://deepliquid.com/projects/Jcrop/demos.php?demo=handler
What must I do to crop my image with X1 Y1 X2 Y2 W H informations?
I'm using Symfony2 framework.
Many Thanks!
I feel your problem is hands down the best open-source tool available for image cropping however its missing one CRITICAL functions which everyone keeps talking about but no one is able to provide a solution for mainly the ability to zoom in/out and move the image around.
There is only one true solution I am aware of which I am sure you must have heard of located on the site "http://kroppr.rborn.info/". If you review their tool you can see how you are able to zoom in/out of an image as well as being able to move the background image around till it matches the area you want to crop.
Would you be able to provide instructions on how we could accomplish the same functionality with jcrop? I feel instantly jcrop would become the standard if this were integrated.
Less important in my opinion but also useful would be the capability of rotating the image like kropper tool.
Any help or advice would be greatly appreciated for this!
i get these errors:
in chrome
Uncaught SyntaxError: Invalid regular expression: /(^|.)jcrop(.|$)/: Stack overflow
in safari:
jquery.js:1751 RangeError: Maximum call stack size exceeded.
i just updated to 0.9.12 jcrop and 1.9.1 jquery
does anyone know what could be wrong or what to check. thank you.
I keep getting the error above with the latest version of jQuery. I moved back to the older gem and everything started to work again. It must be the new version of jQuery. I read about it here AudithSoftworks/Uniform#272.
Hope it helps :)
I need to block users for clicking to the area, that is not in the crop. It sometimes confuses them, when they click to the black area and the crop disappears.
deepliquid.com is often down recently
it's not easy to acces documentation
maybe a readme on github can do the trick
anyway good plugin
While using the setSelect method of the Jcrop object I'm finding that sometimes it reloads the selection in a totally wrong area of the image. For example if I have 100x100 pixel image with a selection of { x: 10, y:10, x2: 30, y2: 30} when I reload I might get a much smaller selected area in a completely different part of the image. Has anyone run into this and/or have ideas on a fix? It's very intermittent and I can't seem to find a pattern for how to reproduce it. Here is the code we're using:
$(function() {
jcrop_options = {
aspectRatio: 1,
onSelect: function(coords) {
updateCropFormFields(coords);
showCropFormButton();
}
};
if ($(".image_cropper img").length > 0) {
loadSelectionIfAvailable();
}
function loadSelectionIfAvailable() {
var form = $("#finalize_crop_form");
var x = parseInt($("#image_crop_offset_x", form).val());
var y = parseInt($("#image_crop_offset_y", form).val());
var height = parseInt($("#image_crop_height", form).val());
var width = parseInt($("#image_crop_width", form).val());
jcrop = $.Jcrop(".image_cropper img", jcrop_options);
jcrop.setSelect([x, y, height, width]);
}
});
An interesting bug for you that only seems to happen with current WebKit browsers:
I have an whose src I set with something like this:
document.getElementById('imageForCropping').src = someImageSrc;
No problems there - pretty bog standard DOM / JavaScript. The src is loaded into the .
Then I do this:
jcropOptions
,function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
this.animateTo([ 0,0,boxMinWidth,boxMinHeight ]); //width and height settings seems to NOT make the box smaller than its min size (which is good obviously)
// Store the API in the jcrop_api variable
jcrop_api = this;
}
);
Which puts the cropping widget on the image. BUT...
The problem
The issue is that when Jcrop is applied to the <img> and doing its thing, the image that was already loaded and present DISAPPEARS, is replaced with a BLACK BACKGROUND and the image LOADS AGAIN!
It is easy to spot because the image src in question is quite large and takes a second or to to fully draw in the browser.
So I am wondering if this is a known issue with either WebKit or Jcrop? Or am I doing something blatantly wrong?!?!
Thanks a lot guys. It's a great piece of work and a fine project.
Well the title explains it. It works fine otherwise.
I am having an issue where I am using boxWidth and boxHeight to crop large images 2500px +. What I have found, is that some images (normally very large 2500+) appear distorted in the crop window and if you still crop them, the crop comes out in the top left corner and is not the selection you made.
Here is one of the images I am having an issue with:
http://cloud.rapidmoviereviews.com/people/o-alice-eve-n61nf5hcwu.jpg
Here is a screencap of the issue occuring:
http://cloud.rapidmoviereviews.com/jcrop-github.png
My Code:
$('#jcrop-area').Jcrop({
boxWidth: 338,
boxHeight: 500,
aspectRatio: 169 / 250,
onChange: updateCoordinates,
onSelect: updateCoordinates,
setSelect: [0, 0, 500],
minSize: [338, 500]
});
Goal:
Additional:
Or is it better to make multiple instances of jCrop?
(but how are they then stacked, they are supposed to be on the same level, not one on top of the other)
there is a 2011 version, you are still using 2007
Currently, the allowSelect, allowMove and allowResize options are not present in the options section of the manual page. The should be added so that people know they exist.
Is there any way to optimise for mobile? It works .. bad. I mean "slow" and "stucks touches all over the page".
Well, the "stucks touches all over the page" i'll try to fix (not sure, but may be bootstrap bug), but "slow" is native.
So I dynamically attach JCrop to an img inside a JQueryUI dialog. I'm trying to use boxWidth and boxHeight to intelligently size the image within.
I call jcrop_api.destroy() after use of the dialog is complete.
Then, if I open another dialog, the img inside retains the sizing of the first invocation.
Can't seem to find any workarounds. Advice?
I'm on d8c367c from Jan 1, 2012
Hi, the preview example code currently stretches the image instead of padding it to fit the aspect ratio. As the solution is non-obvious (due to some browser bugs), I thought I'd share the solution in the hope that it would be published in the demo, and so fewer users would use the broken version...
Full article: http://nathanaeljones.com/573/combining-jcrop-and-server-side-image-resizing/
Demo of preview: http://images.imageresizing.net/JCropSample/Advanced.aspx
Hit 'view source' on the demo page to get the code. The demo page is comprehensive in it's handling of aspect ratio locking and multiple instance handling, but feel free to strip everything out except the improved preview code if you'd like. I've taken the approach with the demo code of allowing the user to provide hints in the preview div's inline style for the preferred dimensions of the preview window. Also, it shows how to use server-side resizing to handle very large images without driving the browser crazy, but that's easy to pull out.
MOVED FROM GOOGLE CODE
What steps will reproduce the problem?
What is the expected output? What do you see instead?
You'll see that the image is now stretched to the dimensions of the previous image.
What version of the product are you using? On what operating system?
0.9.9
Please provide any additional information below.
The reason this happens is because when JCrop is first initialized, it attaches height and width attributes to the tag that you initialize it with. However, after calling destroy(), the height and width attributes are still present, so you can't just update the source and open JCrop again. The fix would be to remove the height and width attributes (or reset them to their original values) in the destroy() method.
Hello and thanks for this plugin,
But the onSelect function is called when I use setSelect but not when I use animateTo :)
Thanks !
The download version (in the site) is outdated. That version is not compatible with jQuery 1.9
I use jCrop to resize website screenshot down to a desired size. I need end result of 740x656.
So I set aspect ratio to 740/656 - the user isn't allowed to make a selection smaller than that.
If the user sets jCrop selection to 940 width, jCrop calculates a height of 833. But in actuality, the correct dimension should be 940 x 833.297297297297...
So when I pass these coordinates to PHP, the resized image at 740x656 comes back very blurry. Because PHP creates image that is 740x656 from the 940x833 selection.
I have spent some 6 hours or so investigation this issue so far. I'm under the impression the issue is with jCrop allowing the user to make selection that should not be allowed. The aspect ratio isn't correct on the user's selection:
740/656 = 1.1280 48780 48780 48780 48780...
940/833 = 1.1284513805522208883553421368547
940*656/740 = 833.297 297 297 297 297 297 297...
Any ideas how I can solve this problem? I need the resulting image to be clear.
Nicely done on this library.
I would love to have the ability to display the selection as an ellipse to provide circular selection. While I can calculate the ellipse from the rectangular selection coords, I would like to have the marching ants show a circular selection area.
This page: http://code.google.com/p/jcrop/
Needs to link to this github repo and issue tracker.
Scaling images down works perfectly if you provide boxWidth and boxHeight. Scaling up however doesnt. Is there an easy way to implement that or am I missing something?
Details:
JCrop version:v0.9.9 (build:20120109)
Chrome v 17.0.963.56 m
Windows 7 enterprise
The issue can be seen here: http://www.chicengine.com/pinterest/
To recreate the error:
This problem seems to be happening because the width of the shade divs are a decimal rather than an integer... and the shade doesn't quite cover the actual image completely sometime. I changed updateShade() to this and it works for me on Chrome now:
function updateShade(c)
{
shades.top.css({
left: px(c.x),
width: px(Math.round(c.w)),
height: px(c.y)
});
shades.bottom.css({
top: px(c.y2),
left: px(c.x),
width: px(Math.round(c.w)),
height: px(boundy-c.y2)
});
shades.right.css({
left: px(c.x2),
width: px(boundx-c.x2)
});
shades.left.css({
width: px(c.x)
});
}
Kinda off topic, but wanted to let someone know...
I've tried update jQuery to the latest but It still crashed everytime I try to crop image in IE7.
IE8+ is ok.
Please help.
Its a small difference, but I'd rather be on the upper side of a round-off than the lower. :)
"Uglish" rudimentary hack would be to return 100x100 even if actual value is 98 or 101 - at these scale rates, it holds 3,25 actual image pixels within one display pixel, so rounding it to the actual minSize dimensions on an already approximate minimal crop would still hold a true representation of what the user actually sees.
can't really explain it, if i set aspectRatio to 1.0 on a square image, when the selection is drawn, the image gets skewed, if I drag the selection to the right at about the half of image, the inside selection appears black like here
http://www.freeimagehosting.net/maju3
moving the selection to the left image and selector appears normal again:
http://www.freeimagehosting.net/jyujn
it appears as if 1/3 of image is unselectable
what is the issue here and how can i solve it ?
using firefox 11, linux ubuntu, with latest jquery 1.7.1, jcrop 0.9.9 from github
Compatibility problem with Bootstrap 2.3. After selecting the crop area, the crop area continues to move as the mouse moves outside of the image causing "Uncaught RangeError: Maximum call stack size exceeded" in jQuery 1.9.1 - http://jsfiddle.net/dragoncrew/L5mad/6/. Tested using Chrome 24 and FF 19 and the issue occurs in both.
when calling destroy() i expect that this will restore the img element in its original state - you can see this in "tutorial5.html"
Hello,
Could you check demo page tutorial3.html on IE9. On my computer I observer strange behavio: Jcrop don't attache to image, but if I copy script and run it manually from ie developer console then script works normally. I checkout previous version 0.9.9 and demo tutorial3 works like a charm.
on FF and Chroma Jcrop works without problems.
My computer configuration:
-Windows 7 x64
-IE 9.0.8112.16421 (polish language) - actualization version: 9.0.8 kb 2719177
It's really strange behavior and if you can't reproduce it try clear browser cache and refresh page 2-3 times.
I posted the question/issue on StackOverflow here:
http://stackoverflow.com/questions/13075739/jcrop-shaking-image-in-facebook-canvas-when-dragging-selection
The problem I'm having is that code that works great in a JSFiddle or outside of the Facebook canvas is causing a weird issue in the Facebook canvas. The image shakes a very tiny bit as you drag the select box which causes a bad visual user experience. I'm going to try to dig a little deeper beyond stripping the code down to it's most simple use case but any insight would be greatly appreciated
I have a hidden modal dialog that is supposed to show jCrop in particular conditions (BTW, I am using modal dialogs in Twitter Bootstrap - http://twitter.github.com/bootstrap/ but I am sure that a normal fixed div with display:none is behaving the same)
<div style="width:70px; height:70px; overflow:hidden; margin-bottom:5px;">
<img src="http://deepliquid.com/Jcrop/demos/demo_files/pool.jpg" class="preview" />
</div>
<img src="http://deepliquid.com/Jcrop/demos/demo_files/pool.jpg" class="target" />
Now if after I use JCrop the first time, I substitute the picture with:
var $trg = $('.target', $id);
var $preview = $('.preview', $id);
$trg.attr('src', pic_url);
$preview.attr('src', pic_url);
and I call again $("mypic").jCrop({...}) , the result is horrible:
The picture is deformed and using the width and height of the previous picture and there are now 2 jCrop section squares, one of which is showing the old picture in the square. See : http://d.pr/niIk
I've run into a problem when the image (and the Jcrop instance) are instantiated within a tab. The image does not appear at all when switching to the tab with the image and the crop rectangle is reduced to a dot.
I assume this is because the width/height for an object with "display:none" are 0, which messes with the Jcrop code. I'm about to dig in the code and try to fix it but was wondering if anyone found a way to solve it already.
Just a heads up... 1.9 has finally deprecated $.browser() and Jcrop is using it to detect msie in several places.
We are trying to use local file URLs when running our application locally to simulate images on Amazon S3, but Jcrop breaks when trying to initialize with a local image file.
Example URL:
file:/C:/tomcat/temp/d4d6566c-a6c6-434a-bac4-29fafd3751c7.jpg
If I copy the URL into my browser address bar, I can see the image.
This occurs Firefox and Chrome.
if the image is a png file with transparent background, then the black background color of div will cover the image.
Been having trouble with this for a day or two. When I set the relevant options the Jcrop works perfectly, however when I add in the setSelect option the selected area is movable and changeable except that you can't STOP moving or changing. This is happening in FF, Chrome and IE. What happens is when you try to move the selection, the box continues to follow the mouse even after releasing the mouse button and continually even when your mouse goes beyond the image (though the box stays in the image). If you manage to create a new selection area, you cannot stop changing the size. The last corner just continues to follow my mouse around much the same way as just moving the box. The error received by developer tools is that boundx is undefined, however simply removing (or commenting out) the setSelection assignment and it works just fine.
Below is the code I've used to reproduce this in the most minimal way possible.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><title>jCrop + Dialog TEST</title>
<script type="text/javascript" src="Include/jquery-1.7.2.min.js"></script>
<link href="Custom/jCropStyles.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="Include/jquery.Jcrop.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var jCropOptions =
{
onSelect: jCropUpdate,
onChange: jCropUpdate,
aspectRatio: ($('#jCrop_hdnTargetWidth').val() / $('#jCrop_hdnTargetHeight').val()),
boxWidth: 500,
boxHeight: 500
}
if ($('#jCrop_CropX2').val() > 0)
{
jCropOptions.setSelect =
[
$('#jCrop_CropX').val(),
$('#jCrop_CropY').val(),
$('#jCrop_CropX2').val(),
$('#jCrop_CropY2').val()
];
}
$('#jCrop_jCropImage').Jcrop(jCropOptions,
function () {
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
jcrop_api = this;
});
$('#jCropPreviewContainer').css({
'width': $('#jCrop_hdnTargetWidth').val(),
'height': $('#jCrop_hdnTargetHeight').val()
});
});
function jCropUpdate(c) {
storeCoords(c);
updatePreview(c);
};
function storeCoords(c) {
$('#jCrop_jCropX').val(c.x);
$('#jCrop_jCropY').val(c.y);
$('#jCrop_jCropW').val(c.w);
$('#jCrop_jCropH').val(c.h);
};
function updatePreview(c) {
if (parseInt(c.w) > 0) {
var rx = 100 / c.w;
var ry = 100 / c.h;
$('#jCrop_jCropPreview').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
};
</script>
</head>
<body>
<form method="post" action="Dev-jCrop.aspx" id="form1" enctype="multipart/form-data">
<input type="hidden" name="jCrop$hdnCropX" id="jCrop_CropX" value="25" />
<input type="hidden" name="jCrop$hdnCropY" id="jCrop_CropY" value="50" />
<input type="hidden" name="jCrop$hdnCropX2" id="jCrop_CropX2" value="175" />
<input type="hidden" name="jCrop$hdnCropY2" id="jCrop_CropY2" value="200" />
<input type="hidden" name="jCrop$hdnTargetWidth" id="jCrop_hdnTargetWidth" value="100" />
<input type="hidden" name="jCrop$hdnTargetHeight" id="jCrop_hdnTargetHeight" value="100" />
<div id="jCrop_pnlCrop" style="width: 650px">
<div id="modalCrop">
<div id="jCropImageContainer" style="width:500px; height: 500px; float: left;">
<img id="jCrop_jCropImage" src="http://localhost/FileRepository/Default.aspx?FRLID=37&Rand=1144118105" />
</div>
<div ID="jCropPreviewContainer" style="height: 100px; width: 100px;overflow:hidden;float: right;">
<img id="jCrop_jCropPreview" class="jcrop-preview" src="http://localhost/FileRepository/Default.aspx?FRLID=37&Rand=1144118105" />
</div>
</div>
<input type="hidden" name="jCrop$jCropX" id="jCrop_jCropX" value="426" />
<input type="hidden" name="jCrop$jCropY" id="jCrop_jCropY" value="156" />
<input type="hidden" name="jCrop$jCropW" id="jCrop_jCropW" value="346" />
<input type="hidden" name="jCrop$jCropH" id="jCrop_jCropH" value="346" />
<input type="hidden" name="jCrop$jCropPath" id="jCrop_jCropPath" />
<input type="hidden" name="jCrop$jCropFileName" id="jCrop_jCropFileName" />
<input type="submit" name="jCrop$btnCrop" value="Crop" id="jCrop_btnCrop" class="BaseButton SubmitButton" />
</div>
</form>
</body>
</html>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.