Fork me on GitHub

Screenshot Button
<screenshot-button></screenshot-button>

  // Add to your page

  <script type="module" src="https://grispiapp.github.io/screenshot-button-web-component/screenshot-button.js"></script>

  // Declarative usage

  <screenshot-button></screenshot-button>

  // Programmatic usage

  const screenshotButton = document.querySelector('screenshot-button');
  screenshotButton.takeScreenshot()
    .then( (blob) => imgEl.src = URL.createObjectURL(blob) )

All attributes are optional.

Note that the button has a screenshot-button class.
Attribute Default Description 
text
 Take screenshot The button's text. 
use-computed-style
 non-existent Regardless of the value, if this attribute exists computed style of <screenshot-button> is applied to the button.

If the value is remove then the custom element's class and style attributes are removed after computed style is applied to the button.
This is useful when you only want the style on the button but not the enclosing <screenshot-button> tag. 
timeout
 500 Duration in ms that a screenshot is taken after screen capture is started. 
preview-target
 Empty A query selector that selects an HTMLImageElement (<img> tag) 
 
preview-scale
 0.5 Number to scale the preview target img element. Sets height & width as img attribute.

Demo

  <screenshot-button class="custom-button" style="color: magenta; padding: 5px;" use-computed-style="remove" preview-target=".prev" preview-scale="0.2"></screenshot-button>

  .custom-button {
    background: #bababa;
    font-family: monospace;
    cursor: pointer;
    border: 1px solid lightcoral;
  }

preview preview