Retrieve image dimensions of the loaded image

[luckydonald]

I couldn't find a way to get the size of the image from the cropper.

As I do the actual logic server side on a aberiatary image, and the croper working on a scaled down version, I don't have the information available of how big the image is, in term of with and height.

Therefore, having the information about 10px from the top and 50px wide on a image with unknown size isn't really helpful.

Right now I have to load the image twice once in cropper, once for myself, so I can grab and store those values:

    const img = new Image();
    img.src = img_url;
    const self = this;
    img.onload = function() {
      document.body.appendChild(img); // You can get the image sizes only after inserting it in body
      self.image_sizes = {width: img.width, height: img.height};
      document.body.removeChild(img);
   }

Apparently that information is available to cropper, as imageSize is a parameter for custom functions to set with setCoordinates, defaultPosition, defaultSize, defaultVisibleArea, defaultBoundaries, sizeRestrictionsAlgorithm, and so on.

However, there's no method to retrieve that image which is already loaded into the cropper at the time I press a crop button. I think that should be added to the return of getResult(), or at least any other way of querying it should be provided.

[Norserium]

@luckydonald, hello!

I don't understand. Do you crop the image on server-side? In this case you can get the image size on the server-side also.

Also the getResult method returns the following object:

{
    canvas: (...),
    "image": {
        "src": "https://images.pexels.com/photos/4218687/pexels-photo-4218687.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
        "width": 976,
        "height": 1300,
        "transforms": {
            "rotate": 0,
            "flip": {
                "horizontal": false,
                "vertical": false
            },
            "translateX": 0,
            "translateY": -0.08196721311474851,
            "scaleX": 0.3729508196721312,
            "scaleY": 0.3729508196721312
        }
    },
    "coordinates": {
        "width": 781,
        "height": 1040,
        "left": 195,
        "top": 208
    },
    "visibleArea": {
        "left": 0,
        "top": -0.2197802197802048,
        "width": 976,
        "height": 1300.4395604395604
    },
}

There are the image width and height.

[luckydonald]

Use case: I am actually have a pdf file server side. Some tool then spits out a png with a size in pixels I can't predict. The vue app loads that, allows to cut it and then the crop button does send x,y,w,h and original image w,h to the sever so it can calculate what that means for the PDF.

Ah, the documentation said Returns: The object: { coordinates, imageTransforms, visibleArea, canvas }

So image isn't documented.

[Norserium]

So ´image` isn't documented.

Indeed, but I fixed the documentation after your message. It was slightly outdated.

[Norserium]

@luckydonald, does it solve your problem?

[Norserium]

@luckydonald, any news?

[Norserium]

I close this issue. Feel free to reopen if you encounter this problem in the future.

[luckydonald]

@Norserium, yes, mentioning what I was looking for is now in the docs. Thanks!