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
Add support for fractional width and height values #90
Conversation
Should work now, can be merged if you like it :) |
const { clientWidth, clientHeight } = $image; | ||
const { width, height } = $image.getClientRects()[0]; | ||
const clientWidth = Math.ceil(width); | ||
const clientHeight = Math.ceil(height); |
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.
clientWidth and clientHeight stay, but are now a ceiled version of the "real" dimensions of the image.
@@ -124,8 +124,12 @@ class Freezeframe { | |||
private _process(freeze: Freeze): Promise<Freeze> { | |||
return new Promise((resolve) => { | |||
const { $canvas, $image, $container } = freeze; | |||
const { clientWidth, clientHeight } = $image; | |||
const { width, height } = $image.getClientRects()[0]; |
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.
new way to read the computed dimensions of the image that supports floating point numbers.
|
||
$canvas.style.width = `${width}px`; | ||
$canvas.style.height = `${height}px`; |
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.
use inline-styles as an override to make sure the dimensions match the image
|
||
$canvas.style.width = `${width}px`; | ||
$canvas.style.height = `${height}px`; | ||
$canvas.setAttribute('width', clientWidth.toString()); | ||
$canvas.setAttribute('height', clientHeight.toString()); |
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.
canvas keeps using clientWidth and clientHeight as it requires its dimensions to be integers (or it doesn't draw the imag at all)
thank you @Mitsunee! |
I just found the demo page on an article and noticed the image jumps a bit when pausing, so I decided to look into it and found that the way the width and height are read is what a property that only supports integers. With responsive widths it's common to have floating point numbers, so
getClientRects()
has a much cleaner result. Hope this helps, I'll definitely be trying this library if I ever have a gif somewhere (:Edit: just noticed this doesn't yet fully fix it on the 2nd example on the demo page, maybe inline-styles should be used to set the dimensions of the canvas?implemented and hopefully works now, also added explanations in the commit