search

bubkoo / html-to-image

✂️ Generates an image from a DOM node using HTML5 canvas and SVG.
MIT License
5.66k stars 524 forks source link

Fail to capture when specify link node as root #174

Closed azu closed 2 years ago

azu commented 3 years ago

html-to-image fail to capture following node.

<a id="test" href="https://example.com">LINK TEXT</a>

capture code:

var node = document.getElementById('test');

htmlToImage.toPng(node)
  .then(function (dataUrl) {
    var img = new Image();
    img.src = dataUrl;
    document.body.appendChild(img);
  })
  .catch(function (error) {
    console.error('oops, something went wrong!', error);
  });

I've created failed test case:

📝 Current test implement always wrap target node with div, It will avoid this bug.

Expected Behavior

Capture Link node

Current Behavior

Fail to capture and throw an error.

    Failed: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
    TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
        at px (src/util.js:5:3256)
        at Object.getNodeWidth (src/util.js:5:3474)
        at getImageSize (src/index.js:2:7131)
        at src/index.js:2:7793
        at step (src/index.js:2:5711)
        at Object.next (src/index.js:2:2579)
        at src/index.js:2:1679
        at <Jasmine>
        at __awaiter (src/index.js:2:848)
        at toSvg (src/index.js:2:7593)

Possible Solution

I do not know correct solution.

I found a workaround to use node.getBoundingClientRect. When set width and height, we can avoid this error.

  const rect = element.getBoundingClientRect();
  return htmlToImage.toJpeg(element, {
    width: rect.width,
    height: rect.height,
  });

Maybe this workaround related to https://github.com/bubkoo/html-to-image/blob/c328ce865e231ba2515ff51b78a42b38ef6c3add/src/index.ts#L16-L18

Steps To Reproduce

  1. capture <a> node as root

See reproduce test case

Additional Context

Your Environment

vivcat[bot] commented 3 years ago

👋 @azu

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

vivcat[bot] commented 3 years ago

Hiya! This issue has gone quiet. Spooky quiet. 👻 We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open! As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request.

Thanks for being a part of the Antv community! 💪💯

vivcat[bot] commented 2 years ago

Hey again! It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Thanks again for being part of the Antv community! 💪💯

azu commented 2 years ago

This issue is not resolved.

vivcat[bot] commented 1 year ago

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.