Commit c0404511 authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

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

parent b517e45c
Pipeline #3505 passed with stages
in 3 minutes and 34 seconds
......@@ -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",
......
<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>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment