Browse Source

fix: Moved svg to png to a util function

pull/6905/head
Muhammed Mustafa 1 year ago
parent
commit
7b1898eb80
  1. 68
      packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.vue
  2. 68
      packages/nc-gui/utils/svgToPng.ts

68
packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.vue

@ -1,6 +1,7 @@
<script lang="ts" setup>
import JsBarcode from 'jsbarcode'
import { IsGalleryInj, onMounted } from '#imports'
import { downloadSvg as _downloadSvg } from '~/utils/svgToPng'
const props = defineProps({
barcodeValue: { type: String, required: true },
@ -35,73 +36,6 @@ const generate = () => {
}
}
function copyStylesInline(destinationNode: any, sourceNode: any) {
const containerElements = ['svg', 'g']
for (let cd = 0; cd < destinationNode.childNodes.length; cd++) {
const child = destinationNode.childNodes[cd]
if (containerElements.includes(child.tagName)) {
copyStylesInline(child, sourceNode.childNodes[cd])
continue
}
const style = sourceNode.childNodes[cd].currentStyle || window.getComputedStyle(sourceNode.childNodes[cd])
if (style === 'undefined' || style == null) continue
for (let st = 0; st < style.length; st++) {
child.style.setProperty(style[st], style.getPropertyValue(style[st]))
}
}
}
function triggerDownload(imgURI: string, fileName: string) {
const evt = new MouseEvent('click', {
view: window,
bubbles: false,
cancelable: true,
})
const a = document.createElement('a')
a.setAttribute('download', fileName)
a.setAttribute('href', imgURI)
a.setAttribute('target', '_blank')
a.dispatchEvent(evt)
}
function _downloadSvg(svg: SVGGraphicsElement, fileName: string) {
const copy = svg.cloneNode(true)
copyStylesInline(copy, svg)
const canvas = document.createElement('canvas')
const bbox = svg.getBBox()
canvas.width = bbox.width
canvas.height = bbox.height
const ctx = canvas.getContext('2d')!
ctx.clearRect(0, 0, bbox.width, bbox.height)
const data = new XMLSerializer().serializeToString(copy)
const DOMURL = window.URL || window.webkitURL || window
const img = new Image()
const svgBlob = new Blob([data], { type: 'image/svg+xml;charset=utf-8' })
const url = DOMURL.createObjectURL(svgBlob)
img.onload = function () {
ctx.drawImage(img, 0, 0)
DOMURL.revokeObjectURL(url)
if (typeof navigator !== 'undefined' && navigator.msSaveOrOpenBlob) {
const blob = canvas.msToBlob()
navigator.msSaveOrOpenBlob(blob, fileName)
} else {
const imgURI = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream')
triggerDownload(imgURI, fileName)
}
console.log(canvas)
// TODO: Somehow canvas dom element is getting deleted
// document.removeChild(canvas)
}
img.src = url
}
const downloadSvg = () => {
if (!barcodeSvgRef.value) return

68
packages/nc-gui/utils/svgToPng.ts

@ -0,0 +1,68 @@
function copyStylesInline(destinationNode: any, sourceNode: any) {
const containerElements = ['svg', 'g']
for (let cd = 0; cd < destinationNode.childNodes.length; cd++) {
const child = destinationNode.childNodes[cd]
if (containerElements.includes(child.tagName)) {
copyStylesInline(child, sourceNode.childNodes[cd])
continue
}
const style = sourceNode.childNodes[cd].currentStyle || window.getComputedStyle(sourceNode.childNodes[cd])
if (style === 'undefined' || style == null) continue
for (let st = 0; st < style.length; st++) {
child.style.setProperty(style[st], style.getPropertyValue(style[st]))
}
}
}
function triggerDownload(imgURI: string, fileName: string) {
const evt = new MouseEvent('click', {
view: window,
bubbles: false,
cancelable: true,
})
const a = document.createElement('a')
a.setAttribute('download', fileName)
a.setAttribute('href', imgURI)
a.setAttribute('target', '_blank')
a.dispatchEvent(evt)
}
function downloadSvg(svg: SVGGraphicsElement, fileName: string) {
const copy = svg.cloneNode(true)
copyStylesInline(copy, svg)
const canvas = document.createElement('canvas')
const bbox = svg.getBBox()
canvas.width = bbox.width
canvas.height = bbox.height
const ctx = canvas.getContext('2d')!
ctx.clearRect(0, 0, bbox.width, bbox.height)
const data = new XMLSerializer().serializeToString(copy)
const DOMURL = window.URL || window.webkitURL || window
const img = new Image()
const svgBlob = new Blob([data], { type: 'image/svg+xml;charset=utf-8' })
const url = DOMURL.createObjectURL(svgBlob)
img.onload = function () {
ctx.drawImage(img, 0, 0)
DOMURL.revokeObjectURL(url)
if (typeof navigator !== 'undefined' && navigator.msSaveOrOpenBlob) {
const blob = canvas.msToBlob()
navigator.msSaveOrOpenBlob(blob, fileName)
} else {
const imgURI = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream')
triggerDownload(imgURI, fileName)
}
console.log(canvas)
// TODO: Somehow canvas dom element is getting deleted
// document.removeChild(canvas)
}
img.src = url
}
export { downloadSvg }
Loading…
Cancel
Save