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)
- Resizing with "fit" mode leads to blurry images in some cases HOT 2
- invalid TIFF format: image dimensions are not specified HOT 6
- Support EPS files HOT 1
- "is not a video" error when trying to source PSD file HOT 2
- How to get width and height of original img? HOT 1
- Feature request: support using data urls as watermarkurl HOT 1
- Feature request: Gradient improvements HOT 5
- Text is illegible when a PDF has non-embedded CID TrueType and no character map HOT 4
- Feature Request: Option to limit max dimension of output image HOT 4
- Error: heifsave: image too large HOT 2
- Using imgproxy via Proxy for Amazon S3 HOT 3
- Option to report source image errors HOT 4
- Style transformation for SVG broken since 3.23 HOT 3
- Error: SVG detection does not work when it uses namespaces HOT 2
- Can't download source image: invalid JPEG format: missing SOF marker HOT 2
- ERROR png2vips: unable to read source source HOT 2
- Produces invalid SVG when namespaced attributes appear before namespace declaration HOT 1
- Support for external IDs when using S3 with assumed roles HOT 3
- Error: store of inconsistently typed value into Value HOT 1
- Requests to `imgproxy` randomly start timing out HOT 19
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.