From 115bf91a7eca18cfbe7bc0202c0d02ec7d2b647d Mon Sep 17 00:00:00 2001 From: Eric Shull Date: Sun, 4 Mar 2018 10:34:40 -0500 Subject: [PATCH] Add 'modifyCss' option. Improve docs. Some cleanup. --- README.md | 11 ++++++----- index.html | 28 ++++++++++++++++++++++++++++ package.json | 2 +- saveSvgAsPng.js | 19 +++++++++++-------- 4 files changed, 46 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 8474f3c..28d97fe 100644 --- a/README.md +++ b/README.md @@ -47,16 +47,17 @@ If you want to use TypeScript, necessary [type definitions](https://github.com/m ### Options - `backgroundColor` — Creates a PNG with the given background color. Defaults to transparent. -- `left` - Specify the viewbox's left position. Defaults to 0. +- `canvg` - If canvg is passed in, it will be used to write svg to canvas. This will allow support for Internet Explorer +- `encoderOptions` - A Number between 0 and 1 indicating image quality. The default is 0.8 +- `encoderType` - A DOMString indicating the image format. The default type is image/png. - `height` - Specify the image's height. Defaults to the viewbox's height if given, or the element's non-percentage height, or the element's bounding box's height, or the element's CSS height, or the computed style's height, or 0. +- `left` - Specify the viewbox's left position. Defaults to 0. +- `modifyCss` - A function that takes a CSS rule's selector and properties and returns a string of CSS. Supercedes `selectorRemap` and `modifyStyle`. Useful for modifying properties only for certain CSS selectors. +- `modifyStyle` - A function that takes a CSS rule's properties and returns a string of CSS. Useful for modifying properties before they're inlined into the SVG. - `scale` — Changes the resolution of the output PNG. Defaults to `1`, the same dimensions as the source SVG. - `selectorRemap` — A function that takes a CSS selector and produces its replacement in the CSS that's inlined into the SVG. Useful if your SVG style selectors are scoped by ancestor elements in your HTML document. -- `modifyStyle` - A function that takes CSS styles and returns replacement styles. - `top` - Specify the viewbox's top position. Defaults to 0. - `width` - Specify the image's width. Defaults to the viewbox's width if given, or the element's non-percentage width, or the element's bounding box's width, or the element's CSS width, or the computed style's width, or 0. -- `encoderType` - A DOMString indicating the image format. The default type is image/png. -- `encoderOptions` - A Number between 0 and 1 indicating image quality. The default is 0.8 -- `canvg` - If canvg is passed in, it will be used to write svg to canvas. This will allow support for Internet Explorer ### Testing diff --git a/index.html b/index.html index 870178c..2f86e66 100644 --- a/index.html +++ b/index.html @@ -63,6 +63,10 @@ fill: green !important; } + #selectors-prefixed rect.css-styled { + fill: green !important; + } + /* Invalid selectors */ [ng\:cloak] { @@ -192,6 +196,20 @@

Preview

+
  • + + + + +
    • + +
  • + + + + +
    • +
  • @@ -347,6 +365,16 @@

    Preview

    inlineTest('When CSS styling selectors are prefixed', $('#selectors-prefixed'), { selectorRemap: function(s) {return s.replace('#selectors-prefixed ', '')} }); + inlineTest('Modifying the style', $('#modified-style'), { + modifyStyle: function(s) {return s.replace('green', 'red')} + }); + inlineTest('Modifying the whole CSS rule', $('#modified-css'), { + modifyCss: function(selector, properties) { + selector = selector.replace('#selectors-prefixed ', ''); + properties = properties.replace('green', 'blue'); + return selector + '{' + properties + '}'; + } + }); inlineTest('Exporting a group within an SVG', $('#group'), null, { selector: '#sub-group' }); diff --git a/package.json b/package.json index 707f713..021a96e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "save-svg-as-png", - "version": "1.2.0", + "version": "1.3.1", "description": "Convert a browser SVG to PNG or dataUri", "main": "saveSvgAsPng.js", "scripts": { diff --git a/saveSvgAsPng.js b/saveSvgAsPng.js index dd8d604..8d16fcd 100644 --- a/saveSvgAsPng.js +++ b/saveSvgAsPng.js @@ -69,9 +69,14 @@ function styles(el, options, cssLoadedCallback) { var selectorRemap = options.selectorRemap; var modifyStyle = options.modifyStyle; + var modifyCss = options.modifyCss || function(selector, properties) { + var selector = selectorRemap ? selectorRemap(selector) : selector; + var cssText = modifyStyle ? modifyStyle(properties) : properties; + return selector + " { " + cssText + " }\n"; + }; var css = ""; - // each font that has extranl link is saved into queue, and processed - // asynchronously + + // Each font that has an external link is saved into queue, and processed asynchronously. var fontsQueue = []; var sheets = document.styleSheets; for (var i = 0; i < sheets.length; i++) { @@ -103,9 +108,7 @@ } if (match) { - var selector = selectorRemap ? selectorRemap(rule.selectorText) : rule.selectorText; - var cssText = modifyStyle ? modifyStyle(rule.style.cssText) : rule.style.cssText; - css += selector + " { " + cssText + " }\n"; + css += modifyCss(rule.selectorText, rule.style.cssText); } else if(rule.cssText.match(/^@font-face/)) { // below we are trying to find matches to external link. E.g. // @font-face { @@ -373,13 +376,13 @@ var pixelRatio = window.devicePixelRatio || 1; - canvas.style.width = canvas.width +'px'; - canvas.style.height = canvas.height +'px'; + canvas.style.width = canvas.width+'px'; + canvas.style.height = canvas.height+'px'; canvas.width *= pixelRatio; canvas.height *= pixelRatio; context.setTransform(pixelRatio,0,0,pixelRatio,0,0); - + if(options.canvg) { options.canvg(canvas, src); } else {