using html2canvas for capture button, but it does not work with SVG CSS

package-lock.json

@@ -956,8 +956,7 @@
     "base64-arraybuffer": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz",
-      "integrity": "sha1-c5JncZI7Whl0etZmqlzUv5xunOg=",
-      "dev": true
+      "integrity": "sha1-c5JncZI7Whl0etZmqlzUv5xunOg="
     },
     "base64-js": {
       "version": "1.2.1",
@@ -1297,6 +1296,16 @@
       "integrity": "sha1-5x9cYeH5bHo69OeRrF21XhFzdgQ=",
       "dev": true
     },
+    "canvg-browser": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/canvg-browser/-/canvg-browser-1.0.0.tgz",
+      "integrity": "sha1-xjy1qeegxwaYqch3g0c+YJFepIM=",
+      "requires": {
+        "rgbcolor": "0.0.4",
+        "stackblur": "1.0.0",
+        "xmldom": "0.1.27"
+      }
+    },
     "caseless": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz",
@@ -1872,6 +1881,14 @@
       "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=",
       "dev": true
     },
+    "css-line-break": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.0.1.tgz",
+      "integrity": "sha1-GfIGOjPpX7KDG4ZEbAuAwYivRQo=",
+      "requires": {
+        "base64-arraybuffer": "0.1.5"
+      }
+    },
     "css-loader": {
       "version": "0.27.3",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-0.27.3.tgz",
@@ -4837,6 +4854,14 @@
       "integrity": "sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=",
       "dev": true
     },
+    "html2canvas": {
+      "version": "1.0.0-alpha.9",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-alpha.9.tgz",
+      "integrity": "sha1-/2A9gINa/rbCdm6GEEdooc7xyAE=",
+      "requires": {
+        "css-line-break": "1.0.1"
+      }
+    },
     "htmlparser2": {
       "version": "3.9.2",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.9.2.tgz",
@@ -7763,6 +7788,11 @@
         "onetime": "1.1.0"
       }
     },
+    "rgbcolor": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-0.0.4.tgz",
+      "integrity": "sha1-ygRhWi0D62Hknyp18jmkb7d9ix0="
+    },
     "right-align": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
@@ -8403,6 +8433,11 @@
         }
       }
     },
+    "stackblur": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/stackblur/-/stackblur-1.0.0.tgz",
+      "integrity": "sha1-tAen4FyTsI1miDu4CNfLo6UD8S8="
+    },
     "statuses": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.3.1.tgz",
@@ -9505,6 +9540,11 @@
       "integrity": "sha1-+mv3YqYKQT+z3Y9LA8WyaSONMI8=",
       "dev": true
     },
+    "xmldom": {
+      "version": "0.1.27",
+      "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.27.tgz",
+      "integrity": "sha1-1QH5ezvbQDr4757MIFcxh6rawOk="
+    },
     "xmlhttprequest": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz",
@@ -9516,6 +9556,11 @@
       "integrity": "sha1-GFqIjATspGw+QHDZn3tJ3jUomS0=",
       "dev": true
     },
+    "xmlserializer": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/xmlserializer/-/xmlserializer-0.6.1.tgz",
+      "integrity": "sha512-FNb0eEqqUUbnuvxuHqNuKH8qCGKqxu+558Zi8UzOoQk8Z9LdvpONK+v7m3gpKVHrk5Aq+0nNLsKxu/6OYh7Umw=="
+    },
     "xtend": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",

package.json

@@ -30,7 +30,8 @@
     "vue-template-compiler": "^2.5.2",
     "vue-async-computed": "^3.3.1",
     "vuex": "^2.5.0",
-    "object-path": "^0.11.4"
+    "object-path": "^0.11.4",
+    "html2canvas": "^1.0.0-alpha.9"
   },
   "devDependencies": {
     "babel-core": "7.0.0-alpha.3",

src/vue/components/CaptureButton.vue

 <template>
-  <input type="button" @click="capture"/>
+  <input type="button" @click="capture" :value="buttonName"/>
 </template>
 
 <script>
-  import $ from 'jquery'
+  import html2canvas from 'html2canvas'
   export default {
     name: 'capture-button',
     props: {
       target: {
-        type: String,
+        type: window.HTMLElement,
         required: true
+      },
+      ignore: {
+        type: Array,
+        required: false
+      },
+      buttonName: {
+        type: String,
+        default: 'Capture Chart',
+        required: false
       }
     },
     methods: {
       capture () {
-        const target = document.querySelector(`${this.target}`)
-        if (!target) {
-          throw new Error('CaptureButton could not find target for given selector.')
-        }
-        const svgs = document.querySelectorAll(`${this.target} svg`)
+        Array.prototype.forEach.call(this.ignore, el => {
+          el.setAttribute('data-html2canvas-ignore', '')
+        })
+        const svgs = this.target.querySelectorAll('svg')
         svgs.forEach(svg => {
           svg.setAttribute('version', '1.1')
           svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
-          svg.insertAdjacentHTML('afterbegin', this.getDefs())
         })
-        $(target).wrap('<div id="fjs-capture-container"></div>')
-        const b64 = window.btoa(window.decodeURIComponent(window.encodeURIComponent(target.innerHTML)))
-        const blob = this.b64toBlob(b64, 'image/svg+xml')
-        const blobUrl = window.URL.createObjectURL(blob)
-        const a = document.createElement('a')
-        a.style = 'display: none'
-        a.href = blobUrl
-        a.download = 'capture.svg'
-        a.click()
-        window.URL.revokeObjectURL(blobUrl)
-        // TODO remove defs again
-      },
-      b64toBlob (b64Data, contentType, sliceSize) {
-        contentType = contentType || ''
-        sliceSize = sliceSize || 512
-        const byteCharacters = window.atob(b64Data)
-        const byteArrays = []
-        for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
-          const slice = byteCharacters.slice(offset, offset + sliceSize)
-          const byteNumbers = new Array(slice.length)
-          for (let i = 0; i < slice.length; i++) {
-            byteNumbers[i] = slice.charCodeAt(i)
-          }
-          const byteArray = new Uint8Array(byteNumbers)
-          byteArrays.push(byteArray)
-        }
-        return new window.Blob(byteArrays, {type: contentType})
-      },
-      getDefs () {
-        const rules = []
-        for (let sheet of document.styleSheets) {
-          for (let rule of sheet.cssRules) {
-            if (rule instanceof window.CSSStyleRule) {
-              rules.push(rule.cssText)
-            }
-          }
-        }
-        return `<defs><style type="text/css"><![CDATA[${rules.join('')}]]></style></defs>`
+        html2canvas(this.target).then(canvas => {
+          const dataUrl = canvas.toDataURL()
+          const a = document.createElement('a')
+          a.style = 'display: none'
+          a.href = dataUrl
+          a.download = 'capture.png'
+          a.click()
+          window.URL.revokeObjectURL(dataUrl)
+        }).then(() => {
+          Array.prototype.forEach.call(this.ignore, el => {
+            el.removeAttribute('data-html2canvas-ignore')
+          })
+        })
       }
     }
   }
 </script>
-
-<style lang="sass" scoped>
-
-</style>