JSFiddle - React, Tailwind, and code Playground

by Marc Brooks

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>JavaScript example</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ag-grid-community.min.js"></script>
    <style media="only screen">
      html,
      body {
        height: 100%;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
        padding: 16px;
        overflow: auto;
        background-color: transparent;
      }

      html {
        position: absolute;
        top: 0;
        left: 0;
        padding: 0;
        overflow: auto;
      }
    </style>
  </head>
  
  <body>
    <button id="saveImage">Save image</button>
    <div
      id="wrapper"
      style="width: 500px; height: 500px; background-color: blue"
    >
      <div
      id="element"
      style="width: 100px; height: 100px; background-color: green">
      </div>
    </div>   
  </body>
</html>

JavaScript

const exportBlobAsPng = (blob) => {
  const filename = "image.png";
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
};

const adjustClone = (node, clone, after) => {
  if (!after && clone.id === 'element') {
    clone.style.transform = 'translateY(100px)';
  }
  return clone;                   
}

const screenshotDefaultOptions = (element) => ({
  //copyDefaultStyles: false, /* this breaks the transform being honored :( */
  width: element.getBoundingClientRect().width,
  height: element.getBoundingClientRect().height,
  adjustClonedNode: adjustClone,
});

const exportAsPng = async () => {
  const wrapper = document.getElementById('wrapper');
  
  domtoimage
    .toBlob(wrapper, screenshotDefaultOptions(wrapper))
    .then((blob) => exportBlobAsPng(blob));
};

const saveImageButton = document.getElementById('saveImage')
saveImageButton.addEventListener("click", exportAsPng);

(function (global) {
    'use strict';

    const util = newUtil();
    const inliner = newInliner();
    const fontFaces = newFontFaces();
    const images = newImages();

    // Default impl options
    const defaultOptions = {
        // Default is to copy default styles of elements
        copyDefaultStyles: true,
        // Default is to fail on error, no placeholder
        imagePlaceholder: undefined,
        // Default cache bust is false, it will use the cache
        cacheBust: false,
        // Use (existing) authentication credentials for external URIs (CORS requests)
        useCredentials: false,
        // Default resolve timeout
        httpTimeout: 30000,
        // Style computation cache tag rules (options are strict, relaxed)
        styleCaching: 'strict',
        // Default cors config is to request the image address directly
        corsImg: undefined,
        // Callback for adjustClonedNode...