Home / GitHub Page

Web Clipper Screenshot function is buggy

When I make a screenshot, the image in Joplin reproduce a smaller portion of the actual screenshot. For example, from this page here
I selected this
image
and I obtained this:
7999dc27623dab8e90a1668cf9da942d
Note that the problem doesn’t lie in visualization because I saved the image from Joplin and it’s wrong anyway.

What browser?

What’s the zoom level on the page? Is it 100% or something else?

  • Windows 10 1903
  • Google Chrome 75.0.3770.80 (64 bit)
  • 100% zoom level
  • ad-block disabled
  • Web-Clipper ver. 1.0.14
  • Joplin ver. 1.0.158

I tried to install Chrome and Joplin in Windows Sandbox (actually a fresh VM) and the problem is still there.

I can’t replicate it but I think it might be due to this bug:

https://bugs.chromium.org/p/chromium/issues/detail?id=415297

Do you have a high resolution screen, like 4K?

I have a notebook with Full-HD screen with Windows default scaling to 150%.


I’ve just tried to set scaling to 100% in Windows Setting and now it works well, even if screenshot is a bit blurry, it has low resolution.

But I can’t keep these settings. Text in Windows and apps is too small.

So the problem is in Chrome, right?

It seems to be a Chrome bug indeed, but maybe we can go around it by detecting the screen characteristics and getting the clipper to scale the screenshot. Did you try in Firefox by any chance?

I’ve just installed Firefox and Joplin in a fresh Windows 10 1903 VM. Even if scaling was set to 125%, the screenshot is not cropped. However, it still is low-resolution. So the problem of low-resolution (or blurry effect I don’t know) is always present. To compare, see side by side the screenshot made by Joplin and the screenshot made by Windows:


The image is not blurry, it’s just lower resolution. I guess Windows capture the image at 150% while Firefox just captures it at 100%. There’s not much we can do here as we can only work with what the browser API provide. Perhaps one way to get a higher resolution image would be to scale your browser to 150% too.

Do you have the “Advanced Scaling settings” on your laptop?

And does it work any better if you enable it?

Thanks for answer. Unfortunately “Let Windows solve scaling problem” is already enabled.

Just to give you some information, I tried a couple of way to take screenshots so that we can compare with Joplin. All of these with 125% scaling (like before)

  1. Screenshot with Joplin in Firefox

  2. Screenshot with Joplin in Chrome

  3. Screenshot in Firefox with Firefox Screenshot

  4. Screenshot in Chrome with devtools

  5. Screenshot in Chrome with Lightshot extension

As you can see, there are difference in cropping and resolution. In Chrome devtool and another extension have no problem

Setting my desktop at 125% I can’t replicate this, so I guess a Full-HD screen is needed but since I don’t have one, I won’t be able to fix this at the moment.

I’m having the same on a 4k monitor with “Advanced scaling” set to 150%.