svg-crowbar - npm Package Compare versions

Comparing version 0.6.5 to 0.7.0-0

dist/cjs/png.js

@@ -9,6 +9,6 @@ "use strict";
 
+var _const = require("./const");
+
 var _util = require("./util");
 
-var _const = require("./const");
-
 function _fixSource(source) {
@@ -22,3 +22,4 @@ return btoa(unescape(encodeURIComponent(source.replace(/[\u00A0-\u2666]/g, function (c) {
   debug: false,
-  fixSource: _fixSource
+  fixSource: _fixSource,
+  scale: 1
 };
@@ -33,3 +34,5 @@
       _ref$fixSource = _ref.fixSource,
-      fixSource = _ref$fixSource === void 0 ? DEFAULT_OPTIONS.fixSource : _ref$fixSource;
+      fixSource = _ref$fixSource === void 0 ? DEFAULT_OPTIONS.fixSource : _ref$fixSource,
+      _ref$scale = _ref.scale,
+      scale = _ref$scale === void 0 ? DEFAULT_OPTIONS.scale : _ref$scale;
 
@@ -40,4 +43,4 @@ var canvas = document.createElement('canvas');
   canvas.setAttribute('id', 'svg-image');
-  canvas.setAttribute('width', source.width * dpr);
-  canvas.setAttribute('height', source.height * dpr);
+  canvas.setAttribute('width', source.width * dpr * scale);
+  canvas.setAttribute('height', source.height * dpr * scale);
 
@@ -53,3 +56,3 @@ if (debug === false) {
   function onLoad() {
-    context.scale(dpr, dpr);
+    context.scale(dpr * scale, dpr * scale);
     context.drawImage(image, 0, 0);
@@ -56,0 +59,0 @@ var canvasdata = canvas.toDataURL('image/png');

dist/esm/png.js

@@ -0,3 +1,3 @@
+import { DEFAULT_FILENAME } from './const';
 import { commenceDownload } from './util';
-import { DEFAULT_FILENAME } from './const';
 export function _fixSource(source) {
@@ -10,3 +10,4 @@ return btoa(unescape(encodeURIComponent(source.replace(/[\u00A0-\u2666]/g, function (c) {
   debug: false,
-  fixSource: _fixSource
+  fixSource: _fixSource,
+  scale: 1
 };
@@ -21,3 +22,5 @@
       _ref$fixSource = _ref.fixSource,
-      fixSource = _ref$fixSource === void 0 ? DEFAULT_OPTIONS.fixSource : _ref$fixSource;
+      fixSource = _ref$fixSource === void 0 ? DEFAULT_OPTIONS.fixSource : _ref$fixSource,
+      _ref$scale = _ref.scale,
+      scale = _ref$scale === void 0 ? DEFAULT_OPTIONS.scale : _ref$scale;
 
@@ -28,4 +31,4 @@ var canvas = document.createElement('canvas');
   canvas.setAttribute('id', 'svg-image');
-  canvas.setAttribute('width', source.width * dpr);
-  canvas.setAttribute('height', source.height * dpr);
+  canvas.setAttribute('width', source.width * dpr * scale);
+  canvas.setAttribute('height', source.height * dpr * scale);
 
@@ -41,3 +44,3 @@ if (debug === false) {
   function onLoad() {
-    context.scale(dpr, dpr);
+    context.scale(dpr * scale, dpr * scale);
     context.drawImage(image, 0, 0);
@@ -44,0 +47,0 @@ var canvasdata = canvas.toDataURL('image/png');

dist/main.js

@@ -1,1 +0,1 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var o in n)("object"==typeof exports?exports:e)[o]=n[o]}}(this,(function(){return(()=>{"use strict";var e={866:(e,t,n)=>{n.r(t),n.d(t,{default:()=>c,downloadPng:()=>a,downloadSvg:()=>d});const o="http://www.w3.org/2000/xmlns/",r="http://www.w3.org/2000/svg",i=function(e,{css:t="inline"}={}){if(!(e instanceof SVGElement))throw new Error("SVG element is required");e.setAttribute("version","1.1"),e.removeAttribute("xmlns"),e.removeAttribute("xlink"),e.hasAttributeNS(o,"xmlns")||e.setAttributeNS(o,"xmlns",r),e.hasAttributeNS(o,"xmlns:xlink")||e.setAttributeNS(o,"xmlns:xlink","http://www.w3.org/1999/xlink"),"inline"===t?function(e,t){function n(e){const n=getComputedStyle(e);let o,r,i="";for(let e=0,l=n.length;e<l;e++)o=n[e],r=n.getPropertyValue(o),r!==t.getPropertyValue(o)&&(i+=`${o}:${r};`);e.setAttribute("style",i)}const o=function(e){const t=[];return t.push(e),function e(n){if(n&&n.hasChildNodes()){let o=n.firstChild;for(;o;)1===o.nodeType&&"SCRIPT"!==o.nodeName&&(t.push(o),e(o)),o=o.nextSibling}}(e),t}(e);let r=o.length;for(;r--;)n(o[r])}(e,function(){let e=document.createElementNS(r,"svg");document.body.appendChild(e),e.style.all="initial";const t=getComputedStyle(e);return document.body.removeChild(e),e=null,t}()):"internal"===t&&function(e){const t=document.createElement("style");t.innerHTML=Array.from(document.styleSheets).filter((e=>!e.href||e.href.startsWith(document.location.origin))).map((e=>Array.from(e.cssRules).map((e=>e.cssText)).join(" "))).join(" "),e.prepend(t)}(e);const n=(new XMLSerializer).serializeToString(e),i=e.getBoundingClientRect();return{top:i.top,left:i.left,width:i.width,height:i.height,class:e.getAttribute("class"),id:e.getAttribute("id"),name:e.getAttribute("name"),childElementCount:e.childElementCount,source:'<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">'+n}};function l(e){if(!(e instanceof SVGElement))throw new Error("SVG Element is required");return e.getAttribute("id")||e.getAttribute("class")||document.title.replace(/[^a-z0-9]/gi,"-").toLowerCase()||"untitled"}function s(e,t,n){const o=document.createElement("a");document.body.appendChild(o),o.setAttribute("class","svg-crowbar"),o.setAttribute("download",e),o.setAttribute("href",t),o.style.display="none",o.click(),setTimeout((()=>{n&&n(),document.body.removeChild(o)}),10)}const u={debug:!1,fixSource:function(e){return btoa(unescape(encodeURIComponent(e.replace(/[\u00A0-\u2666]/g,(e=>`&#${e.charCodeAt(0)};`)))))}},d=(e,t,n)=>function(e,t="untitled"){const n=URL.createObjectURL(new Blob([e.source],{type:"text/xml"}));s(`${t}.svg`,n,(()=>URL.revokeObjectURL(n)))}(i(e,n),t||l(e)),c=d,a=(e,t,n)=>function(e,t="untitled",{debug:n=u.debug,fixSource:o=u.fixSource}=u){const r=document.createElement("canvas"),i=window.devicePixelRatio||1;document.body.appendChild(r),r.setAttribute("id","svg-image"),r.setAttribute("width",e.width*i),r.setAttribute("height",e.height*i),!1===n&&(r.style.display="none");const l=r.getContext("2d"),d=`data:image/svg+xml;base64,${o(e.source)}`,c=new Image;c.onload=function(){l.scale(i,i),l.drawImage(c,0,0);const e=r.toDataURL("image/png");!1===n&&s(`${t}.png`,e,(()=>document.body.removeChild(r)))},c.src=d,!0===n&&document.body.appendChild(c)}(i(e,n),t||l(e),n?.downloadPNGOptions)}},t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={exports:{}};return e[o](r,r.exports,n),r.exports}return n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n(866)})()}));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var o in n)("object"==typeof exports?exports:e)[o]=n[o]}}(this,(function(){return(()=>{"use strict";var e={d:(t,n)=>{for(var o in n)e.o(n,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:n[o]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{default:()=>u,downloadPng:()=>c,downloadSvg:()=>d});const n="http://www.w3.org/2000/xmlns/",o="http://www.w3.org/2000/svg",i=function(e,{css:t="inline"}={}){if(!(e instanceof SVGElement))throw new Error("SVG element is required");e.setAttribute("version","1.1"),e.removeAttribute("xmlns"),e.removeAttribute("xlink"),e.hasAttributeNS(n,"xmlns")||e.setAttributeNS(n,"xmlns",o),e.hasAttributeNS(n,"xmlns:xlink")||e.setAttributeNS(n,"xmlns:xlink","http://www.w3.org/1999/xlink"),"inline"===t?function(e,t){function n(e){const n=getComputedStyle(e);let o,i,r="";for(let e=0,l=n.length;e<l;e++)o=n[e],i=n.getPropertyValue(o),i!==t.getPropertyValue(o)&&(r+=`${o}:${i};`);e.setAttribute("style",r)}const o=function(e){const t=[];return t.push(e),function e(n){if(n&&n.hasChildNodes()){let o=n.firstChild;for(;o;)1===o.nodeType&&"SCRIPT"!==o.nodeName&&(t.push(o),e(o)),o=o.nextSibling}}(e),t}(e);let i=o.length;for(;i--;)n(o[i])}(e,function(){let e=document.createElementNS(o,"svg");document.body.appendChild(e),e.style.all="initial";const t=getComputedStyle(e);return document.body.removeChild(e),e=null,t}()):"internal"===t&&function(e){const t=document.createElement("style");t.innerHTML=Array.from(document.styleSheets).filter((e=>!e.href||e.href.startsWith(document.location.origin))).map((e=>Array.from(e.cssRules).map((e=>e.cssText)).join(" "))).join(" "),e.prepend(t)}(e);const i=(new XMLSerializer).serializeToString(e),r=e.getBoundingClientRect();return{top:r.top,left:r.left,width:r.width,height:r.height,class:e.getAttribute("class"),id:e.getAttribute("id"),name:e.getAttribute("name"),childElementCount:e.childElementCount,source:'<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">'+i}};function r(e){if(!(e instanceof SVGElement))throw new Error("SVG Element is required");return e.getAttribute("id")||e.getAttribute("class")||document.title.replace(/[^a-z0-9]/gi,"-").toLowerCase()||"untitled"}function l(e,t,n){const o=document.createElement("a");document.body.appendChild(o),o.setAttribute("class","svg-crowbar"),o.setAttribute("download",e),o.setAttribute("href",t),o.style.display="none",o.click(),setTimeout((()=>{n&&n(),document.body.removeChild(o)}),10)}const s={debug:!1,fixSource:function(e){return btoa(unescape(encodeURIComponent(e.replace(/[\u00A0-\u2666]/g,(e=>`&#${e.charCodeAt(0)};`)))))},scale:1},d=(e,t,n)=>function(e,t="untitled"){const n=URL.createObjectURL(new Blob([e.source],{type:"text/xml"}));l(`${t}.svg`,n,(()=>URL.revokeObjectURL(n)))}(i(e,n),t||r(e)),u=d,c=(e,t,n)=>function(e,t="untitled",{debug:n=s.debug,fixSource:o=s.fixSource,scale:i=s.scale}=s){const r=document.createElement("canvas"),d=window.devicePixelRatio||1;document.body.appendChild(r),r.setAttribute("id","svg-image"),r.setAttribute("width",e.width*d*i),r.setAttribute("height",e.height*d*i),!1===n&&(r.style.display="none");const u=r.getContext("2d"),c=`data:image/svg+xml;base64,${o(e.source)}`,a=new Image;a.onload=function(){u.scale(d*i,d*i),u.drawImage(a,0,0);const e=r.toDataURL("image/png");!1===n&&l(`${t}.png`,e,(()=>document.body.removeChild(r)))},a.src=c,!0===n&&document.body.appendChild(a)}(i(e,n),t||r(e),n?.downloadPNGOptions);return t})()}));

package.json

 {
   "name": "svg-crowbar",
-  "version": "0.6.5",
+  "version": "0.7.0-0",
   "description": "A library based on a Chrome-specific bookmarklet that extracts SVG nodes and accompanying styles from an HTML document and downloads them as an SVG file",
@@ -36,18 +36,18 @@ "main": "./dist/cjs/index.js",
   "devDependencies": {
-    "@babel/cli": "7.12.10",
-    "@babel/core": "7.12.10",
-    "@babel/preset-env": "7.12.11",
+    "@babel/cli": "7.14.8",
+    "@babel/core": "7.15.0",
+    "@babel/preset-env": "7.15.0",
     "@cyberskunk/eslint-config": "1.0.0",
-    "@jest-runner/electron": "3.0.0",
+    "@jest-runner/electron": "3.0.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.1.0",
     "babel-jest": "26.6.3",
-    "electron": "10.2.0",
-    "eslint": "7.17.0",
-    "eslint-config-prettier": "6.15.0",
-    "eslint-plugin-prettier": "3.3.1",
+    "electron": "13.1.8",
+    "eslint": "7.32.0",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-prettier": "3.4.0",
     "jest": "26.6.3",
-    "prettier": "2.2.1",
-    "webpack": "5.11.1",
-    "webpack-cli": "4.3.1"
+    "prettier": "2.3.2",
+    "webpack": "5.49.0",
+    "webpack-cli": "4.7.2"
   },
@@ -54,0 +54,0 @@ "jest": {

README.md

 # SVG Crowbar Library
 [![NPM version](https://img.shields.io/npm/v/svg-crowbar.svg)](https://www.npmjs.com/package/svg-crowbar)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
-[![Build Status](https://travis-ci.com/cy6erskunk/svg-crowbar.svg?branch=master)](https://travis-ci.com/cy6erskunk/svg-crowbar)
+[![Build status](https://github.com/cy6erskunk/svg-crowbar/actions/workflows/node.js.yml/badge.svg)](https://github.com/cy6erskunk/svg-crowbar/actions/workflows/node.js.yml)
 ![Copy README to gh-pages branch](https://github.com/cy6erskunk/svg-crowbar/workflows/Copy%20README%20to%20gh-pages%20branch/badge.svg)
@@ -46,3 +46,3 @@
 
-  An object literal. It presently has just a single configurable property:
+  An object literal. It presently has two configurable properties:
 
@@ -80,2 +80,19 @@ - **options.css** *(optional)*
 
+- **options.downloadPNGOptions.scale** *(optional)*
+
+  This setting determines at which scale the final PNG image is created, for example when resolution is desired. The default scale is 1 (ie no scaling).
+
+  Example:
+  ```javascript
+  const svg = document.querySelector('svg');
+
+  // Download a normal-scaled PNG
+  downloadPng(svg, 'my_svg');
+  downloadPng(svg, 'my_svg', {downloadPNGOptions:{ scale: 1 }});
+
+  // Download a double-scaled PNG
+  downloadPng(svg, 'my_svg', {downloadPNGOptions:{ scale: 2 }});
+
+  ```
+
   ### UMD bundle
@@ -82,0 +99,0 @@

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

Lines of code

436

increased by1.4%

Number of lines in readme file

103

increased by19.77%

Worsened metrics

Total package byte prevSize

27200

decreased by-33.97%

Number of package files

16

decreased by-5.88%

No dependency changes