diff --git a/README.md b/README.md index eb01085e..007d7691 100644 --- a/README.md +++ b/README.md @@ -181,6 +181,10 @@ Set to true to append the current time as a query string to URL requests to enab A data URL for a placeholder image that will be used when fetching an image fails. Defaults to undefined and will throw an error on failed images +#### only_style + +Part of URL of the only css of the rendered dom (will only traverse this css). E.g. `/css/result-dom.css` + ## Browsers It's tested on latest Chrome and Firefox (49 and 45 respectively at the time @@ -191,7 +195,7 @@ possibly due to it's more performant SVG support, and the fact that it supports _Internet Explorer is not (and will not be) supported, as it does not support SVG `` tag_ -_Safari [is not supported](https://github.com/tsayen/dom-to-image/issues/27), as it uses a stricter security model on ` tag. Suggested workaround is to use `toSvg` and render on the server._` +_Safari [is not supported](https://github.com/tsayen/dom-to-image/issues/27), as it uses a stricter security model on ` tag. Suggested workaround is to use `toSvg` and render on the server._ ## Dependencies diff --git a/src/dom-to-image-improved.js b/src/dom-to-image-improved.js index 4f11af44..58e102e3 100644 --- a/src/dom-to-image-improved.js +++ b/src/dom-to-image-improved.js @@ -5,6 +5,7 @@ var inliner = newInliner(); var fontFaces = newFontFaces(); var images = newImages(); + var used_web_font=new Set(); // Default impl options var defaultOptions = { @@ -43,6 +44,7 @@ * @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 {String} options.only_style - part of path of the only css of rendered dom (will only find this css) * @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. @@ -164,15 +166,20 @@ } else { domtoimage.impl.options.useCredentials = options.useCredentials; } + + if(typeof(options.only_style) != 'undefined') { + domtoimage.impl.options.only_style = options.only_style; + } } function draw(domNode, options) { + used_web_font.clear(); return toSvg(domNode, options) .then(util.makeImage) .then(util.delay(100)) .then(function(image) { var scale = typeof(options.scale) !== 'number' ? 1 : options.scale; - console.log('scale', scale); + /*console.log('scale', scale);*/ var canvas = newCanvas(domNode, scale); var ctx = canvas.getContext('2d'); if (image) { @@ -292,7 +299,7 @@ // Fix strange box-shadow in Safari if (util.isSafari()) { - target.cssText = target.cssText.replace(/box-shadow(.*?);/, 'box-shadow: none!important;'); + target.cssText = target.cssText.replace(/box-shadow(.*?);/, 'box-shadow:none!important;'); } target.font = source.font; // here, we re-assign the font prop. @@ -300,10 +307,15 @@ function copyProperties(source, target) { util.asArray(source).forEach(function(name) { + if(name=="font-family"){ + source.getPropertyValue(name).replace(/[ \"\']/g,"").split(",").forEach(function(fontName){ + used_web_font.add(fontName); + }) + } target.setProperty( - name, - source.getPropertyValue(name), - source.getPropertyPriority(name) + name, + source.getPropertyValue(name), + source.getPropertyPriority(name) ); }); } @@ -762,15 +774,18 @@ } function getCssRules(styleSheets) { + let only_style=typeof(domtoimage.impl.options.only_style)=== 'undefined' ? false : domtoimage.impl.options.only_style; var cssRules = []; styleSheets.forEach(function(sheet) { - if (Object.getPrototypeOf(sheet).hasOwnProperty("cssRules")) { - try { - util.asArray(sheet.cssRules || []).forEach(cssRules.push.bind(cssRules)); - } catch (e) { - console.log('Error while reading CSS rules from ' + sheet.href, e.toString()); + if( (only_style && sheet.href && sheet.href.indexOf(only_style)>-1) || (!only_style)){ + if (Object.getPrototypeOf(sheet).hasOwnProperty("cssRules")) { + try { + util.asArray(sheet.cssRules || []).forEach(cssRules.push.bind(cssRules)); + } catch (e) { + console.warn('Error while reading CSS rules from ' + sheet.href, e.toString()); + } } - } + } /*else console.log(`Skipped css with url ${sheet.href}`)*/ }); return cssRules; } @@ -779,7 +794,11 @@ return { resolve: function resolve() { var baseUrl = (webFontRule.parentStyleSheet || {}).href; - return inliner.inlineAll(webFontRule.cssText, baseUrl); + /* Only inline USED webfont */ + if ( used_web_font.has(webFontRule.style.fontFamily) ){ + return inliner.inlineAll(webFontRule.cssText, baseUrl); + } + return Promise.resolve(""); }, src: function() { return webFontRule.style.getPropertyValue('src');