-
-
Notifications
You must be signed in to change notification settings - Fork 5.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Downscale pasted PNG images based on metadata #29123
Conversation
Dependency is removed 🎉. I'm surprised how little code actually came out in the end. ~18 lines replacing over 100 lines from the dependency. |
This is ready. I checked the dropzone-attached images, they always render at 120x120, so downscaling them does not really make sense. |
Various refactors done, still ready for review. |
web_src/js/utils/image.js
Outdated
export async function pngInfo(blob) { | ||
let width = 0; | ||
let dppx = 1; | ||
if (blob.type !== 'image/png') return {width, dppx}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
A nit, TBH, I never saw a function returns a valid "struct" when it can't parse something, the literal meaning of "{width: 0}" for a non-png image seems confusing.
Maybe it should throw an exception or return null?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah this is something I thought about changing as well. Previously it was called imageInfo
and in such a case it made sense to fall back to default values for non-png. I will at least move the type check out of the function, not sure about throwing, thought.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I renamed it back to imageInfo
as I could see it being extended with other types like webp oder jpg later.
I disagree about returning null or throwing, it would complicate the call site of the function unecessary, and right now because we always return a object the call site can stay compact and tidy.
Also I think it's good to have a static return structure which will make it a breeze to convert into Typescript later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I disagree about returning null or throwing, it would complicate the call site of the function unecessary, and right now because we always return a object the call site can stay compact and tidy.
Well, I have never seen a widely-used framework does so. (not a blocker, just my thought)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
One example would be various React APIs where it's commonplace to return objects that are meant to be destructured. For example from https://docs.dndkit.com/api-documentation/draggable/usedraggable:
const {attributes, listeners, setNodeRef, transform} = useDraggable();
The object is just there to represent multiple named return values. Such functions should of course never return non-objects.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's different. I guess useDraggable
never parses something, and it never fails.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These use*
functions can also fail, but the point is they would throw instead of returning a non-object value (which would lead to a destructuring error at the caller).
I checked what is needed to return null in our case and its at least +6 lines for no real benefit.
Some images like MacOS screenshots contain pHYs data which we can use to downscale uploaded images so they render in the same dppx ratio in which they were taken.
Some images like MacOS screenshots contain [pHYs](http://www.libpng.org/pub/png/book/chapter11.html#png.ch11.div.8) data which we can use to downscale uploaded images so they render in the same dppx ratio in which they were taken. Before: <img width="584" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/50979e3a-5d5a-40dc-a0a4-36eb6e28f14a"> After: <img width="329" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/0690902a-f2fe-4c6b-97b3-6fdd67c21bad">
Some images like MacOS screenshots contain [pHYs](http://www.libpng.org/pub/png/book/chapter11.html#png.ch11.div.8) data which we can use to downscale uploaded images so they render in the same dppx ratio in which they were taken. Before: <img width="584" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/50979e3a-5d5a-40dc-a0a4-36eb6e28f14a"> After: <img width="329" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/0690902a-f2fe-4c6b-97b3-6fdd67c21bad">
Some images like MacOS screenshots contain [pHYs](http://www.libpng.org/pub/png/book/chapter11.html#png.ch11.div.8) data which we can use to downscale uploaded images so they render in the same dppx ratio in which they were taken. Before: <img width="584" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/50979e3a-5d5a-40dc-a0a4-36eb6e28f14a"> After: <img width="329" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/0690902a-f2fe-4c6b-97b3-6fdd67c21bad">
Some images like MacOS screenshots contain [pHYs](http://www.libpng.org/pub/png/book/chapter11.html#png.ch11.div.8) data which we can use to downscale uploaded images so they render in the same dppx ratio in which they were taken. Before: <img width="584" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/50979e3a-5d5a-40dc-a0a4-36eb6e28f14a"> After: <img width="329" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/0690902a-f2fe-4c6b-97b3-6fdd67c21bad">
Some images like MacOS screenshots contain [pHYs](http://www.libpng.org/pub/png/book/chapter11.html#png.ch11.div.8) data which we can use to downscale uploaded images so they render in the same dppx ratio in which they were taken. Before: <img width="584" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/50979e3a-5d5a-40dc-a0a4-36eb6e28f14a"> After: <img width="329" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/0690902a-f2fe-4c6b-97b3-6fdd67c21bad"> (cherry picked from commit 5e72526)
Automatically locked because of our CONTRIBUTING guidelines |
Some images like MacOS screenshots contain pHYs data which we can use to downscale uploaded images so they render in the same dppx ratio in which they were taken.
Before:
After: