1182538 - Fullpage screenshots taken with the console use an inferior image scaling algorithm, compared to normal screenshots.

Status: NEW

(DevTools :: Shared Components, defect)

Description

[NoName]

Attachment: sample.png

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:39.0) Gecko/20100101 Firefox/39.0
Build ID: 20150630154324

Steps to reproduce:

I use a website that makes use of scaling down pictures to 90x90 squares in the browser.
The website can be up to 7000px tall, so I use the Firefox console to take a fullpage screenshot of the website, instead of taking a screenshot using printscreen.
To do this, I press Shift+F2 to open the console. Then I enter "screenshot --fullpage" to save a fullpage screenshot of the website on my computer.


The website I use is http://brantsteele.net/hungergames/personal.php but I recommend reproducing on another website that scaled down pictures, since this one requires knowledge of the website and entering quite a bunch of stuff until you get to see the images.


Actual results:

When viewing the produced fullpage screenshot, the scaled down images look pixelated and "ugly".
This is not supposed to happen, and does not happen when viewing the website normally or taking a normal screenshot.


Expected results:

When taking a fullpage screenshot using the console, the images on a website should be scaled in the same way as when viewing the website normally.
Scaled down images should be scaled down smoothly and not have "pixelation and sharp edges".
See attached file for comparison.

Comment 1

[NoName]

I have found a "reduced testcase" to easily reproduce the bug.
Step 1: Go to http://htmledit.squarefree.com/
Step 2: enter the following line of HTML:
<img src='https://upload.wikimedia.org/wikipedia/commons/1/1b/RCA_Indian_Head_test_pattern.JPG' height='90' width='90'/>

You will now see a scaled down image on the bottom of the page. It should be scaled down correctly, using a scaling algorithm that makes the image appear as smooth and not pixelated. This is how it should be.
Now Press Shift+F2 and enter "screenshot --fullpage" and compare the produced image to the website. The scaled down image in the fullpage screenshot will be pixelated and look very different, compared to how it looks like on the actual website.

Comment 2

[NoName]

Attachment: reduced testcase.png

Comment 3

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Johan, is this behavior fixed by your patch for Retina screens in bug 970618, or is this a separate issue?

This one could be specific to Windows.

Comment 4

[Johan K. Jensen :johankj]

No, it is not fixed.
I am running on a Retina MacBook Pro. The screenshot-command before bug 970618 took non-retina screenshots, after it took retina screenshot on retina-enabled devices. In either case, the resized picture doesn’t look as sharp as when presented to the user. I’m assuming it’s because we’re drawing the page to a canvas.

Comment 5

[Johan K. Jensen :johankj]

Attachment: before_bug_970618.png

Comment 6

[Johan K. Jensen :johankj]

Attachment: after_bug_970618.png

Comment 7

[Johan K. Jensen :johankj]

Attachment: independent.png

Comment 8

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Thanks for confirming the issue, Johan!

Comment 9

[NoName]

3 years later, bug still present in the current version.

Comment 10

[Acid Chicken (硫酸鶏)]

Firefox Screenshots also has this bug.