svgsaver - npm Package Compare versions

Comparing version 0.1.2 to 0.1.4

index.js

@@ -1,181 +0,1 @@
-(function (global, factory) {
-  if (typeof define === 'function' && define.amd) {
-    define('SvgSaver', ['exports', 'module', 'html5-filesaver.js'], factory);
-  } else if (typeof exports !== 'undefined' && typeof module !== 'undefined') {
-    factory(exports, module, require('html5-filesaver.js'));
-  } else {
-    var mod = {
-      exports: {}
-    };
-    factory(mod.exports, mod, global.saveAs);
-    global.SvgSaver = mod.exports;
-  }
-})(this, function (exports, module, _html5FilesaverJs) {
-  'use strict';
-
-  var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
-
-  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
-  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
-
-  var _saveAs = _interopRequireDefault(_html5FilesaverJs);
-
-  var svgStyles = {
-    'alignment-baseline': 'auto',
-    'baseline-shift': 'baseline',
-    'clip': 'auto',
-    'clip-path': 'none',
-    'clip-rule': 'nonzero',
-    'color': 'rgb(51, 51, 51)',
-    'color-interpolation': 'srgb',
-    'color-interpolation-filters': 'linearrgb',
-    'color-profile': 'auto',
-    'color-rendering': 'auto',
-    'cursor': 'auto',
-    'direction': 'ltr',
-    'display': 'inline',
-    'dominant-baseline': 'auto',
-    'enable-background': '',
-    'fill': 'rgb(0, 0, 0)',
-    'fill-opacity': '1',
-    'fill-rule': 'nonzero',
-    'filter': 'none',
-    'flood-color': 'rgb(0, 0, 0)',
-    'flood-opacity': '1',
-    'font': '',
-    'font-family': 'normal',
-    'font-size': 'medium',
-    'font-size-adjust': 'auto',
-    'font-stretch': 'normal',
-    'font-style': 'normal',
-    'font-variant': 'normal',
-    'font-weight': '400',
-    'glyph-orientation-horizontal': '0deg',
-    'glyph-orientation-vertical': 'auto',
-    'image-rendering': 'auto',
-    'kerning': 'auto',
-    'letter-spacing': '0',
-    'lighting-color': 'rgb(255, 255, 255)',
-    'marker': '',
-    'marker-end': 'none',
-    'marker-mid': 'none',
-    'marker-start': 'none',
-    'mask': 'none',
-    'opacity': '1',
-    'overflow': 'visible',
-    'paint-order': 'normal',
-    'pointer-events': 'auto',
-    'shape-rendering': 'auto',
-    'stop-color': 'rgb(0, 0, 0)',
-    'stop-opacity': '1',
-    'stroke': 'none',
-    'stroke-dasharray': 'none',
-    'stroke-dashoffset': '0',
-    'stroke-linecap': 'butt',
-    'stroke-linejoin': 'miter',
-    'stroke-miterlimit': '4',
-    'stroke-opacity': '1',
-    'stroke-width': '1',
-    'text-anchor': 'start',
-    'text-decoration': 'none',
-    'text-rendering': 'auto',
-    'unicode-bidi': 'normal',
-    'visibility': 'visible',
-    'word-spacing': '0px',
-    'writing-mode': 'lr-tb'
-  };
-
-  var svgAttrs = ['id', 'xml:base', 'xml:lang', 'xml:space', 'height', 'result', 'width', 'x', 'y', 'xlink:href', 'style', 'class', 'd', 'pathLength', 'x', 'y', 'dx', 'dy', 'glyphRef', 'format', 'x1', 'y1', 'x2', 'y2', 'rotate', 'textLength', 'cx', 'cy', 'r', 'rx', 'ry', 'fx', 'fy', 'width', 'height', 'refX', 'refY', 'orient', 'markerUnits', 'markerWidth', 'markerHeight', 'maskUnits', 'transform', 'viewBox', 'version', 'preserveAspectRatio', 'xmlns', 'points', 'offset'];
-
-  function isUndefined(value) {
-    return typeof value === 'undefined';
-  }
-  function isDefined(value) {
-    return typeof value !== 'undefined';
-  }
-  var forEach = Array.prototype.forEach;
-
-  function getStyles(node, name) {
-    var val;
-
-    if (isDefined(node.currentStyle)) {
-      val = node.currentStyle[name];
-    } else if (isDefined(window.getComputedStyle)) {
-      val = node.ownerDocument.defaultView.getComputedStyle(node, null)[name];
-    } else {
-      val = node.style[name];
-    }
-    return val === '' ? undefined : val;
-  }
-
-  function copyStyles(source, target) {
-    for (var key in svgStyles) {
-      var _default = svgStyles[key];
-      var src = getStyles(source, key);
-
-      var par = getStyles(target.parentNode, key);
-      if (src && src !== _default && src !== par) {
-        target.style[key] = src;
-      }
-    }
-  }
-
-  function cleanAttrs(el) {
-    forEach.call(el.attributes, function (attr) {
-      if (attr.specified && isUndefined(svgStyles[attr.name]) && svgAttrs.indexOf(attr.name) < 0) {
-        el.removeAttribute(attr.name);
-      }
-    });
-  }
-
-  function cloneSvg(src) {
-    var clonedSvg = src.cloneNode(true);
-    var srcChildren = src.querySelectorAll('*');
-
-    forEach.call(clonedSvg.querySelectorAll('*'), function (target, index) {
-      copyStyles(srcChildren[index], target);
-      cleanAttrs(target);
-    });
-
-    return clonedSvg;
-  }
-
-  var SvgSaver = (function () {
-    function SvgSaver(opts) {
-      _classCallCheck(this, SvgSaver);
-    }
-
-    _createClass(SvgSaver, [{
-      key: 'getHTML',
-      value: function getHTML(el) {
-        var svg = cloneSvg(el);
-
-        svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-        svg.setAttribute('version', 1.1);
-
-        return svg.outerHTML || new window.XMLSerializer().serializeToString(svg);
-      }
-    }, {
-      key: 'getBlob',
-      value: function getBlob(el) {
-        var html = this.getHTML(el);
-        return new Blob([html], { type: 'text/xml' });
-      }
-    }, {
-      key: 'asSvg',
-      value: function asSvg(el, filename) {
-        if (!filename || filename === '') {
-          filename = el.getAttribute('title');
-          filename = (filename || 'untitled') + '.svg';
-        }
-
-        return (0, _saveAs['default'])(this.getBlob(el), filename);
-      }
-    }]);
-
-    return SvgSaver;
-  })();
-
-  module.exports = SvgSaver;
-});
+module.exports = require('./lib/svgsaver')['default'];

package.json

 {
   "name": "svgsaver",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "download an SVG element with css styles",
   "main": "index.js",
+  "browser": "browser.js",
   "jspm": {
-    "main": "src/SvgSaver.js"
+    "main": "index.js"
   },
   "scripts": {
-    "babel": "rollup ./src/index.js -e html5-filesaver.js | babel -o index.js -m umd --module-id SvgSaver -f ./src/index.js --no-comments",
+    "babel": "babel ./src/ -d lib/ --no-comments  --source-maps",
+    "roll": "rollup index.es6.js -e html5-filesaver.js | babel -m umd -o browser.js --module-id SvgSaver --no-comments",
+    "uglify": "uglifyjs browser.js -o browser.min.js --source-map browser.min.js.map",
     "test": "npm run build && karma start",
-    "build": "npm run babel",
+    "build": "npm run babel && npm run roll && npm run uglify",
     "lint": "eslint src/index.js",
-    "watch": "watch \"npm run babel\" ./src/"
+    "watch": "watch \"npm run build\" src/",
+    "start": "live-server --open=demo",
+    "prepublish": "npm test"
   },
@@ -34,2 +39,3 @@ "keywords": [
     "rollup": "^0.16.4",
+    "uglifyjs": "^2.4.10",
     "watch": "^0.16.0"
@@ -36,0 +42,0 @@ },

README.md

 svgsaver
 ===
 
-download an svg element as an SVG file, including CSS defined styles.
+download an svg element as an SVG or PNG file, including CSS defined styles.
 
@@ -13,3 +13,3 @@ ## Features
 
-*Currently requires a global version of [eligrey/FileSaver.js/](https://github.com/eligrey/FileSaver.js)*.
+*For maximum compatibility across browsers include [eligrey/FileSaver.js/](https://github.com/eligrey/FileSaver.js) and [eligrey/canvas-toBlob.js](https://github.com/eligrey/canvas-toBlob.js)*.
 
@@ -21,10 +21,15 @@ ### Example
 var svgsaver = new SvgSaver();                      // creates a new instance
-var octocat = document.querySelector('#octocat');   // find the SVG element
-svgsaver.asSvg(octocat);                            // save as SVG
+var svg = document.querySelector('#mysvg');         // find the SVG element
+svgsaver.asSvg(svg);                                // save as SVG
 ```
 
+### Demos
+
+- http://bl.ocks.org/Hypercubed/db9e99d761f90d87cf43
+- http://bl.ocks.org/Hypercubed/58fff7215e53d6565f32
+
 ## Acknowledgments
-Based on previous work on [Hypercubed/angular-downloadsvg-directive](https://github.com/Hypercubed/angular-downloadsvg-directive).  Some portions of this directive inspired by code from [raw](https://github.com/densitydesign/raw/blob/master/js/directives.js) and [moagrius/copycss](https://github.com/moagrius/copycss).
+Based on previous work on [Hypercubed/angular-downloadsvg-directive](https://github.com/Hypercubed/angular-downloadsvg-directive).  Some portions of this code inspired by [raw](https://github.com/densitydesign/raw/blob/master/js/directives.js) and [moagrius/copycss](https://github.com/moagrius/copycss).
 
 ## License
 [MIT License](http://en.wikipedia.org/wiki/MIT_License)

src/svgsaver.js

@@ -56,3 +56,17 @@ import saveAs from 'html5-filesaver.js';
 
-export default class SvgSaver {
+//detection
+var DownloadAttributeSupport = 'download' in document.createElement('a');
+
+function saveUri(url, name){
+  if (DownloadAttributeSupport) {
+    var dl = document.createElement('a');
+    dl.setAttribute('href', url);
+    dl.setAttribute('download', name);
+    dl.click();
+  } else {
+    window.open(url, '_blank', '');
+  }
+}
+
+export class SvgSaver {
   constructor(opts) {
@@ -68,2 +82,6 @@ // todo: options
 
+    // height and width needed to download in FireFox 
+    svg.setAttribute('width', svg.getAttribute('width') || '500');
+    svg.setAttribute('height', svg.getAttribute('height') || '900');
+
     return svg.outerHTML || (new window.XMLSerializer()).serializeToString(svg);
@@ -77,2 +95,8 @@ }
 
+  getUri(el) {
+    var html = this.getHTML(el);
+    return 'data:image/svg+xml;base64,' + window.btoa(html);
+    //return "data:image/svg+xml," + encodeURIComponent(html);
+  }
+
   asSvg(el, filename) {
@@ -84,8 +108,40 @@ if (!filename || filename === '') {
 
-    return saveAs(this.getBlob(el), filename);
+    if (isDefined(window.saveAs)) {
+      return saveAs(this.getBlob(el), filename);
+    } else {
+      return saveUri(this.getUri(el), filename);
+    }
+
   }
 
+  asPng(el, filename) {
+    if (!filename || filename === '') {
+      filename = el.getAttribute('title');
+      filename = (filename || 'untitled')+'.png';
+    }
+
+    var canvas = document.createElement('canvas');
+    var context = canvas.getContext('2d');
+
+    var image = new Image();
+    image.onload = function() {
+      canvas.width = image.width;
+      canvas.height = image.height;
+      context.drawImage(image, 0, 0);
+
+      if (isDefined(window.saveAs)) {
+        canvas.toBlob(function(blob) {
+          saveAs(blob, filename);
+        });
+      } else {
+        var uri = canvas.toDataURL('image/png');
+        saveUri(uri, filename);
+      }
+
+    };
+    image.src = this.getUri(el);
+  }
+
 }
 
-// allows require('svgsaver') in JSPM for common interface
-export var __useDefault = true;
+export default SvgSaver;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

34

increased by17.24%

Worsened metrics

Total package byte prevSize

10422

decreased by-28.04%

Dev dependency count

13

increased by8.33%

Lines of code

204

decreased by-36.05%

No dependency changes