search

joaomoreno / gifcap

Capture your screen to a GIF in your browser
https://gifcap.dev
GNU General Public License v3.0
1.39k stars 97 forks source link

Better support for HiDPI #25

Closed joaomoreno closed 3 years ago

joaomoreno commented 4 years ago

GIFs are huge in pixel size, in HiDPI screens.

joaomoreno commented 4 years ago

Fixed by https://github.com/joaomoreno/gifcap/commit/748c16efa1c434f5e30129df1b1ba6388a602535

@Tyriar Can you give it a try?

Tyriar commented 4 years ago

Seems a little blurry

Screen Shot 2020-04-19 at 1 57 04 PM

Does tweaking https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled make it any better?

joaomoreno commented 4 years ago

That seems a LOT blurry. Did you zoom in on that screenshot? Can you show me a screenshot at 1x?

I believe imageSmoothingEnabled affects scaling up. We are scaling down.

Tyriar commented 4 years ago

I zoomed in to see the pixels yes, but the text isn't very readable at its normal size was the point I was trying to make. See "File", "gif" etc, where letters are very blurred together.

Tyriar commented 4 years ago

Here's regular res:

Screen Shot 2020-04-20 at 5 59 51 AM

The fact I can see the pixels on a macbook display means something is wrong.

joaomoreno commented 4 years ago

This is indeed awful. Not really sure what we can do here, though. I'll revert this change for now.

joaomoreno commented 4 years ago

Alright, I got it. We shouldn't really scale this down, but simply use a better GIF encoder. Ran a small experiment and LiceCap is able to do a 6x file size reduction on a similar animation. They don't scale it down, otherwise it would also look blurry. We should benefit from frame similarity, a technique employed both from gifsicle and gifenc. Additionally, gifsicle has lossy encoding features which should help further more. Merging this into https://github.com/joaomoreno/gifcap/issues/6

joaomoreno commented 4 years ago

Reopening this! We should indeed scale the GIF down and just use a better scaling function than what the browser gives us. Luckily, https://github.com/joaomoreno/gifcap/issues/6 is in master and we can use gifsicle's resizing utils here.

joaomoreno commented 4 years ago

I was wrong again! Let's keep the original size. https://github.com/joaomoreno/gifcap/issues/6 will bring us everything we need.

joaomoreno commented 4 years ago

After discussing this again with @Tyriar, we figured out that integer devicePixelRatio values are actually valuable to scale down!

connor4312 commented 4 years ago

One more fun edge case--in my setup my primary monitor is a 4K display with a 1.5 DPR, and I have a second (portrait-oriented) monitor that's standard 1080p. If I record the 4K display while the browser is on the 1080p monitor, the resulting gif is tiny:

recording

joaomoreno commented 4 years ago

One more fun edge case--in my setup my primary monitor is a 4K display with a 1.5 DPR, and I have a second (portrait-oriented) monitor that's standard 1080p. If I record the 4K display while the browser is on the 1080p monitor, the resulting gif is tiny:

Since gifcap isn't scaling everything yet... I say that's a bug on that browser for failure to adopt DPI change in the screensharing API.

joaomoreno commented 3 years ago

I believe fixed by https://github.com/joaomoreno/gifcap/pull/43