Automatically apply scaling factor to images pasted from clipboard

Feature
1

I’m using a HiDPI display with a scaling factor of 150%. Everytime a I create a screenshot and paste it into Discourse, everything’s too large. I need to manually apply a scaling factor to the image to make it look alright.

Let’s assume I create a screenshot of the following box which has a size of 110x110px.

image

When I paste that screenshot (Ctrl+V) into the composer I get an image with a size of 167x167px.

image
![image|167x167](upload://fWfpRZXtBMVBXjcMTAPOwtG5bND.png)

Ideally I’d get a an image with the correct size without me having to remember the correct percentage to downscale the image (which is 66% in my case).

image
![image|167x167, 66%](upload://fWfpRZXtBMVBXjcMTAPOwtG5bND.png)

I see 2 options for that. If the scaling factor doesn’t equal 1 then:

  1. Automatically add the correct scaling factor to the image Markdown
    ![image|167x167, 66%](...)

or

  1. Add the correct scaling factor to the image toolbox in the preview window
    image

The scaling factor can be calculated in JavaScript:

Math.floor(100 / window.devicePixelRatio)
6 Likes
2

This is a great idea, I struggle with this all the time as well.

Thinking out loud, would this cause false positives if the user copy/pastes a non-screenshot image?

Also, re implementation, I don’t see why we can’t do both 1 and 2.

4 Likes
3

Yes, it will be a false positive when you paste a non-screenshot image. I wonder what gets inserted more often, screenshots or other images. :thinking:

1 Like
4

Not sure, I guess it depends on the user and kind of photos you post. Sometimes I copy an image on my phone and paste it on desktop, so there’s that scenario as well.

Either way, starting with option 2 would sidestep the false positives, it would just provide a nicer default alternative size in the preview.

1 Like
5

It looks like screenshot tools encode some information about DPI into the PNG files. e.g. if I upload a screenshot from my high-dpi macOS environment to https://www.metadata2go.com/, I see

SCR-20230913-pxzb
SCR-20230913-pxzb1258×254 4.19 KB

If I turn off HiDpi, then those metadata fields seem to disappear from the file.

Do you see something similar on Windows @gerhard? If so, maybe there’s a way for us to read it in JS and make a guess about the pixel density.

I also came across this gist which might be useful.

2 Likes
6

I’m looking into parsing the first few bytes of PNGs for Remote animated PNG lose their animation too, so we have multiple use cases for a hook here.

2 Likes
7

I’m using Spectacle on Linux and it doesn’t seem to add anything to the metadata.

The code from that gist returns false for a screenshot I created on my Linux system with a scale factor of 150%. The pHYs chunk of that image looks like this:

{ xDpu: 3780, yDpu: 3780, xDpi: 96, yDpi: 96, unit: 'meter' }
3 Likes