0

Out of curiosity, when capturing the following table using html2canvas, why does MS Edge generate a ~2.5 times smaller image (in terms of byte array length) than Chrome does?

Is it due to different APIs provided by the browsers or implementation variations on the html2canvas library side.

Any help or guidance will be appreciated! Thanks!

<table>
<tbody>
    <tr data-row="0">
        <td data-col="0" data-row="0" data-corner-header="true">
        </td>
        ...
        <td data-col="7" data-row="0" data-col-header="6">
            <div>G</div>
        </td>
    </tr>
    <tr data-row="1">
        <td data-col="0" data-row="1" data-row-header="0">
            <div>1</div>
        </td>
        <td tabindex="0" data-row="1" data-col="1">1.00</td>
        ...
        <td data-row="1" data-col="7" editable="true"></td>
    </tr>
    ...
    <tr data-row="10">
        <td data-col="0" data-row="10" data-row-header="9">
            <div>10</div>
        </td>
        <td data-row="10" data-col="1" editable="true"></td>
        ...
        <td tabindex="0" data-row="10" data-col="7" title="1.00">1.00</td>
    </tr>
</tbody>

Codepen

https://codepen.io/tianyuan-chu/full/ReeGpj/

Screenshot

enter image description here

Luca Kiebel
  • 9,790
  • 7
  • 29
  • 44
Ryan Chu
  • 1,381
  • 13
  • 20
  • 2
    You tell us: what's the data in the arrays? (e.g. what kind of image data do they build? Does one of them make png data and the other jpg? etc) – Mike 'Pomax' Kamermans Oct 30 '18 at 23:45
  • 1
    What happened when you looked at the contents of each file with a hex-editor? – enhzflep Oct 30 '18 at 23:53
  • Thanks @Mike'Pomax'Kamermans, they are both png with the same quality params. But I get your point, the compression algorithm must be different. I will look into hex to see if I can find anything... – Ryan Chu Oct 31 '18 at 04:23
  • 1
    My point really was more about "what's the data they generate" more than "the compression algorithm". Un-data-URI them, and let's find out what the difference is by creating an [mcve]: throw out ALL that html except for a single paragraph with one short word. Is there still a difference? Good: presumably the data is now maybe a few hundred bytes, and comparing will be _much_ easier. – Mike 'Pomax' Kamermans Oct 31 '18 at 04:42
  • Might actually be a bit of both. Html2canvas will make Chrome use antialiasing rendering in your example. Would not make the 2.5 diff, but in Chrome, it makes text heavier. http://jsfiddle.net/dfwpvqmz/ – Kaiido Nov 01 '18 at 00:53

1 Answers1

2

If we see the documentation of HTML2Canvas then they had mentioned that,

The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page. It is heavily depend on browser

As every browser works little bit differently So byte array can be different on each browser.

You can make a test with other browsers too.

I also try it on FireFox and IE.

On IE the array length was 5118 and on FireFox the array length was 4230.

Reference:

Html2canvas

html2canvas

Deepak-MSFT
  • 10,379
  • 1
  • 12
  • 19
  • Thanks @Deepak-MSFT, I totally agree that every browser works differently. But the answer I am looking for is why this is the case and why the size varies so much (2.5 times the difference) between the two. So far the huge difference only applies to the table elements, and the others are very similar to each other. – Ryan Chu Oct 31 '18 at 07:22
  • 1
    You need to check and understand which code and logic internally used by HTML2Canvas. Then you can make a test with similar kind of sample code on different different browsers to check how that array is generated. it can give you the idea what exact thing cause the huge difference. Or you can ask the developers of HTML2Canvas. They had developed this library so that can give you the accurate answer that you want to know. – Deepak-MSFT Oct 31 '18 at 07:35