Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-28 04:56:13 +00:00
Code Issues Actions Projects Releases Wiki Activity

visgraph: export canvas as image

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-11-12 15:18:41 +01:00
parent 95610ffd34
commit fa7409bdf8
1 changed files with 42 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
View File

@ -8,9 +8,9 @@
<button type="button" class="list-group-item list-group-item-action btn btn-create" @click="createRelationship">
{{ $t('visgraph.add_link') }}
</button>
<button type="button" class="list-group-item list-group-item-action btn btn-misc">
<a type="button" class="list-group-item list-group-item-action btn btn-misc" id="exportCanvasBtn" @click="exportCanvasAsImage">
<i class="fa fa-camera fa-fw"></i> {{ $t('visgraph.screenshot') }}
</button>
</a>
<button type="button" class="list-group-item list-group-item-action btn btn-light" @click="refreshNetwork">
<i class="fa fa-refresh fa-fw"></i> {{ $t('visgraph.refresh') }}
</button>
@ -231,17 +231,17 @@ export default {
this.getRelationsList()
},
methods: {
forceUpdateComponent() {
//console.log('!! forceUpdateComponent !!')
this.refreshNetwork
this.$forceUpdate()
},
initGraph() {
this.container = document.getElementById('visgraph')
// Instanciate vis objects in separate window variables, see vis-network.js
window.network = new vis.Network(this.container, this.visgraph_data, window.options)
},
forceUpdateComponent() {
//console.log('!! forceUpdateComponent !!')
this.refreshNetwork
this.$forceUpdate()
},
// events
listenOnGraph() {
@ -444,6 +444,41 @@ export default {
default:
throw "uncaught action"
}
},
// export image
exportCanvasAsImage() {
const canvas = document.getElementById('visgraph')
.querySelector('canvas')
console.log(canvas)
let link = document.getElementById('exportCanvasBtn')
link.download = "filiation.png"
canvas.toBlob(blob => {
console.log(blob)
link.href = URL.createObjectURL(blob)
}, 'image/png')
/*
TODO improve feature
// 1. fonctionne, mais pas de contrôle sur le nom
if (canvas && canvas.getContext('2d')) {
let img = canvas.toDataURL('image/png;base64;')
img = img.replace('image/png','image/octet-stream')
window.open(img, '', 'width=1000, height=1000')
}
// 2. fonctionne, mais 2 click et pas compatible avec tous les browsers
let link = document.getElementById('exportCanvasBtn')
link.download = "image.png"
canvas.toBlob(blob => {
link.href = URL.createObjectURL(blob)
}, 'image/png')
*/
}
}
}