Skip to content

toPixelData pixel count and toJpeg pixel count should match #276

@KalpeshPopat

Description

@KalpeshPopat

Expected Behavior

toPixelData pixel count and toJpeg pixel count should match

Current Behavior

toPixelData is using size of node without factoring the pixelratio resulting in incorrect extraction of image data from the canvas

This is resulting in the pixels data that doesn't match the image rendered by the canvas

Possible Solution

In the function toPixelData also incorporate the pixel ratio as you have done in toCanvas function

Steps To Reproduce

  1. create an html of 170px by 350 px
  2. render the html as raw pixels using toPixelData
  3. render the html as jpeg using toJpeg
  4. compare the pixel count of step 2 and 3, it won't match. (fastest way to check)
  5. another way to check is to print the raw pixel, the image rendered doesn't match

Additional Context

I am using this utility to convert the pos receipt html content to an image and then printing it out with a thermal printer

I implemented following work around to get around the bug:
used:
called toCanvas and then extracted the pixels from the context.

I cannot provide difference image since the pixels are directly rasterised and sent to thermal printer, however the pixel count check is sufficient to validate the problem

Your Environment

  • html-to-image: [e.g. 0.1.0]
  • OS: [e.g. macOS Sierra 10.12.3]
  • Browser: [e.g. chrome 78.0.3904.108]

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions