GithubHelp home page GithubHelp logo

Comments (4)

DarthSim avatar DarthSim commented on May 26, 2024

Hey @dunklesToast!

I believe, the fp gravity type is what you are looking for

from imgproxy.

dunklesToast avatar dunklesToast commented on May 26, 2024

Hey @DarthSim

Thanks for the prompt reply - I actually fiddled around with fp but seems that i cannot use it due to this

that define the coordinates of the center of the resulting image

Just to give some more context what I am trying to do:

We're using react-image-crop in our frontend to get a cropping area of images. This package outputs the selected crop in either pixels or percentages and uses the top left (northwest) as origin.
The output of the cropper can look something like this:

{
    "unit": "%",
    "x": 33,
    "y": 0,
    "width": 66,
    "height": 50
}

The according selection would be this
image

With the "normal" gravity options supporting relative values, I could easily do something like crop:0.66:0.5/g:nowe:0.33:0.
I've validated this approach by using absolute values as I know the proportions of this example image: Using crop:0.66:0.50/g:nowe:66:0 (66px as the image is 200px wide and 33% of that is 66) results in the correctly cropped image
public

Since fp uses the center of the already cropped image, I'd need to do some calculations based on the images width and the cropped center point to the calculate the correct fp values where I am not currently sure how to it - I'll play around with that a bit, but if you have any ideas or suggestions let me know. IMO having gravity support relative values as well would be the easiest as it allows to define the origin but I'll try using. fp.

from imgproxy.

DarthSim avatar DarthSim commented on May 26, 2024

If all the coordinates returned by react-image-crop are relative to the image dimensions, then the fp coordinates will be (x + width/2) / 100 and (y + height/2) / 100

from imgproxy.

dunklesToast avatar dunklesToast commented on May 26, 2024

oh yea that works. thanks a lot!

from imgproxy.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.