aewebsolutions / rcrop Goto Github PK

First of all;
The issue does not occur in Chrome, FireFox, Edge. It seems to only occur in Safari.
However, I do think it is strange that it does only occur in Safari. (I think it should occur everywhere).

What happens.
RCrop creates a new Image() at initialization and uses the src url of the original image.
(Note that our images are not allowed to be served cross origin.)
On the new Image, you set the attribute 'crossOrigin' = 'anonymous', which should cause the session cookies not to be sent. (this is the case in Safari, but not in Chrome, FireFox and Edge).

So, in Safari, initializing RCrop causes a load of the image, which causes a 302 redirect to the loginPage, which is obviously not what we want.

patching our rcrop.min.js by changing the 'crossOrigin=anonymous' to 'use-credentials' did fix our problem.

Is there a reason why the 'crossOrigin' is explicitly set to anonymous? Why not 'use-credentials'?
At least, I think this should be a configuration option.

Thanks.

I am using your jQuery Plugin rcrop (Its wonderful) https://github.com/aewebsolutions/rcrop but the issue is that my image size is (1000X535 pixel) but i want to crop more than image size.
For example : i want to crop image with (15000X12000 pixel) here in this case your plugin didn't work.
I want something like https://jamesooi.design/Croppr.js/ , is it possible with your existing plugin ?

When I scale my crop and move it to the top and keep repeating that action - my crop becomes larger, even though the image is already cut off at the top. Causing me to save negative values and a black line to appear when the crop is complete.

Here is a video of what's happening:
https://user-images.githubusercontent.com/11331341/109075914-c7f19580-76c7-11eb-8510-166f814b1add.mov

Here is my code:

$('#myFile').change(function () {
        console.log('changed')
        const img_data = input.files[0]
        const url = URL.createObjectURL(img_data)
        imageBox.innerHTML = `<img src="${url}" id="image" width="100%">`

        $('#image').rcrop({
            full : true,
            minSize : [100,125],
            preserveAspectRatio : true,
            grid : true
        });
}

Hi, where is the isTouchDevice() function? It is not inside rcrop.js.

Upd. I see it's there inside rcrop.min.js. But src file seems to be broken.

Hello, is it possible to allow resizing in every direction (not only bottom right)?

Im a little confused does your cropping solution support touch events? I checked the code and there are touch events defined but the crop doesn't seem to respond to touch events at all...

Even after adding the CORS config, when the rcop initialises the images getting the following cors error.

Hi,

I tried the below code on which I applied the crop on the image Onload event. it set the minSize properly but after that resizing image is not working like reducing the size from the front end is not working.

        var img = new Image()
        img.src = 'images/demo.jpg';
        img.onload = function () {

            let size = 0;
            if (this.width <= this.height) {
                size = this.width;
            }
            else {
                size = this.height;
            }
            debugger;

            $('#image-4').rcrop({
                minSize: [size, size],
                preserveAspectRatio: true,
            });

        };

minSize set properly what I wanted but when I try to reduce the cropbox while drag its not working

I tried to replace the image and crop it again but while i save the image it's the first image that gets saved.
Actually i have table with multiple images in td.if i click the image in td ..then the image will be opened in popup.if i resize the image the first image will displayed as preview for every image clicks.
Can you please check this issue?

After uploading new image, when I try to crop or resize it, image getDataURL var srcOriginal = $('#image-3').rcrop('getDataURL'); is not getting updated.
$('#image-3').on('rcrop-changed', function(){ var srcOriginal = $('#image-3').rcrop('getDataURL'); $('#cropped-resized').html('<img style="width: 80px; height: 120px; margin-left:30px; margin-right: 30px;" src="'+srcOriginal+'">'); });

An exception in rcrop,min.js file on line 2, column 15337 (source file is still not working, sorry) on mobile devices when dragging the selection grid.

touch-action: none may help as per this issue in another repo

Image is not getting flipped or saved as flipped if we apply css on it for flipping or using css filters.

Is it possible to somehow unload rcrop on a image? I tried to set the grid to false, but that doesnt help. How can I deactivate rcrop on a image?

<script>
$(document).ready(function(){
		// Activate or deactivate crop
		var cropIsActive = 1; // some variable that holds the state
		if(cropIsActive === '1'){
			$('#imgx').rcrop({
				grid : true
			});

		}
		else{
			$('#imgx').rcrop({
				grid : false
			});
		}
});
</script>

Hello - I am using a basic implementation of rcrop and it is always cropping off the image canvas when I move it. Why would this occur? Advice would be appreciated!

Can be seen in rcrop.js on line 111 and 114.
The extra quotation in html.
written
...handler-corner"">
but you need
...handler-corner">
As a result, the valid layout of the plugin is broken.
But the plugin itself is very good. Thank you very much.

I would like to have an option/function to set a previously saved cropped image back into the cropper where the user has left off. This means that I need a way to set the x, y, width and height of the cropped area.

If you're open to pull requests, I can give it a shot myself and send you a PR from it.

Hello, would it be possible to set aspect ratio in settings?

Like: aspectRatio: {1,1}

I tried to replace the image and crop it again but while i save the image it's the first image that gets saved. Can you please check this issue?

Hello, the rcrop is not working for all images (from a different page)

For example: "https://www.jqueryscript.net/images/Animated-Firefly-Effect.jpg" does not work...
But "https://images.pexels.com/photos/127073/pexels-photo-127073.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" does...

What to do here?

Hi Team,

Great job for the responsive crop feature, but selection area is not working in the mobile devices.

I want to crop by mobile, but it is unable to drag the selection area.

Please suggest and reply me ASAP.

Kind Regards

Doesn't show a default crop area in a modal window. In common page is working fine.

This appeared for me after loading 2-3 images in a row.
Init the cropper tool on the first image using (image is not a 1:1 square but close)
$('#cropArea').rcrop({minSize: [100, 100], preserveAspectRatio: true, grid: true});
now load another picture into memory (16:9) then another (16:9), now check the crop area and you will find its no longer a 1:1 aspect ratio.
It did seem to retain the 1:1 for the first and second image for me but upon loading the third in the aspect seems to have reset itself and now maintains the aspect of the image and not the one set in code.