Qingran-Gen/chenhai-ui/public/lib/dom2img/dom-to-image.js

(function (global) {
  "use strict";

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

  // Default impl options
  var defaultOptions = {
    // Default is to fail on error, no placeholder
    imagePlaceholder: undefined,
    // Default cache bust is false, it will use the cache
    cacheBust: false,
  };

  var domtoimage = {
    toSvg: toSvg,
    toPng: toPng,
    toJpeg: toJpeg,
    toBlob: toBlob,
    toPixelData: toPixelData,
    impl: {
      fontFaces: fontFaces,
      images: images,
      util: util,
      inliner: inliner,
      options: {},
    },
  };

  global.domtoimage = domtoimage;

  /**
     * @param {Node} node - The DOM Node object to render
     * @param {Object} options - Rendering options
     * @param {Function} options.filter - Should return true if passed node should be included in the output
     *          (excluding node means excluding it's children as well). Not called on the root node.
     * @param {String} options.bgcolor - color for the background, any valid CSS color value.
     * @param {Number} options.width - width to be applied to node before rendering.
     * @param {Number} options.height - height to be applied to node before rendering.
     * @param {Object} options.style - an object whose properties to be copied to node's style before rendering.
     * @param {Number} options.quality - a Number between 0 and 1 indicating image quality (applicable to JPEG only),
                defaults to 1.0.
     * @param {String} options.imagePlaceholder - dataURL to use as a placeholder for failed images, default behaviour is to fail fast on images we can't fetch
     * @param {Boolean} options.cacheBust - set to true to cache bust by appending the time to the request url
     * @return {Promise} - A promise that is fulfilled with a SVG image data URL
     * */
  function toSvg(node, options) {
    options = options || {};
    copyOptions(options);
    return Promise.resolve(node)
      .then(function (node) {
        return cloneNode(node, options.filter, true);
      })
      .then(embedFonts)
      .then(inlineImages)
      .then(applyOptions)
      .then(function (clone) {
        return makeSvgDataUri(clone, options.width || util.width(node), options.height || util.height(node));
      });

    function applyOptions(clone) {
      if (options.bgcolor) {
        clone.style.backgroundColor = options.bgcolor;
      }

      if (options.width) {
        clone.style.width = options.width + "px";
      }
      if (options.height) {
        clone.style.height = options.height + "px";
      }

      if (options.style) {
        Object.keys(options.style).forEach(function (property) {
          clone.style[property] = options.style[property];
        });
      }

      return clone;
    }
  }

  /**
   * @param {Node} node - The DOM Node object to render
   * @param {Object} options - Rendering options, @see {@link toSvg}
   * @return {Promise} - A promise that is fulfilled with a Uint8Array containing RGBA pixel data.
   * */
  function toPixelData(node, options) {
    return draw(node, options || {}).then(function (canvas) {
      return canvas.getContext("2d").getImageData(0, 0, util.width(node), util.height(node)).data;
    });
  }

  /**
   * @param {Node} node - The DOM Node object to render
   * @param {Object} options - Rendering options, @see {@link toSvg}
   * @return {Promise} - A promise that is fulfilled with a PNG image data URL
   * */
  function toPng(node, options) {
    return draw(node, options || {}).then(function (canvas) {
      return canvas.toDataURL();
    });
  }

  /**
   * @param {Node} node - The DOM Node object to render
   * @param {Object} options - Rendering options, @see {@link toSvg}
   * @return {Promise} - A promise that is fulfilled with a JPEG image data URL
   * */
  function toJpeg(node, options) {
    options = options || {};
    return draw(node, options).then(function (canvas) {
      return canvas.toDataURL("image/jpeg", options.quality || 1.0);
    });
  }

  /**
   * @param {Node} node - The DOM Node object to render
   * @param {Object} options - Rendering options, @see {@link toSvg}
   * @return {Promise} - A promise that is fulfilled with a PNG image blob
   * */
  function toBlob(node, options) {
    return draw(node, options || {}).then(util.canvasToBlob);
  }

  function copyOptions(options) {
    // Copy options to impl options for use in impl
    if (typeof options.imagePlaceholder === "undefined") {
      domtoimage.impl.options.imagePlaceholder = defaultOptions.imagePlaceholder;
    } else {
      domtoimage.impl.options.imagePlaceholder = options.imagePlaceholder;
    }

    if (typeof options.cacheBust === "undefined") {
      domtoimage.impl.options.cacheBust = defaultOptions.cacheBust;
    } else {
      domtoimage.impl.options.cacheBust = options.cacheBust;
    }
  }

  function draw(domNode, options) {
    return toSvg(domNode, options)
      .then(util.makeImage)
      .then(util.delay(100))
      .then(function (image) {
        var canvas = newCanvas(domNode);
        canvas.getContext("2d").drawImage(image, 0, 0);
        return canvas;
      });

    function newCanvas(domNode) {
      var canvas = document.createElement("canvas");
      canvas.width = options.width || util.width(domNode);
      canvas.height = options.height || util.height(domNode);

      if (options.bgcolor) {
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = options.bgcolor;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
      }

      return canvas;
    }
  }

  function cloneNode(node, filter, root) {
    if (!root && filter && !filter(node)) {
      return Promise.resolve();
    }

    return Promise.resolve(node)
      .then(makeNodeCopy)
      .then(function (clone) {
        return cloneChildren(node, clone, filter);
      })
      .then(function (clone) {
        return processClone(node, clone);
      });

    function makeNodeCopy(node) {
      if (node instanceof HTMLCanvasElement) {
        return util.makeImage(node.toDataURL());
      }
      return node.cloneNode(false);
    }

    function cloneChildren(original, clone, filter) {
      var children = original.childNodes;
      if (children.length === 0) {
        return Promise.resolve(clone);
      }

      return cloneChildrenInOrder(clone, util.asArray(children), filter).then(function () {
        return clone;
      });

      function cloneChildrenInOrder(parent, children, filter) {
        var done = Promise.resolve();
        children.forEach(function (child) {
          done = done
            .then(function () {
              return cloneNode(child, filter);
            })
            .then(function (childClone) {
              if (childClone) {
                parent.appendChild(childClone);
              }
            });
        });
        return done;
      }
    }

    function processClone(original, clone) {
      if (!(clone instanceof Element)) {
        return clone;
      }

      return Promise.resolve()
        .then(cloneStyle)
        .then(clonePseudoElements)
        .then(copyUserInput)
        .then(fixSvg)
        .then(function () {
          return clone;
        });

      function cloneStyle() {
        copyStyle(window.getComputedStyle(original), clone.style);

        function copyStyle(source, target) {
          if (source.cssText) {
            target.cssText = source.cssText;
          } else {
            copyProperties(source, target);
          }

          function copyProperties(source, target) {
            util.asArray(source).forEach(function (name) {
              target.setProperty(name, source.getPropertyValue(name), source.getPropertyPriority(name));
            });
          }
        }
      }

      function clonePseudoElements() {
        [":before", ":after"].forEach(function (element) {
          clonePseudoElement(element);
        });

        function clonePseudoElement(element) {
          var style = window.getComputedStyle(original, element);
          var content = style.getPropertyValue("content");

          if (content === "" || content === "none") {
            return;
          }

          var className = util.uid();
          clone.className = clone.className + " " + className;
          var styleElement = document.createElement("style");
          styleElement.appendChild(formatPseudoElementStyle(className, element, style));
          clone.appendChild(styleElement);

          function formatPseudoElementStyle(className, element, style) {
            var selector = "." + className + ":" + element;
            var cssText = style.cssText ? formatCssText(style) : formatCssProperties(style);
            return document.createTextNode(selector + "{" + cssText + "}");

            function formatCssText(style) {
              var content = style.getPropertyValue("content");
              return style.cssText + " content: " + content + ";";
            }

            function formatCssProperties(style) {
              return util.asArray(style).map(formatProperty).join("; ") + ";";

              function formatProperty(name) {
                return name + ": " + style.getPropertyValue(name) + (style.getPropertyPriority(name) ? " !important" : "");
              }
            }
          }
        }
      }

      function copyUserInput() {
        if (original instanceof HTMLTextAreaElement) {
          clone.innerHTML = original.value;
        }
        if (original instanceof HTMLInputElement) {
          clone.setAttribute("value", original.value);
        }
      }

      function fixSvg() {
        if (!(clone instanceof SVGElement)) {
          return;
        }
        clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");

        if (!(clone instanceof SVGRectElement)) {
          return;
        }
        ["width", "height"].forEach(function (attribute) {
          var value = clone.getAttribute(attribute);
          if (!value) {
            return;
          }

          clone.style.setProperty(attribute, value);
        });
      }
    }
  }

  function embedFonts(node) {
    return fontFaces.resolveAll().then(function (cssText) {
      var styleNode = document.createElement("style");
      node.appendChild(styleNode);
      styleNode.appendChild(document.createTextNode(cssText));
      return node;
    });
  }

  function inlineImages(node) {
    return images.inlineAll(node).then(function () {
      return node;
    });
  }

  function makeSvgDataUri(node, width, height) {
    return Promise.resolve(node)
      .then(function (node) {
        node.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
        return new XMLSerializer().serializeToString(node);
      })
      .then(util.escapeXhtml)
      .then(function (xhtml) {
        return '<foreignObject x="0" y="0" width="100%" height="100%">' + xhtml + "</foreignObject>";
      })
      .then(function (foreignObject) {
        return '<svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '">' + foreignObject + "</svg>";
      })
      .then(function (svg) {
        return "data:image/svg+xml;charset=utf-8," + svg;
      });
  }

  function newUtil() {
    return {
      escape: escape,
      parseExtension: parseExtension,
      mimeType: mimeType,
      dataAsUrl: dataAsUrl,
      isDataUrl: isDataUrl,
      canvasToBlob: canvasToBlob,
      resolveUrl: resolveUrl,
      getAndEncode: getAndEncode,
      uid: uid(),
      delay: delay,
      asArray: asArray,
      escapeXhtml: escapeXhtml,
      makeImage: makeImage,
      width: width,
      height: height,
    };

    function mimes() {
      /*
       * Only WOFF and EOT mime types for fonts are 'real'
       * see http://www.iana.org/assignments/media-types/media-types.xhtml
       */
      var WOFF = "application/font-woff";
      var JPEG = "image/jpeg";

      return {
        woff: WOFF,
        woff2: WOFF,
        ttf: "application/font-truetype",
        eot: "application/vnd.ms-fontobject",
        png: "image/png",
        jpg: JPEG,
        jpeg: JPEG,
        gif: "image/gif",
        tiff: "image/tiff",
        svg: "image/svg+xml",
      };
    }

    function parseExtension(url) {
      var match = /\.([^\.\/]*?)$/g.exec(url);
      if (match) {
        return match[1];
      } else {
        return "";
      }
    }

    function mimeType(url) {
      var extension = parseExtension(url).toLowerCase();
      return mimes()[extension] || "";
    }

    function isDataUrl(url) {
      return url.search(/^(data:)/) !== -1;
    }

    function toBlob(canvas) {
      return new Promise(function (resolve) {
        var binaryString = window.atob(canvas.toDataURL().split(",")[1]);
        var length = binaryString.length;
        var binaryArray = new Uint8Array(length);

        for (var i = 0; i < length; i++) {
          binaryArray[i] = binaryString.charCodeAt(i);
        }

        resolve(
          new Blob([binaryArray], {
            type: "image/png",
          })
        );
      });
    }

    function canvasToBlob(canvas) {
      if (canvas.toBlob) {
        return new Promise(function (resolve) {
          canvas.toBlob(resolve);
        });
      }

      return toBlob(canvas);
    }

    function resolveUrl(url, baseUrl) {
      var doc = document.implementation.createHTMLDocument();
      var base = doc.createElement("base");
      doc.head.appendChild(base);
      var a = doc.createElement("a");
      doc.body.appendChild(a);
      base.href = baseUrl;
      a.href = url;
      return a.href;
    }

    function uid() {
      var index = 0;

      return function () {
        return "u" + fourRandomChars() + index++;

        function fourRandomChars() {
          /* see http://stackoverflow.com/a/6248722/2519373 */
          return ("0000" + ((Math.random() * Math.pow(36, 4)) << 0).toString(36)).slice(-4);
        }
      };
    }

    function makeImage(uri) {
      return new Promise(function (resolve, reject) {
        var image = new Image();
        image.crossOrigin = "*";
        image.onload = function () {
          resolve(image);
        };
        image.onerror = reject;
        image.src = uri;
      });
    }

    function getAndEncode(url) {
      var TIMEOUT = 100000;
      if (domtoimage.impl.options.cacheBust) {
        // Cache bypass so we dont have CORS issues with cached images
        // Source: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache
        url += (/\?/.test(url) ? "&" : "?") + new Date().getTime();
      }

      //走代理，瓦片地图导出需要服务允许跨域
      if (url.startsWith("http") && url.indexOf(location.hostname) == -1) {
        if (domtoimage.proxy) {
          url = domtoimage.proxy(url); //回调方法，在该方法内部处理逻辑
        } else if (domtoimage.preUrl) {
          url = domtoimage.preUrl + url;
        }
      }

      return new Promise(function (resolve) {
        var request = new XMLHttpRequest();
        request.onreadystatechange = done;
        request.ontimeout = timeout;

        request.responseType = "blob";
        request.timeout = TIMEOUT;

        var getorpost;
        if (url.indexOf(location.origin) != -1) {
          getorpost = "get";
        } else {
          getorpost = "post";
        }

        if (domtoimage.hasGet) {
          getorpost = domtoimage.hasGet(url, getorpost);
        }
        request.open(getorpost, url, true);

        //request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        request.send();

        var placeholder;
        if (domtoimage.impl.options.imagePlaceholder) {
          var split = domtoimage.impl.options.imagePlaceholder.split(/,/);
          if (split && split[1]) {
            placeholder = split[1];
          }
        }

        function done() {
          if (request.readyState !== 4) {
            return;
          }

          if (request.status !== 200) {
            //404错误
            if (placeholder) {
              resolve(placeholder);
            } else {
              fail("无法获取资源: " + url + ", 状态: " + request.status);
            }
          } else {
            var encoder = new FileReader();
            encoder.onloadend = function () {
              var content = encoder.result.split(/,/)[1];
              resolve(content);
            };
            encoder.readAsDataURL(request.response);
          }
        }

        function timeout() {
          if (placeholder) {
            resolve(placeholder);
          } else {
            fail("抓取资源时发生超时（" + TIMEOUT + "ms）: " + url);
          }
        }

        function fail(message) {
          console.log(message);
          resolve(
            "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAABlBMVEXMzMwAov9iAAKCAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAACklEQVQImWNgAAAAAgAB9HFkpgAAAABJRU5ErkJggg=="
          );
        }
      });
    }

    function dataAsUrl(content, type) {
      return "data:" + type + ";base64," + content;
    }

    function escape(string) {
      return string.replace(/([.*+?^${}()|\[\]\/\\])/g, "\\$1");
    }

    function delay(ms) {
      return function (arg) {
        return new Promise(function (resolve) {
          setTimeout(function () {
            resolve(arg);
          }, ms);
        });
      };
    }

    function asArray(arrayLike) {
      var array = [];
      var length = arrayLike.length;
      for (var i = 0; i < length; i++) {
        array.push(arrayLike[i]);
      }
      return array;
    }

    function escapeXhtml(string) {
      return string.replace(/#/g, "%23").replace(/\n/g, "%0A");
    }

    function width(node) {
      var leftBorder = px(node, "border-left-width");
      var rightBorder = px(node, "border-right-width");

      return node.scrollWidth + leftBorder + rightBorder;
    }

    function height(node) {
      var topBorder = px(node, "border-top-width");
      var bottomBorder = px(node, "border-bottom-width");
      return node.scrollHeight + topBorder + bottomBorder;
    }

    function px(node, styleProperty) {
      var value = window.getComputedStyle(node).getPropertyValue(styleProperty);
      return parseFloat(value.replace("px", ""));
    }
  }

  function newInliner() {
    var URL_REGEX = /url\(['"]?([^'"]+?)['"]?\)/g;

    return {
      inlineAll: inlineAll,
      shouldProcess: shouldProcess,
      impl: {
        readUrls: readUrls,
        inline: inline,
      },
    };

    function shouldProcess(string) {
      return string.search(URL_REGEX) !== -1;
    }

    function readUrls(string) {
      var result = [];
      var match;
      while ((match = URL_REGEX.exec(string)) !== null) {
        result.push(match[1]);
      }
      return result.filter(function (url) {
        return !util.isDataUrl(url);
      });
    }

    function inline(string, url, baseUrl, get) {
      return Promise.resolve(url)
        .then(function (url) {
          return baseUrl ? util.resolveUrl(url, baseUrl) : url;
        })
        .then(get || util.getAndEncode)
        .then(function (data) {
          return util.dataAsUrl(data, util.mimeType(url));
        })
        .then(function (dataUrl) {
          return string.replace(urlAsRegex(url), "$1" + dataUrl + "$3");
        });

      function urlAsRegex(url) {
        return new RegExp("(url\\(['\"]?)(" + util.escape(url) + ")(['\"]?\\))", "g");
      }
    }

    function inlineAll(string, baseUrl, get) {
      if (nothingToInline()) {
        return Promise.resolve(string);
      }

      return Promise.resolve(string)
        .then(readUrls)
        .then(function (urls) {
          var done = Promise.resolve(string);
          urls.forEach(function (url) {
            done = done.then(function (string) {
              return inline(string, url, baseUrl, get);
            });
          });
          return done;
        });

      function nothingToInline() {
        return !shouldProcess(string);
      }
    }
  }

  function newFontFaces() {
    return {
      resolveAll: resolveAll,
      impl: {
        readAll: readAll,
      },
    };

    function resolveAll() {
      return readAll(document)
        .then(function (webFonts) {
          return Promise.all(
            webFonts.map(function (webFont) {
              return webFont.resolve();
            })
          );
        })
        .then(function (cssStrings) {
          return cssStrings.join("\n");
        });
    }

    function readAll() {
      return Promise.resolve(util.asArray(document.styleSheets))
        .then(getCssRules)
        .then(selectWebFontRules)
        .then(function (rules) {
          return rules.map(newWebFont);
        });

      function selectWebFontRules(cssRules) {
        return cssRules
          .filter(function (rule) {
            return rule.type === CSSRule.FONT_FACE_RULE;
          })
          .filter(function (rule) {
            return inliner.shouldProcess(rule.style.getPropertyValue("src"));
          });
      }

      function getCssRules(styleSheets) {
        var cssRules = [];
        styleSheets.forEach(function (sheet) {
          try {
            util.asArray(sheet.cssRules || []).forEach(cssRules.push.bind(cssRules));
          } catch (e) {
            console.log("Error while reading CSS rules from " + sheet.href, e.toString());
          }
        });
        return cssRules;
      }

      function newWebFont(webFontRule) {
        return {
          resolve: function resolve() {
            var baseUrl = (webFontRule.parentStyleSheet || {}).href;
            return inliner.inlineAll(webFontRule.cssText, baseUrl);
          },
          src: function () {
            return webFontRule.style.getPropertyValue("src");
          },
        };
      }
    }
  }

  function newImages() {
    return {
      inlineAll: inlineAll,
      impl: {
        newImage: newImage,
      },
    };

    function newImage(element) {
      return {
        inline: inline,
      };

      function inline(get) {
        if (util.isDataUrl(element.src)) {
          return Promise.resolve();
        }

        return Promise.resolve(element.src)
          .then(get || util.getAndEncode)
          .then(function (data) {
            return util.dataAsUrl(data, util.mimeType(element.src));
          })
          .then(function (dataUrl) {
            return new Promise(function (resolve, reject) {
              element.onload = resolve;
              element.onerror = reject;
              element.src = dataUrl;
            });
          });
      }
    }

    function inlineAll(node) {
      if (!(node instanceof Element)) {
        return Promise.resolve(node);
      }

      return inlineBackground(node).then(function () {
        if (node instanceof HTMLImageElement) {
          return newImage(node).inline();
        } else {
          return Promise.all(
            util.asArray(node.childNodes).map(function (child) {
              return inlineAll(child);
            })
          );
        }
      });

      function inlineBackground(node) {
        var background = node.style.getPropertyValue("background");

        if (!background) {
          return Promise.resolve(node);
        }

        return inliner
          .inlineAll(background)
          .then(function (inlined) {
            node.style.setProperty("background", inlined, node.style.getPropertyPriority("background"));
          })
          .then(function () {
            return node;
          });
      }
    }
  }
})(window);