trepmag/jrac

jQuery Resize And Crop (jrac) is a jQuery plugin that build a viewport around a given image permitting to visually resize an image and place a crop

jrac's Issues

rotate feature

First commit in branch: https://github.com/trepmag/jrac/tree/rotate_feature

Implementation currently use jQueryRotate: http://code.google.com/p/jqueryrotate/

Not finished, remaining known issues:

• Glitch with crop coordinate which return float values (btw no that wrong)??
• Output angle return value btw -180 and + 180
• $viewport.observator.crop_consistent() method need be refactorized to be itself consistent

How can I get the image/data of the cropped/resized area?

Hi,
Is there a way to read back the cropped image using JS?
I can see I can read the coordinates but I'd like the processed image.

Thanks,
Corneliu.

Disable viewport resize

A setting that turns on/off the ability to resize the viewport.

Documentation incorrect

The documentation states that fields are called
viewport_content_x
and
viewport_content_y
but the source code says that it is in fact
viewport_content_left
and
viewport_content_top

Please fix this because if you do not read the source code you will not find this out

Viewport / draggable distort the image

Dear,

I loaded an image with the dimensions 4000 x 2666 ( or bigger ) in the viewport. My viewport is 965px x 460px. The draggable square is positioned at the right.

When I drag the square a little bit too the left, the image is distort ( width and height are messy, the image will be stretched. ) When I use for example an image with the dimensions 1024px x 768px ( the draggable sqaure positioned in the middle ) the image will be nice transformed.

I think the range of the draggable square isn't enough for big sized images. Maybe you can fix this? I solved my problem with resize the image when it's uploaded.

Your sincerely,
Marten

Suggestions

Some suggestions to you that I have to implement.

image_full_size: [bool] - Set the image size equal viewport size
viewport_width: [float] - Set the viewport width
viewport_height: [float] - Set the viewport height
image_resize: [bool] - Enable/Disable zoom

Viewport / resize programmatically

Any chance to get Viewport height/width as options like the image has it?

Or maybe you could give some advice how to resize the viewport?
I need to rotate the image. This already works, also with updating the preview. If the image is 180dg rotated, the viewport-dimension doesnt fit to the image-dimensions. I'm trying to update the viewport-dimension $('.jrac_viewport').css('height', value) / $viewport.height(value) but this also changes the image-dimension.

By the way: image rotation would be a great feature! ;)

how to set center point watching when load jrac

I see in document have 'viewport_content_x', 'viewport_content_y' but I set it seem to not effect. It alway show at position 0,0 .

Did I config wrong something?

doesn't work when image replaced

Hello,
I am building client-side image editor with Pixastic as backend. Pixastic transforms IMG element to CANVAS for image manipulations. I cannot use Jrac "resize" functionality once IMG element has been replaced. Is there any way I can update (refresh) element inside Jrac object?

Disable image dragability

Hi trepmag,

thank you for this awesome script. Loving it.
I wonder if there is a setting or a solution to prevent image dragging within the viewport. Maybe you can help me out on this.

Thank u very much in advance

Replacing the image

Hello,

Can anyone please help me. I need to be able to replace an image using JQuery i.e.
$('#image').attr('src', 'http://www.somewebsite.com/someimage.jpg');
I gave the image element an id of 'image'.

But the problem is that the new image now has the wrong coordinates. I've tried calling the code to reset it but that doesn't work. So how can I reset the coordinates for the new image?

Best Regards,

Steve

originalWidth+originalHeight issue and how to destroy jrac?

I use
$('.pane img').jrac({...});
then I change the src image with
$(".pane img").attr('src', '...');
then I initialize jrac again
$('.pane img').jrac({...});

everything works fine with the new image except when I retrieve
$viewport.$image.originalWidth and $viewport.$image.originalHeight
for the second loaded image and so on.

The values that are returned are not the natural image size but the image_width and image_height defined in settings.

Could you let me know if it is something that I am doing wrong or it is actual a bug?
Also is there anyway that I could unload(destroy) jrac after been called?

Is this project licensed under “GPLv2, or any later version”

Trying to confirm the license. Is it “GPLv2, or any later version” or just GPLv2?

Crop rectangle leaves viewport

Hi again,

I just experienced some weird behavior.

Using jrac in and iframe embedded in a jquey dialog. When dragging the crop and pulling it down to the lower image border then move the mouse further down so the iframe scrolls down the crop moves out of the viewport and the crop_y field shows the new y coord which is the y coord within the iframe.

Further I noticed that the y field shows a decimal when I drag down the crop.

I'm attaching images to show what I mean.

Maybe I'm doing something wrong but can't figure out what it is. Wonder if anyone else had this issue before.

Browser: Firefox 24.0
JQuery: 1.9.1
JQueryUI: 1.10.1

possible to add interval in code?

I love your code, it's great.

We have been trying to implement it in our intranet for our company.
At the moment I've add an alert after the line: var $image = $(this)........ line 47, this because the system (image editor), we have an image, when double it the jrac code steps in and exports it to the image editor. But here's the problem, if we didn't add the alert (with the message to wait 5 sec), the image wasn't loaded correct into the editor.

What I would like to know is, is it possible to add an interval (of 5 sec) instead of the alert?

Thanks

Disable draggable when crop_consistent() == false

I am not sure if crop_consistent() is the correct function to use, but I was wondering if you could show me how to disable drag on the image when it returns false. I don't want my users to be able to drag the image outside the box. If you look at the thumbnail creator for profile pictures on Facebook, you will see what I'm trying to do.

Anyways, thanks for a great plugin :)

how to prevent error get wrong value (crop_x,crop_y, crop_width,...) when the drop_box is move out image

Any config can do that? Or some code hack to prevent it?

thanks!

Image resize and Bootstrap Twitter

Hi,

With bootstrap.css from twitter the width resizing fail at screen.
The crop values are correct but the image cannot overflow the container.

Add the follow lines in the style.jrac.css

img.ui-draggable {
max-width: inherit !important;

}

Regards,

Thomas

Cant initialize after destroy

After i destroy the instance i cant get it back again,i am destroying it like this...

 jQuery('[data-action="cancel"]').on('click', function(event) {
jQuery('.coords').hide();
econaImage.jrac('destroy');
jQuery('.ui-resizable-handle').remove();

econaToolbar.show();
econaCropperButtons.hide();
 });  

And calling it like this:

jQuery('[data-action="edit"]').on('click', function(event) {

jQuery(econaImage).jrac({
      'crop_width': 250,
      'crop_height': 170,
      'crop_x': 100,
      'crop_y': 100,
      'image_width': 400,
      'viewport_onload': function() {
        var $viewport = this;

        var inputs = jQuery('.coords input:text');

        var events = ['jrac_crop_x','jrac_crop_y','jrac_crop_width','jrac_crop_height','jrac_image_width','jrac_image_height'];
        for (var i = 0; i < events.length; i++) {
          var event_name = events[i];
          // Register an event with an element.


          $viewport.observator.register(event_name, inputs.eq(i));
          // Attach a handler to that event for the element.
          inputs.eq(i).bind(event_name, function(event, $viewport, value) {

                jQuery(this).val(value);
              })
              // Attach a handler for the built-in jQuery change event, handler
              // which read user input and apply it to relevent viewport object.
              .change(event_name, function(event) {


                var event_name = event.data;


                $viewport.$image.scale_proportion_locked = $viewport.$container.parent('.pane').find('.coords input:checkbox').is(':checked');
                $viewport.observator.set_property(event_name,jQuery(this).val());
              });
        }
        $viewport.$container.append('<div>Image natural size: '
            +$viewport.$image.originalWidth+' x '
            +$viewport.$image.originalHeight+'</div>')
      }
    })
    // React on all viewport events.
    .bind('jrac_events', function(event, $viewport) {
      var inputs = jQuery(this).parents('.pane').find('.coords input');
      inputs.css('background-color',($viewport.observator.crop_consistent())?'chartreuse':'salmon');
    });

jQuery('.coords').show();
econaToolbar.hide();
econaMoveButton.removeClass('active');
econaCropButton.addClass('active');
econaCropperButtons.show();



  });

Is there a way to resolve this?

jrac doesn't work with latest jQuery/jQuery UI

Firstly, this is the most awesonme jQuery plugin ever! I love it to bits! However, I have just upgraded to j!uery 1.9 and latest jQuery UI, and it has stopped working. I believe it's due to use of jQuery.browser, but can't get it to work even if I remove all references to that.

Any ideas?

Cheers in advance

Orginal Image Dimensions

How can I have the browser view the say the whole image scaled in a div of say 600w and have it crop the correct values on the full size 144x900 image?

Multiple Instances

I am trying to create a tabbed image crop tool

Every tab has different crop sizes. I am creating 3 different jcrop with 2 of them hided. But the values from the observator are wrong.

Is it a bad idea to cretae multiple jcrops on the sama page?

Make resize optional + allow setting draggable axis

Hi,

I have a fork of this with a boolean setting called 'viewport_resize' that allows me to turn off resizing.

My fork also allows passing in an option called draggable_axis which passes on the value to draggable (we only allow some images to move up and down).

Want pull requests for each (or either of these?

Thanks,
Mike

jrac crop

How to crop the image using the crop element?

Multiple Instances with jquery tabs

Hi,

I have a tabbed structure. Every tab has jrac viewports. In the first tab everything is fine. But on other tabs there is no image. I have looked at the inspector and saw that jrac gives no width or height to the hidden tab images...

how to reintialise jrac zoom and crop

Hi ,
i am using jrac to resize and crop image using PHP, by using this example
http://www.trepmag.ch/z/jrac/example/
i have used a browse button to load a new image , i failed to reinitialize using jQuery('.pane img').jrac();
and reinitialize the zoom and crop to 0 . please reply back .

dependency for jquery ui

is possible to remove dependency for jquery ui?

i see that u used it for slider only so why should i use it? it's to massive for a plugin...

zoom from center

hi,

plz how can i make a zoom start from center of image.

Resize do not work when images are loaded dinamycally in ie7, sometimes

jRac sometimes get stuck at .load because the function is never fired since ie has already cached the image,

I fixed that issue adding +'?random=' + (new Date()).getTime() at line 58, image src attribut

update to current jquery core / ui

hi,

this is very nice library.
but - it seems that it has several issues when using for example jquery 2.2.x or newer. and also jquer-ui is already at 1.12.x.
so there are a lot of methods and other stuff which does not exist anymore.
for example:

Cannot read property 'msie' of undefined
at $.(anonymous function).(anonymous function)._mouseMove (https://code.jquery.com/ui/1.8.7/jquery-ui.js:666:17)
at HTMLDocument._mouseMoveDelegate (https://code.jquery.com/ui/1.8.7/jquery-ui.js:650:16)
at HTMLDocument.dispatch (https://code.jquery.com/jquery-2.2.0.js:4732:27)
at HTMLDocument.elemData.handle (https://code.jquery.com/jquery-2.2.0.js:4544:28)

i will have to check a different library which supports these features....
thanks for sharing this anyway :)

Add crop_drag settings

Hi Cedric.

Awesome script you have here. Love it! I was just wondering why is there no way to disable the cropper (yellow box) being dragged, so I forked it and made those change. Would you like to pull them? But before that, I was wondering if there is a way to enable that when you first drag on the cropper, it would still drag the image.

I have asked it at stackoverflow as it is more of a jQueryUI draggable question but I am wondering if you know the answer to it.

Cheers!

Zoom starts distorting image at viewport width

Hi,

I used the default css and default js configuration.
In your demo it's working fine but when I try to use jrac in my CMS, I have this zoom problem. I made screenshots so it's easier to see what's going on.

Instead of keeping growing, and eventually go "behind" the viewport, when the image hits the viewport width, it keeps the image width from growing but still increases the height.

I do not have any image limitation in my sass/css, and when I look at the console, dragging the zoom bar still increases the image width in the <img> tag.

Any idea what could be wrong here?

resizing large images

When source image has large size, sometimes image is displayed stretched. The issue seems to be caused by the following code:

var $zoom_widget = $('<div class="jrac_zoom_slider"><div class="ui-slider-handle"></div></div>')
      .slider({
        value: $image.width(),
        min: settings.zoom_min,
        max: settings.zoom_max,
        start: function(event, ui) {
          $.extend($zoom_widget,{
            on_start_width_value: ui.value,
            on_start_height_value: $image.height()
          })
        },
...

when image width is larger than zoom_max, corresponding height is calculated incorrectly when slider is toggled. Changing

on_start_width_value: ui.value

to

on_start_width_value: $image.width()

fixed the issue.