Rectangle crop and results dimensions

[crazy8brown]

When using rectangle crop and I don't specify a result-image-size, the resulting rectangle is 200x200. If the crop area is truly a rectangle (w != h), this result includes whitespace.

My html:

<img-crop image="origImage" result-image="croppedImage" area-type="rectangle" chargement="'Loading'" result-image-quality="1.0" ></img-crop>

How can I force the component to use the crop rectangle dimensions instead? Shouldn't this be default mode for cropping a rectangle? Do I use the scaling property instead?

[crazy8brown]

A little bit more. I'm able to work around this because I know the specific width and height I want the resulting rectangle to be, and I can enforce the rectangle aspect ratio. However, I would think that the default "size" for a rectangle should be the rectangle w/h relative to the original image size.

[CrackerakiUA]

As far as i remember, default is square. Correct me if i am wrong.

[crazy8brown]

The default result-image-size is indeed a square (200x200). However, for a rectangular crop (area-type=rectangle) that isn't 200x200, you image will be padded or resized to fit into the 200x200 area. Let's say your rectangle is 200x100. The bottom half of your resulting image will be white.

I would think that by default, if the result-image-size attribute isn't specified for area-type= rectangle, you would automatically return an image that is relative to the original image. If the user specifies a result-image-size, the rectangular cropped area would be scaled appropriately. Let's say the original image is 2000x1000, and that scales to screen coordinates/image size of 200x100. I crop a rectangle that is 20x10 on the image. Without specifying the size, I'd expect that the resulting image would be 200x100 (Scaled relative to the original image size of 2000x1000). However, let's say I specified my result-image-size to w:250 h:125, then the cropped area would scale to fit those dimensions.

I think it's a strange behavior to conform a rectangle crop to 200x200 when you don't specify a result-image-size.

[laxu]

I agree that it's non-obvious behavior, you should end up with a picture relative to the size of the rectangle drawn. Being able to have the result image size be based on the source image would not be a bad idea either. So for example if you upload a very large image then you can crop a portion of it and still have a large image in the output.

[CrackerakiUA]

hmmm, that can be easly fixed, if anyone need it i could give instructions on how.

[br8kpoint]

@CrackerakiUA I would appreciate these instructions as I am currently running into this issue. thanks

[CrackerakiUA]

in this line https://github.com/CrackerakiUA/ngImgCropFullExtended/blob/master/source/js/classes/crop-host.js#L279
you have check if result img is arr or simple, before those check add check if it's rectangle and it's not aspect ratio to change the result.

[andresarslanian]

Just to add to @CrackerakiUA last post, I did the following and worked for me (I DIDN'T test it with circles, I'm just using rectangles and works like a charm).

The original code was:

               else {
                    var aspectRatio = areaWidth / areaHeight;
                    var resultHeight, resultWidth;

                    if (aspectRatio > 1) {
                        resultWidth = ris.w;
                        resultHeight = resultWidth / aspectRatio;
                    } else {
                        resultHeight = ris.h;
                        resultWidth = resultHeight * aspectRatio;
                    }

                    temp_ctx.drawImage(image,
                        x,
                        y,
                        areaWidth,
                        areaHeight,
                        0,
                        0,
                        Math.round(resultWidth),
                        Math.round(resultHeight));
                }

                if (resImgQuality !== null) {
                    retObj.dataURI = temp_canvas.toDataURL(resImgFormat, resImgQuality);
                } else {
                    retObj.dataURI = temp_canvas.toDataURL(resImgFormat);
                }

And this is my modified code:

              else {
                    var aspectRatio = areaWidth / areaHeight;
                    var resultHeight, resultWidth;

                    if (aspectRatio > 1) {
                        resultWidth = ris.w;
                        resultHeight = resultWidth / aspectRatio;
                    } else {
                        resultHeight = ris.h;
                        resultWidth = resultHeight * aspectRatio;
                    }

                    // modified 
                    temp_canvas.width = resultWidth;
                    temp_canvas.height = resultHeight;

                    temp_ctx.drawImage(image,
                        x,
                        y,
                        areaWidth,
                        areaHeight,
                        0,
                        0,
                        Math.round(resultWidth),
                        Math.round(resultHeight));
                }

                if (resImgQuality !== null) {
                    retObj.dataURI = temp_canvas.toDataURL(resImgFormat, resImgQuality);
                } else {
                    retObj.dataURI = temp_canvas.toDataURL(resImgFormat);
                }

I hope it helps...

cheers!

[alex88]

@andresarslanian's version works perfectly, however it stil generates the image of 200 pixel in size

[alex88]

Nvm, if you use result-image-size="max" where max is a scope variable having max as string value it uses the full image resolution

[FaiyazMdAbdul]

@CrackerakiUA @alex88 setting result-image-size="max" causes the browser to freeze for images over 10mb and setting to "selection" renders very poor quality .

[CrackerakiUA]

image 10mb and langer you can resize to smaller inside cropper and send to server original image and crop it there with options from cropper. On all my project i have added resize down to 1920/1080 each max before opening the cropper and everything works smooth.

[ProdigyView]

This fix works for me too, the white space is gone. Why hasn't this been merged in yet?

[CrackerakiUA]

Need to give some time to add it as feature.

[rickerd]

This repo is dead.
Please move to the other project:
https://github.com/CrackerakiUA/ui-cropper