Merge pull request #8701 from kennynaoh/dom-to-image

add dom-to-image w/ npm auto-update

ajax/libs/dom-to-image/0.1.0/dom-to-image.js

@@ -0,0 +1,114 @@
+(function (global) {
+    "use strict";
+
+    function copyProperties(style, node) {
+        for (var i = 0; i < style.length; i++) {
+            var propertyName = style[i];
+            node.style.setProperty(
+                propertyName,
+                style.getPropertyValue(propertyName),
+                style.getPropertyPriority(propertyName)
+            );
+        }
+    }
+
+    function copyStyle(source, target) {
+        var sourceStyle = global.window.getComputedStyle(source);
+        if (sourceStyle.cssText) {
+            target.style.cssText = sourceStyle.cssText;
+            return;
+        }
+        copyProperties(sourceStyle, target);
+    }
+
+    function fixNamespace(element) {
+        if (element instanceof SVGElement)
+            element.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+        else
+            element.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
+    }
+
+    function processClone(clone, original) {
+        fixNamespace(clone);
+        copyStyle(original, clone);
+    }
+
+    function cloneNode(node, done) {
+        var clone = node.cloneNode(false);
+        processClone(clone, node);
+
+        var children = node.children;
+        if (children.length === 0) done(clone);
+
+        var cloned = 0;
+        for (var i = 0; i < children.length; i++) {
+            cloneChild(children[i]);
+        }
+
+        function cloneChild(child) {
+            setTimeout(function () {
+                cloneNode(child, function (childClone) {
+                    clone.appendChild(childClone);
+                    cloned++;
+                    if (cloned === children.length) done(clone);
+                });
+            }, 0);
+        }
+    }
+
+    function stripMargin(node) {
+        var style = node.style;
+        style.margin = style.marginLeft = style.marginTop = style.marginBottom = style.marginRight = '';
+        return node;
+    }
+
+    function escape(xmlString) {
+        return xmlString.replace(/#/g, '%23');
+    }
+
+    function serialize(element) {
+        return escape(new XMLSerializer().serializeToString(element));
+    }
+
+    function asForeignObject(node) {
+        return "<foreignObject x='0' y='0' width='100%' height='100%'>" + serialize(node) + "</foreignObject>";
+    }
+
+    function toSvg(node, width, height) {
+        return "<svg xmlns='http://www.w3.org/2000/svg' width='" + width + "' height='" + height + "'>" +
+            asForeignObject(node) + "</svg>";
+    }
+
+    function makeDataUri(node, width, height) {
+        return "data:image/svg+xml;charset=utf-8," + toSvg(node, width, height);
+    }
+
+    function makeImage(node, width, height, done) {
+        var image = new Image();
+        image.onload = function () {
+            done(image);
+        };
+        image.src = makeDataUri(stripMargin(node), width, height);
+    }
+
+    function toImage(domNode, done) {
+        cloneNode(domNode, function (clone) {
+            makeImage(clone, domNode.offsetWidth, domNode.offsetHeight, done);
+        });
+    }
+
+    function toDataUrl(domNode, done) {
+        toImage(domNode, function(image){
+            var canvas = document.createElement('canvas');
+            canvas.width = domNode.offsetWidth;
+            canvas.height = domNode.offsetHeight;
+            canvas.getContext('2d').drawImage(image, 0, 0);
+            done(canvas.toDataURL());
+        });
+    }
+
+    global.domtoimage = {
+        toImage: toImage,
+        toDataUrl: toDataUrl
+    };
+})(this);

ajax/libs/dom-to-image/0.1.1/dom-to-image.js

@@ -0,0 +1,113 @@
+(function (global) {
+    "use strict";
+
+    function copyProperties(style, node) {
+        for (var i = 0; i < style.length; i++) {
+            var propertyName = style[i];
+            node.style.setProperty(
+                propertyName,
+                style.getPropertyValue(propertyName),
+                style.getPropertyPriority(propertyName)
+            );
+        }
+    }
+
+    function copyStyle(source, target) {
+        var sourceStyle = global.window.getComputedStyle(source);
+        if (sourceStyle.cssText) {
+            target.style.cssText = sourceStyle.cssText;
+            return;
+        }
+        copyProperties(sourceStyle, target);
+    }
+
+    function fixNamespace(node) {
+        if (node instanceof SVGElement)
+            node.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    }
+
+    function processClone(clone, original) {
+        fixNamespace(clone);
+        if (clone instanceof Element)
+            copyStyle(original, clone);
+    }
+
+    function cloneNode(node, done) {
+        var clone = node.cloneNode(false);
+
+        processClone(clone, node);
+
+        var children = node.childNodes;
+        if (children.length === 0) done(clone);
+
+        var cloned = 0;
+        for (var i = 0; i < children.length; i++) {
+            cloneChild(children[i]);
+        }
+
+        function cloneChild(child) {
+            cloneNode(child, function (childClone) {
+                clone.appendChild(childClone);
+                cloned++;
+                if (cloned === children.length) done(clone);
+            });
+        }
+    }
+
+    function stripMargin(node) {
+        var style = node.style;
+        style.margin = style.marginLeft = style.marginTop = style.marginBottom = style.marginRight = '';
+        return node;
+    }
+
+    function escape(xmlString) {
+        return xmlString.replace(/#/g, '%23');
+    }
+
+    function serialize(node) {
+        node.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
+        return escape(new XMLSerializer().serializeToString(node));
+    }
+
+    function asForeignObject(node) {
+        return "<foreignObject x='0' y='0' width='100%' height='100%'>" + serialize(node) + "</foreignObject>";
+    }
+
+    function toSvg(node, width, height) {
+        return "<svg xmlns='http://www.w3.org/2000/svg' width='" + width + "' height='" + height + "'>" +
+            asForeignObject(node) + "</svg>";
+    }
+
+    function makeDataUri(node, width, height) {
+        return "data:image/svg+xml;charset=utf-8," + toSvg(node, width, height);
+    }
+
+    function makeImage(node, width, height, done) {
+        var image = new Image();
+        image.onload = function () {
+            done(image);
+        };
+        image.src = makeDataUri(stripMargin(node), width, height);
+    }
+
+    function toImage(domNode, done) {
+        cloneNode(domNode, function (clone) {
+            makeImage(clone, domNode.offsetWidth, domNode.offsetHeight, done);
+        });
+    }
+
+    function toDataUrl(domNode, done) {
+        toImage(domNode, function (image) {
+            var canvas = document.createElement('canvas');
+            canvas.width = domNode.offsetWidth;
+            canvas.height = domNode.offsetHeight;
+            canvas.getContext('2d').drawImage(image, 0, 0);
+            done(canvas.toDataURL());
+        });
+    }
+
+    global.domtoimage = {
+        toImage: toImage,
+        toDataUrl: toDataUrl
+    };
+})(this);

ajax/libs/dom-to-image/0.2.0/dom-to-image.js

@@ -0,0 +1,136 @@
+(function (global) {
+    "use strict";
+
+    function copyProperties(style, node) {
+        for (var i = 0; i < style.length; i++) {
+            var propertyName = style[i];
+            node.style.setProperty(
+                propertyName,
+                style.getPropertyValue(propertyName),
+                style.getPropertyPriority(propertyName)
+            );
+        }
+    }
+
+    function copyStyle(source, target) {
+        var sourceStyle = global.window.getComputedStyle(source);
+        if (sourceStyle.cssText) {
+            target.style.cssText = sourceStyle.cssText;
+            return;
+        }
+        copyProperties(sourceStyle, target);
+    }
+
+    function fixNamespace(node) {
+        if (node instanceof SVGElement)
+            node.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    }
+
+    function processClone(clone, original) {
+        fixNamespace(clone);
+        if (clone instanceof Element)
+            copyStyle(original, clone);
+    }
+
+    function cloneNode(node, done) {
+        var clone = node.cloneNode(false);
+
+        processClone(clone, node);
+
+        var children = node.childNodes;
+        if (children.length === 0) done(clone);
+
+        var cloned = 0;
+        for (var i = 0; i < children.length; i++) {
+            cloneChild(children[i]);
+        }
+
+        function cloneChild(child) {
+            cloneNode(child, function (childClone) {
+                clone.appendChild(childClone);
+                cloned++;
+                if (cloned === children.length) done(clone);
+            });
+        }
+    }
+
+    function stripMargin(node) {
+        var style = node.style;
+        style.margin = style.marginLeft = style.marginTop = style.marginBottom = style.marginRight = '';
+        return node;
+    }
+
+    function escape(xmlString) {
+        return xmlString.replace(/#/g, '%23');
+    }
+
+    function serialize(node) {
+        node.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
+        return escape(new XMLSerializer().serializeToString(node));
+    }
+
+    function asForeignObject(node) {
+        return "<foreignObject x='0' y='0' width='100%' height='100%'>" + serialize(node) + "</foreignObject>";
+    }
+
+    function toSvg(node, width, height) {
+        return "<svg xmlns='http://www.w3.org/2000/svg' width='" + width + "' height='" + height + "'>" +
+            asForeignObject(node) + "</svg>";
+    }
+
+    function makeDataUri(node, width, height) {
+        return "data:image/svg+xml;charset=utf-8," + toSvg(node, width, height);
+    }
+
+    function makeImage(node, width, height, done) {
+        var image = new Image();
+        image.onload = function () {
+            done(image);
+        };
+        image.src = makeDataUri(stripMargin(node), width, height);
+    }
+
+    function toImage(domNode, done) {
+        cloneNode(domNode, function (clone) {
+            makeImage(clone, domNode.offsetWidth, domNode.offsetHeight, done);
+        });
+    }
+
+    function drawOffScreen(domNode, done) {
+        toImage(domNode, function (image) {
+            var canvas = document.createElement('canvas');
+            canvas.width = domNode.offsetWidth;
+            canvas.height = domNode.offsetHeight;
+            canvas.getContext('2d').drawImage(image, 0, 0);
+            done(canvas);
+        });
+    }
+
+    function toBlob(domNode, done) {
+        drawOffScreen(domNode, function (canvas) {
+            if (canvas.toBlob) {
+                canvas.toBlob(done);
+                return;
+            }
+            /* canvas.toBlob() method is not available in Chrome 40 */
+            var binaryString = window.atob(canvas.toDataURL().split(',')[1]);
+            var binaryArray = new Uint8Array(binaryString.length);
+            for (var i = 0; i < binaryString.length; i++) {
+                binaryArray[i] = binaryString.charCodeAt(i);
+            }
+            done(new Blob([binaryArray], {type: 'image/png'}));
+        });
+    }
+
+    function toDataUrl(domNode, done) {
+        drawOffScreen(domNode, function (canvas) {
+            done(canvas.toDataURL());
+        });
+    }
+
+    global.domtoimage = {
+        toImage: toImage,
+        toDataUrl: toDataUrl,
+        toBlob: toBlob
+    };
+})(this);