Multiple crops on one image ?

[Damien Accorsi]

Hi all,

I tried to define several crop zones on one unique image by using css
classes instead of id :

<img src="myimage.jpg" class="crop_zone_1 crop_zone_2" />

and initializing Jcrop through javascript like this :

$(window).load(function(){
var api = $.Jcrop('.crop_zone_1',{
setSelect: [ 100, 100, 200, 200 ],
bgColor: '#FFF',
bgOpacity: 0.6
});

var api2 = $.Jcrop('.crop_zone_1',{
setSelect: [ 10, 10, 200, 150 ],
bgColor: '#FFF',
bgOpacity: 0.1
});

It shows my image two times with buggy crop areas.

So my questions are :
- Is it possible to manage several crop zones on a unique image with Jcrop ?
- If so, what is the way to do it ? I didn't find any information about
this in the documentation

Thanks.

Damien

[Kelly Hallman]

Hi Damien,

You are not the first person who has asked about this, but it is currently not possible to do such a thing with Jcrop. The issue of attaching multiple Jcrop instances is not a matter of whether they are selected by ID or not. It's that Jcrop is expecting to be the only instance on a particular image, not to mention the fact that the image you see is usually a clone of the original image anyway. Currently there is no plan to support this feature in the future. Sorry!

-Kelly

--
You received this message because you are subscribed to the Google Groups "Jcrop Development Discussion" group.
To post to this group, send email to jcro...@googlegroups.com.
To unsubscribe from this group, send email to jcrop-dev+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jcrop-dev?hl=en.

[Simon Höfle]

Hi!

I know this is a old post, but i also got this problem and found a workaround:

I create a empty dummy image with the same width and height and move it with position absolute exactly above the original image.
Then you can call the Jcrop functionality for both images and get two selection-areas.

The only thing you have to do is manipulate the css of the jcrop-structure to make the second selection-area visible.
Therefor you just have to set the following css for all '.jcrop-holder' elements (except the first, which is created from the original image!):
The .jcrop-holder div is always generated directly after the image, so the first .jcrop-holder is the second child(if there are no other elements in the container with the image)


.jcrop-holder:not(:nth-child(2)) {
        background: none !important;
        position: absolute !important;
        top: 0 !important;
}

I removed the opacity from the not-selected areas, so i only have the selection-boxes which mark the selected areas.
To get the opacity, like it is in standard using jcrop, you have to create the "dummy image" with the same 'src' as the original. The problem you have with this, are the
selection-areas. The first disappears behind the second.

This works fine for me.

Greetings

Simon

[Lixin Duan]

Hi Simon,

I'm also looking for the support of multiple crops. You example looks quite good! I'm new to Javascript. May I know if you could share your code of the above example?

Thank you!

Best,
Lixin