Comments (4)
Hey @dunklesToast!
I believe, the fp
gravity type is what you are looking for
from imgproxy.
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
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
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.
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.
oh yea that works. thanks a lot!
from imgproxy.
Related Issues (20)
- Add option to set tags to prometheus metrics
- Support for S3 client side encryption? HOT 1
- Option to set a path to log file? HOT 3
- Documentation: Server requirements/recomendations HOT 2
- Image proccessing malfunction HOT 3
- Issues in conversion of SVG to PNG HOT 3
- invalid source on mp4 when using video thumbnail extraction HOT 2
- Promethues exporter HOT 3
- Can't download source image: Can't allocate input format context: Server returned 400 Bad Request HOT 2
- Link to Documentation is down HOT 1
- Feature request: add support for APNG animated images HOT 3
- Monochrome thumbnails from latest release HOT 13
- There is an error in the image file name that contains the '@' character. HOT 1
- Feature request: animated AVIF HOT 4
- Will chrome automatically convert webp to avif? HOT 2
- GIF: 250 frames gifs exceed 30s processing limit enforced by CDN HOT 5
- Feature request: Video thumbnail tile behaviour HOT 1
- Provide a more detailed error message why local:// is not available when IMGPROXY_LOCAL_FILESYSTEM_ROOT is not set
- GIF gint is invalid or out of range HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from imgproxy.