JSFiddle - React, Tailwind, and code Playground

by Evan Chavez

HTML

<input type="button" id="btn" value="Create" />
<br>
<br>
<div id="my-node">
  <textarea>Change this if you want and take the picture</textarea>
</div>
<div id="here-appear-theimages">
  <p>
    Here the images will be appended when you click the button
  </p>
</div>

JavaScript

/*! dom-to-image 03-02-2016 */ ! function(a) {
  "use strict";

  function b(a, b) {
    return b = b || {}, Promise.resolve(a).then(function(a) {
      return e(a, b.filter)
    }).then(f).then(g).then(function(a) {
      return b.bgcolor && (a.style.backgroundColor = b.bgcolor), a
    }).then(function(b) {
      return h(b, a.scrollWidth, a.scrollHeight)
    })
  }

  function c(a, b) {
    return i(a, b || {}).then(function(a) {
      return a.toDataURL()
    })
  }

  function d(a, b) {
    return i(a, b || {}).then(n.canvasToBlob)
  }

  function e(b, c) {
    function d(a) {
      return a instanceof HTMLCanvasElement ? n.makeImage(a.toDataURL()) : a.cloneNode(!1)
    }

    function f(a, b, c) {
      function d(a, b, c) {
        var d = Promise.resolve();
        return b.forEach(function(b) {
          d = d.then(function() {
            return e(b, c)
          }).then(function(b) {
            b && a.appendChild(b)
          })
        }), d
      }
      var f = a.childNodes;
      return 0 === f.length ? Promise.resolve(b) : d(b, n.asArray(f), c).then(function() {
        return b
      })
    }

    function g(b, c) {
      function d() {
        function d(a, b) {
          function c(a, b) {
            n.asArray(a).forEach(function(c) {
              b.setProperty(c, a.getPropertyValue(c), a.getPropertyPriority(c))
            })
          }
          a.cssText ? b.cssText = a.cssText : c(a, b)
        }
        d(a.window.getComputedStyle(b), c.style)
      }

      function e() {
        function d(d) {
          function e(b, c, d) {
            function e(a) {
              var b = a.getPropertyValue("content");
              return a.cssText + " content: " + b + ";"
            }

            function f(a) {
              function b(b) {
                return b + ": " + a.getPropertyValue(b) + (a.getPropertyPriority(b) ? " !important" : "")
              }
              return n.asArray(a).map(b).join("; ") + ";"
            }
           ...