Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Pixel coords for the image crop

See original GitHub issue

Apparently the additional parameter pixelCrop of onChangeComplete is always undefined.

And also, is there any way to set the crop on pixel units? Instead of converting it from pixel units to percentage every time in order to use it?

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

zackifycommented, Aug 16, 2017

Doing this is really easy. Here’s how my component looks:

getBase64(file) {
    this.setState({ loading: true, file });

    let reader = new FileReader();
    reader.onload = () => {
      var image = new Image();
      image.src = reader.result;

      image.onload = () => {
          loading: false,
          image: reader.result,
          height: image.height,
          width: image.width,
    reader.onerror = error => console.log('Error: ', error);

Get the base64 of a file object, render it to an image, get the height and width. Then, pass the height and width to your cropper props, something like this:

          minWidth: 1920 / image.width * 100,
          minHeight: 350 / image.height * 100,
          maxWidth: 1920 / image.width * 100,
          maxHeight: 350 / image.height * 100,

Now you have percentages from pixels, for anyone else who needs it 😃

WaqqarSulemancommented, Feb 23, 2021

I used the natualHeight and naturalWidth img properties:

Getting naturalWidth and naturalHeight as 0, any idea why?

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to crop an image using x/y/r pixel coords? - Stack Overflow
I'm trying to develop some code to crop multiple areas within an image. The only info I have is the x/y pixel coordinates...
Read more >
Transformation - Basic Image Manipulation - CodinGame
Let's start with a very simple operation: cropping. Cropping is the action to cut a part of the image to reframe it. In...
Read more >
Using rasterio to crop image using pixel coordinates instead of ...
So, is there any way I can crop the worldview3 image using rasterio but using pixel coordinates instead of geographic coordinates so that...
Read more >
Crop images with ImageContainer - Squidpy - Read the Docs
This example shows how crop images from ... You can specify the crop coordinates in pixels (as int ) or in percentage...
Read more >
Module: Crop -
Left and right rectangle positions · Absolute: Specify these values as absolute pixel coordinates in the original image. For instance, you might enter...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found