javascript - How to take a screenshot of HTML Node with clip-path CSS property? (html2canvas not working for this) - Stack Overf

admin管理员组

文章数量:1425924

I'm using html2canvas library to take a screenshot of a HTML Node, but it simply doesnt recognize the clip-path property.

(i'm getting cross-origin issue trying to replicate the error here, so i made a jsfiddle)

/

<div id="root">
  <div class="star-mask">
    <div class="square"></div>
  </div>
</div>

<button onclick="capture()">Capture</button>

.star-mask {
  clip-path: path('m55,237 74-228 74,228L9,96h240');  
}

.square {
  background-color: red;
  width: 200px;
  height: 150px
}

function capture() {
  let node = document.querySelector('.star-mask')


  html2canvas(node)
    .then(canvas => {
      document.querySelector('#root').appendChild(canvas)
    })
}

Every time i click on "Capture" the canvas screenshot pletely ignores the clip-path of the star shape and display only the red square. I already tried html2image library and got the same issue.

There is some other solution that can solve this issue? Or is currently impossible to capture the clip-path property using JavaScript?

I'm using html2canvas library to take a screenshot of a HTML Node, but it simply doesnt recognize the clip-path property.

(i'm getting cross-origin issue trying to replicate the error here, so i made a jsfiddle)

https://jsfiddle/1Ly9wn6k/

<div id="root">
  <div class="star-mask">
    <div class="square"></div>
  </div>
</div>

<button onclick="capture()">Capture</button>

.star-mask {
  clip-path: path('m55,237 74-228 74,228L9,96h240');  
}

.square {
  background-color: red;
  width: 200px;
  height: 150px
}

function capture() {
  let node = document.querySelector('.star-mask')


  html2canvas(node)
    .then(canvas => {
      document.querySelector('#root').appendChild(canvas)
    })
}

Every time i click on "Capture" the canvas screenshot pletely ignores the clip-path of the star shape and display only the red square. I already tried html2image library and got the same issue.

There is some other solution that can solve this issue? Or is currently impossible to capture the clip-path property using JavaScript?

• javascript
• html
• css
• html2canvas

Share Improve this question Follow asked Apr 27, 2021 at 18:31 JoãoJoão 80111 gold badge99 silver badges3333 bronze badges 1

• 1 This is currently not implemented yet so there is nothing you can do now to fix that with that library. Here is the issue. – johannchopin Commented Apr 30, 2021 at 11:20

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5 +100

Using dom-to-image works for me

function capture() {
    let node = document.querySelector('.star-mask')

domtoimage.toPng(node)
    .then(dataUrl => {
      var img = new Image();
      img.src = dataUrl;
      document.body.appendChild(img);
    })
}

.star-mask {
  clip-path: path('m55,237 74-228 74,228L9,96h240');  
}

.square {
  background-color: red;
  width: 200px;
  height: 150px
}

<script src="https://cdnjs.cloudflare./ajax/libs/dom-to-image/2.6.0/dom-to-image.js"></script>
<div id="root">
  <div class="star-mask">
    <div class="square"></div>
  </div>
</div>

<button onclick="capture()">Capture</button>

Check out html-to-image

var node = document.getElementById('my-node');

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);
  });

(from https://www.npmjs./package/html-to-image).

本文标签：