diff --git a/README.md b/README.md index 1ef8ae6..9f4e36f 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,7 @@ __Domvas implements the missing piece that connects the DOM and Canvas__. It gives to the ability to take arbitrary DOM content and paint it to a Canvas of your choice. ## Usage + ```js var canvas = document.getElementById("test"); var context = canvas.getContext('2d'); @@ -15,10 +16,12 @@ domvas.toImage(document.getElementById("dom"), function() { ``` ## Syntax + ```js domvas.toImage(domElement, readyCallback, width, height, left, top); ``` -readyCallback's 'this' and first argument points to a valid, preloaded image node that you can simply draw to your canvas context. + +readyCallback's `this` and first argument points to a valid, preloaded image node that you can simply draw to your canvas context. ## How it works diff --git a/src/domvas.js b/src/domvas.js index 2d81473..4a8a9e4 100644 --- a/src/domvas.js +++ b/src/domvas.js @@ -1,14 +1,13 @@ -"use strict"; - -(function() { +(function(window, document) { + "use strict"; var supportsCSSText = getComputedStyle(document.body).cssText !== ""; - function copyCSS(elem, origElem, log) { + function copyCSS(elem, origElem) { var computedStyle = getComputedStyle(origElem); - if(supportsCSSText) { + if (supportsCSSText) { elem.style.cssText = computedStyle.cssText; } else { @@ -30,15 +29,17 @@ var origChildren = origElem.querySelectorAll('*'); // copy the current style to the clone - copyCSS(elem, origElem, 1); + copyCSS(elem, origElem); // collect all nodes within the element, copy the current style to the clone Array.prototype.forEach.call(children, function(child, i) { copyCSS(child, origChildren[i]); }); + + var elstyle = elem.style; // strip margins from the outer element - elem.style.margin = elem.style.marginLeft = elem.style.marginTop = elem.style.marginBottom = elem.style.marginRight = ''; + elstyle.margin = elstyle.marginLeft = elstyle.marginTop = elstyle.marginBottom = elstyle.marginRight = ''; } @@ -62,11 +63,12 @@ // Create well formed data URL with our DOM string wrapped in SVG var dataUri = "data:image/svg+xml," + - "" + - "" + - serialized + - "" + - ""; + "" + + "" + + serialized + + ""; // create new, actual image var img = new Image(); @@ -83,5 +85,5 @@ }; -})(); +})(window, document); diff --git a/src/domvas.min.js b/src/domvas.min.js index 20146c6..c09376b 100644 --- a/src/domvas.min.js +++ b/src/domvas.min.js @@ -1 +1 @@ -"use strict";(function(){function t(t,n,r){var i=getComputedStyle(n);if(e)t.style.cssText=i.cssText;else for(var s in i)isNaN(parseInt(s,10))&&typeof i[s]!="function"&&!/^(cssText|length|parentRule)$/.test(s)&&(t.style[s]=i[s])}function n(e,n){var r=e.querySelectorAll("*"),i=n.querySelectorAll("*");t(e,n,1),Array.prototype.forEach.call(r,function(e,n){t(e,i[n])}),e.style.margin=e.style.marginLeft=e.style.marginTop=e.style.marginBottom=e.style.marginRight=""}var e=getComputedStyle(document.body).cssText!=="";window.domvas={toImage:function(e,t,r,i,s,o){s=s||0,o=o||0;var u=e.cloneNode(!0);n(u,e),u.setAttribute("xmlns","http://www.w3.org/1999/xhtml");var a=(new XMLSerializer).serializeToString(u),f="data:image/svg+xml,"+""+a+""+"",l=new Image;l.src=f,l.onload=function(){t&&t.call(this,this)}}}})() +!function(e,i){"use strict";function t(i,o){var e=getComputedStyle(o);if(n)i.style.cssText=e.cssText;else for(var t in e)isNaN(parseInt(t,10))&&"function"!=typeof e[t]&&!/^(cssText|length|parentRule)$/.test(t)&&(i.style[t]=e[t])}function o(i,o){var n=i.querySelectorAll("*"),r=o.querySelectorAll("*");t(i,o),Array.prototype.forEach.call(n,function(e,i){t(e,r[i])});var e=i.style;e.margin=e.marginLeft=e.marginTop=e.marginBottom=e.marginRight=""}var n=""!==getComputedStyle(i.body).cssText;e.domvas={toImage:function(t,r,a,l,e,i){e=e||0,i=i||0;var n=t.cloneNode(!0);o(n,t),n.setAttribute("xmlns","http://www.w3.org/1999/xhtml");var g=(new XMLSerializer).serializeToString(n),c="data:image/svg+xml,"+g+"",s=new Image;s.src=c,s.onload=function(){r&&r.call(this,this)}}}}(window,document); \ No newline at end of file