odyniec / imgareaselect Goto Github PK

after release the instance using function "remove()" then rebuild imgAreaSelect, the selection area DIV will disappear. the code like this:

editorhandle = $('#cropimg').imgAreaSelect({
handles: true,
instance: true,
show: true,
imageHeight: 400,
imageWidth: 400,
x1:0,y1:0,x2:200,y2:200
});
//you can see selection area showed.
//then release and rebuild immediately
editorhandle.remove();
editorhandle = $('#cropimg').imgAreaSelect({
handles: true,
instance: true,
show: true,
imageHeight: 400,
imageWidth: 400,
x1:0,y1:0,x2:200,y2:200
});
//selection area DIVs disappeared, but you can even crop the image.

Test on - IE 9, chrome (v 23.0)

1. Select an area in the image
2. Move the image up/down (say by adding a div element before the image)
3. image will move down but the selection area will not

seems like the following code prevent events to be triggered when selection is cleared :

in cancelSelection() function :

/* If this is an API call, callback functions should not be triggered */
if (!this instanceof $.imgAreaSelect) {
options.onSelectChange(img, getSelection());
options.onSelectEnd(img, getSelection());
}

If your HTML page includes a css style with a border-top of x pixels the selection area will be affected with the same amount of pixels!

The only solution until now is to remove the border-top style.

Hi everybody. I'm trying to carry out "on mouse wheel" selection scaling. And even if I put the listened element over the imageareaselect elements, as soon as mouse is over imageareaselect the mousewheel event is not caught. Well I tryed to figure this out, which exactly events may conflict to each others, but have not dealt with. Could anybody help?

https://github.com/odyniec/imgareaselect/blob/master/jquery.imgareaselect.dev.js#L921

https://github.com/odyniec/imgareaselect/blob/master/jquery.imgareaselect.dev.js#L959

https://github.com/odyniec/imgareaselect/blob/master/jquery.imgareaselect.dev.js#L961

(o =) can be write like this:

if (options.borderColor1)
$($border[0]).css({ borderStyle: 'solid', borderColor: options.borderColor1 });
if (options.borderColor2)
$($border[1]).css({ borderStyle: 'dashed', borderColor: options.borderColor2 });

some other issues is this too.

Could you add onSelectCancel event to options and trigger it in cancelSelection() ? This would be quite handy I think

Hi,

Thanks for your work. This plugin is a very useful tool !

I have a question regarding the selection coordinates returned by the plugin. I'm not sure if there is a bug or if I'm missing something.
When we get the coordinates of a selection, it seems to me that x2 and y2 are 1px higher than they should be.

For example, in the case where we update a form using the callback onSelectEnd as in this demo, considering we select the whole image (which is 400x300px), we get the following coordinates :
x1: 0
y1: 0
x2: 400
y2: 300

Shouldn't x2 and y2 be 399 and 299 ? (otherwise the overall width & height would be 401x301 px)

If you have the image in a Bootstrap modal window the crop area positioning gets "fixed" positioning and goes to the top of the window.

It happens in line 674, where is checking the positioning of their parents. Because the modal is position: fixed, it gets position fixed too.

Commenting those 2 lines make it work

Hello,

I'm testing your brand new mobile resize solution! It works great, but a little interface problem. When touchstarts begin (without moving around) the selection will be half the size.
So just pust the corner for resizing and don't drag, it will result in a smaller selection.

I like the mobile branch a lot!

Keep up the good work!

Greetingz ,
Peegmehh

Which means imgareaselect no longer works. I mitigated this by using just the $.broswer parts of the jquerymigrate plugin, but imgareaselect may want to use something else for doing some of its browser switching.

Appearantly when you adjust the size of the image with css, like

img {width: 100%;}

Then the cutout part isn't correct, Which i understand, but is there some way for
large images to be able to fit onto the screen and be cutout right anyway?

Thanks!

As titled, when using imgAreaSelect under IE10 the control is unusable as it incorrectly removes mouse events straight away after being initialized.
Oddly, this issue doesn't seem to occur on IE9 or IE8.

I suspect this is something to do with how the 'enable/disable' variables are checked, but most importantly I wonder why there are two variables throughout the code that control whether the plugin is enabled or not...both 'options.enable' and 'options.disable'.
This seems a bit unnecessary, compared to having just one variable.

For the line containing the following code:

$box.unbind('mousemove', areaMouseMove).unbind('mousedown', areaMouseDown);

I've simply changed the code around this to be the following situation:

if (options.disable) {
//Do unbind code above
}
else{
//Do regular binding of mousemove and mousedown here
}

This fixed the issue for me under IE10, however it may not be the best solution as I've still left in the 'options.enable' checks elsewhere.

I'm currently working with jquery-1.9.1.js and jquery-ui-1.9.2.js, the imgareaselect plugin works fine in Firefox, but cropping box don't catch move or re-size mouse events in IE. I'm using the latest imgareaselect from GitHub.
Regards, deniscuba

Hello, I encountered a problem when use this plugin when near the top of the image and below would exceed the scope of the picture more than a shadow in ie under FF and chrom normal, I ask this question Can you help me?

Hi.
I set parent in initializing imgAreaSelect to prevent scroll moving area :

thumb.imgAreaSelect({
handles: true,
aspectRatio: '1:1',
fadeSpeed: 300,
parent: "#thumbBox"
})
and this is my html :

        </div>
        <div class="row">
            <div class="col-xs-12">
                <div id="thumbBox">
                    <img id="thumb" class="img-responsive" />
                </div>
            </div>
        </div>

currently, when cancelSelection() is triggered (such as when the area outside the region is clicked) there isn't a callback that you could use to trigger other cleanup events.

An example where this would be useful is if you want to show some additional UI only when there is an active region. There are existing callback for Start/End so you could use one of those to display the additional UI, but there isn't an appropriate hook to use to then hide it.

Probably as easy as adding an options.onSelectCancel() call in function cancelSelection(), but I haven't tested that solution. If I have time, and wind up that I do need it for this project I'm on, I may for and do just that.

Hi There,

Do imageareaselect supports touch devices like android and tablets , I looked on the online demo, even its not working on touch devices. Is there any support for touch devices, kindly let me know.

Thanks,
Chirag Vashisht

if an image is selected (but not loaded) the setOptions seems to be called to late and an error of a missing $parent variable is thrown. for me this happens sometimes, but not always. i am using firefox 11. A dirty fix is to copy-paste the hole setOptions block from the imgLoad method right before the is-the-image-loaded-check and the call of imgLoad.

Hi,
in jquery 1.9 $.browser is removed, so plugin does not work anymore :(

I have a problem with this wunderfull plugin in IE9 and IE8.
When dragging the selected area it stutters and follows a defined grid or something.

Strange part is that when I load up your examples it works great in IE8 or 9 so it's definatly a settings problem but I can figure it out.

I create a demo page where the same problem occures.

http://zaliba.sitestatus.nl/imagetest.php

Do note that in product i dynamically set those image width and height vars.
So i need them to perform in my application.

Besides that I don't see anything weird but I hope you will.

Thanks in advance.

I'm using imgareaselect with colorbox,It works well with chrome and firefox.But not IE.

There is part of code.

if ($('#sourceImg').is(':visible')) {
imgselect = $('#sourceImg').imgAreaSelect({
parent: '#cboxContent', //the colorbox content.
handle: true,
instance: true,
aspectRatio: '4:3',
x1: x1, y1: y1, x2: x2, y2: y2,
onInit: preview,
onSelectChange: preview
});
}
the preview is just a function show the selection area's image.

anythig works well but It is not moveable.Even thought I set the option true.

While I move the mouse in the selection area,the mouse cursor won't change to moveable mark.It keep what It's out the selection area.

So If I click in selection area,it will start a new selection.Just like I click outside.

In fact,when the plugin is initialized,I move the mouse up the right imgselect-border,the cursor will be a moveable mark,so I can move the selection area.
But after you move it,then you move the mouse to the right imgselect-border,the cursor will be a resizable mark whick it should be.
And then,It won't be moveable ever.

Hello,

I have looked to previous issue and parent fallback but it does not match expected result.

http://cloud.github.com/downloads/darul75/darul/Capture1.JPG

<div id="Zone" style="align:center">
     <img id="ZoneImg" src="http://odyniec.net/projects/imgareaselect/ladybug_ant.jpg">
   </div>

Float may cause problem ?

Julien

If the image in question has a border and padding, the area that can be selected extends to the border, not just over the image. In other words, areas OUTSIDE the image are selectable.

How to test it:
Go to http://odyniec.net/projects/imgareaselect/examples.html and scroll to the bottom to see the duck example. Then in console run this:

$('#duck').css('border:1px solid red').css('padding', '4px');

You will see the grey box extends to the border, and goes beyond the image.

I started with JCROP but finally I think imgareaselect is the best.
it seems that the project is not evolves enough. Where is the community ?

I have very big Image and need to select an area of that image . I am trying this plug-in. Its working fine with the initial area,but not able to select the image by scrolling .. Please see the attached image

Hi,

I suggest you to check if "$.imgAreaSelect.onKeyPress" exists before unbinding "keydown" event or it will also unbind all other handlers outside the plugin.

if ($.imgAreaSelect.keyPress != docKeyPress && typeof($.imgAreaSelect.onKeyPress) != 'undefined' )
$(document).unbind($.imgAreaSelect.keyPress, $.imgAreaSelect.onKeyPress);

Can you please guide how to extend your tool on selecting multiple areas on a single image?

When using IE9 + jQuery 1.8.2 (currently the latest version) it does not work. It works with no problems on IE7 and IE8.

The image appears, but no selection can be made.

Hey!!

Really nice utility. Thanks alot for your effort.

Anyways, I'm trying to crop pictures where I want a fixed aspect ratio and minimal height and width on the result image after crop. And as I will handle really big pictures I found imageHeight and imageWidth properties to be very usefull.

My issue is that I thought that minWidth and minHeight would scale along with the picture so the minimum values would be the resulting selected area of the picture but isnt. It's plainly the size of the selection window.

Is this working as intended? Missing feature? Would you want a minResWidth and minResHeight implemented?

Sincere yours Loa

As the title says, I think that a call to the update() function should trigger most of the callbacks available..
What do you think?

Hy

when I upload an image that is too small for the selection, the selection is automatically adjusted, but the new coordinates are not updated.

I have "now fixed" it with this code in the update function for me:

    $('input[name="selection[w]"]').val(selection.width);
    $('input[name="selection[h]"]').val(selection.height);
    $('input[name="selection[x1]"]').val(selection.x1);
    $('input[name="selection[x2]"]').val(selection.x2);
    $('input[name="selection[y1]"]').val(selection.y1);
    $('input[name="selection[y2]"]').val(selection.y2);

greetings
MAH

I'll start by saying I could likely be doing something wrong in my code. I've been fighting this project to literally 2 days, and this is just the latest issue I've run into.

BACKGROUND:

I have an image uploader that is uploading an image within a WordPress admin post edit screen and I am using a jQuery FancyBox to display the image and imgAreaSelect v0.9.6 (which is the one provided by WordPress v3.2.) My uploader is simple in that it allow the user to click upload and if they select an image it automatically pops up a resizing box and an image cropper. if they click "save" the crop selection is written back into the HTML of the document as well as via AJAX back to the WordPress database. All that works great.

PROBLEM:

However, if a user then clicks "delete" our code clears out the HTML where the image used to be but if the user uploads another image imgAreaSelect added it adds double the HTML and now I see remnants of previous cropper mask on the screen. I've looked but I can't seem to find a way to get imgAreaSelect to actually clean up it's HTML after I delete an image.

EXAMPLE:

Here's what the problem looks like after displaying the crop window for the first photo, deleting it, then uploading a new image and displaying the crop window for it. Note that is keep doubling opacity:

WORKAROUND:

I've managed to get the following code to work, but of course it is very fragile and will stop working if the HTML used is changed and WordPress upgrades to the newer version:

$(".imgareaselect-selection").parent().remove();
$(".imgareaselect-outer").remove();

SUGGESTIONS?

Minimally it would have been nice of the HTML could have been wrapped by on <div> with one id and I could have just deleted it all.

A BETTER WAY?

Like I said, I could be doing this wrong, so if there is an obvious thing I missed that I can do with v0.9.6 then please let me know a better way. Thanks in advance.

Line 921 has the following line:

if (o = options.borderWidth)

Perhaps it should be == instead of =

Hey man,

Seems your site was down today so our build process went kablooie. We found your non-compiled github repo and tagged all your commits with releases and uploaded the most recent tarball as a download.

Any interest in making use of github in this way? Seems a little more reliable :)
https://github.com/myplanetdigital/imgareaselect/downloads

Cheers, and thanks for the awesome lib

It appears the selection box in IE9 has some issues. Whenever selecting, it jumps between the boundaries and the actual selection box.

Hi,
I was wondering. Is there a way to set a boxWidth and height? I don't know if that is the best description but that is what your competitor "Jcrop" calls it.

Basically I'm looking for a resize of the uploaded image that does leave the original resolution intact.
I tried attaching a style to the image with a max-width. But this messed up the preview.

when i update Jquery to 1.8.1 plugin works fine on Chrome & FF but i face errors on IE9.
but when i commented this codes , plugins works again!

in file jquery.imgareaselect.js line line 608 comment codes below:

// if ($.browser.msie) {
// if (o = $outer.css('filter').match(/opacity=(\D(\d+))/))
// $outer.css('opacity', o[1]/100);
// if (o = $border.css('filter').match(/opacity=(\D(\d+))/))
// $border.css('opacity', o[1]/100);
// }

this solve my problem!

I have a collection of images that are sortable and when I apply imgAreaSelect to the images they work fine until I drag and drop the image. The selection area doesn't follow the image around.

Sometimes I need to create an image where its a single image that will be needed for use on TV, mobile and desktop. All in one, just like the new Youtube channel template: https://support.google.com/youtube/answer/2972003?hl=da

Will it be possible to use such kind of visual information to users, so they know that maybe a persons head needs to be in the middle, but the image still needs to be workable in another size?

At the place where the browser check is done with keypress assignment ($.imgAreaSelect.keyPress)
one more 'or' should be added with $.browser.chrome check, as it is also a webkit browser and current 'keypress' is not working correctly.

Hi!

I choosed aspect ratio 10:3 to a image with: 500x150px.

If I select 500px width, I will get 100px height.
On this website, http://andrew.hedges.name/experiments/aspect_ratio/ with same configurations, I can get the right value.

W1: 500
H1: 150

If I fill on W2 1000, on H2 I got 300.

With this plugin, on 1000px witdth, I got 200px.

Can somebody help me please?

Thanks

Thanks for your excellent plugin

os : mac os
browser : Google Chrome 11 (works fine on Firefox 4)
imageAreaSelect : 0.9.6
jquery : 1.6.1

I try to use it with uploadify, everythings work fine instead when I uploaded a new image and change the photo src with jQuery attr : I can't resize the selection, just move it ?!?

So, I clic anywhere out of the page (browser's menu, another window ...) or, just put the cursor over web browser menu and it works !

maybe a focus problem

better with an exemple : http://luma79.com/labs/crop_upload/

1. make a selection and clic "crop" button
2. select a photo from your hardrive
3. try to make and resize the selection on the new photo //it doesn't works on Google Chrome
4. clic on another window (page lost focus)
5. resize the selection area //it works !

important : works fine on Firefox, only detected on Google Chrome

thanks again to share your work

When using the Tabs from Jquery UI and adding ImgAreaSelect to e.g. the second tab there is a problem when you select an area and then switch tabs. Instead of hiding the darkened overlay + selection it remains on top of the other tabs.

Switched to ImgAreaSelect from Jcrop. IAS suits me more, but this bug is a bit annoying.

On a side note: the disable option doesn't seem to be working.

Hey, maintainer(s) of odyniec/imgareaselect!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library odyniec/imgareaselect is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "odyniec/imgareaselect",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Hi there,

The plugin seems to have no support for devices like iPad, android tablets, if is there any please let us know.

Thanks
Chirag

On IE9, when imgareaselect is put inside a div with position: relative and max-width set to a value lower than img width, the div '#txt' is moving when selection area is resized.
Repro steps:

1. Use html file below.
2. Run a page in IE9
3. Start resizing/dragging selection

Expected behavior:
Selection is resized and div '#txt' stays below the parent div

Actual behavior:
Selection is resized and div '#txt' is moving up and down during resize/drag operation.

<!doctype html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
  <script type="text/javascript" src="scripts/jquery.min.js"></script>
  <script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
</head>
<body>
<div id="parent" style="position: relative; max-width: 200px; max-height: 200px; overflow:auto">
<img id="photo" src="http://odyniec.net/projects/imgareaselect/flower2.jpg">
</div>
<div id="txt">
This text is immediately below the image
</div>
<script type="text/javascript">
$(document).ready(function () {
    $('img#photo').imgAreaSelect({
 x1: 120, y1: 90, x2: 280, y2: 210 ,
        handles: true,
    parent: $('#parent')
    });
});
</script>
</body>
</html>

Hi.

I have some problems in Google Chrome.

When I scroll page vertically and show imgAreaSelect again, it's in different place.

In other browsers all OK.
Can you help me? Thanks :)

See the screen capture: http://youtu.be/F559gqKKt3k
I changed the image width to 30% and the container div to 90% at the beginning of the video, you can see the demo of the issue at 0:27.

For an application I need to have an adjustable outer-border within the croparea where you which you can not pass using the selection and resizing. In fact exactly like the fysical borders around the crop-area right now (usually x1:0, x2:imgWidth, y1:0, y2: imgHeight);

I've made an attempt to add this feature to the plugin, so far I have:

• Added 'noSelBorderWidth' to the options list and changed the init code accordingly to load these settings.
• Changed the doMove() function to respect this border width, this works fine!
• Attempted to change the doResize() function to respect this border. This works only partially.

Problems:

• Resizing doesn't work correctly on all sides, it doesn't always respect the (noSel)border
• Moving the mouse in/out area while resizing makes the selection go beyond the (noSel)border and to the fysical cropborder.

I've pasted the modified jquery.imgareaselect.js version here: http://pastebin.com/V3Vk67RK

To test:

• Replace your original .js file by the pasted one
• Should work immediatly, as default option for noSelBorderWidth is set to 20px, if not, add this option in your init.
• Move your selection area to any of the borders, you'll see you run up to this noSelBorder, this is what I want to see also when resizing.
• Try to resize, you'll see you can go past this noSelBorderWidth..

Any ideas/suggestions on how to fix/improve this?