vue中svg轉png下載

<template><div><button @click="downloadPng">change</button><svg ref="svg" t="1679989825829" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"p-id="434692" width="200" height="200"><path d="M512 512m-332.8 0a332.8 332.8 0 1 0 665.6 0 332.8 332.8 0 1 0-665.6 0Z" fill="#FC9709" p-id="434693"></path><pathd="M583.9872 173.312c-15.4112-3.328-25.2928-18.688-21.9648-34.0992l20.4288-94.3616c3.328-15.4112 18.688-25.2928 34.0992-21.9648 15.4112 3.328 25.2928 18.688 21.9648 34.0992l-20.4288 94.3616c-3.328 15.4112-18.688 25.2928-34.0992 21.9648zM371.1488 195.6864c-14.4384 6.3488-31.4368-0.256-37.7856-14.6432l-38.912-88.3712c-6.3488-14.4384 0.256-31.4368 14.6432-37.7856 14.4384-6.3488 31.4368 0.256 37.7856 14.6432l38.9632 88.3712c6.3488 14.4384-0.256 31.4368-14.6944 37.7856zM212.1216 338.8928c-7.936 13.6192-25.5488 18.2784-39.2192 10.3424l-83.456-48.5888c-13.6192-7.936-18.2784-25.5488-10.3424-39.2192 7.936-13.6192 25.5488-18.2784 39.2192-10.3424l83.456 48.5888c13.6192 7.936 18.2784 25.5488 10.3424 39.2192zM167.6288 548.1984c1.5872 15.6672-9.9328 29.7984-25.6512 31.3856l-96.0512 9.728c-15.6672 1.5872-29.7984-9.9328-31.3856-25.6512-1.5872-15.6672 9.9328-29.7984 25.6512-31.3856l96.0512-9.728c15.6672-1.5872 29.7984 9.984 31.3856 25.6512zM254.6688 743.68c10.496 11.776 9.472 29.952-2.2528 40.4992l-71.9872 64.3584c-11.776 10.496-29.952 9.472-40.4992-2.2528-10.496-11.776-9.472-29.952 2.2528-40.4992l71.9872-64.3584c11.776-10.496 30.0032-9.472 40.4992 2.2528zM440.0128 850.688c15.4112 3.328 25.2928 18.688 21.9648 34.0992l-20.4288 94.3616c-3.328 15.4112-18.688 25.2928-34.0992 21.9648-15.4112-3.328-25.2928-18.688-21.9648-34.0992l20.4288-94.3616c3.328-15.4112 18.688-25.2928 34.0992-21.9648zM652.8512 828.3136c14.4384-6.3488 31.4368 0.256 37.7856 14.6432l38.9632 88.3712c6.3488 14.4384-0.256 31.4368-14.6432 37.7856-14.4384 6.3488-31.4368-0.256-37.7856-14.6432l-38.9632-88.3712c-6.4-14.4384 0.2048-31.4368 14.6432-37.7856zM811.8784 685.1072c7.936-13.6192 25.5488-18.2784 39.2192-10.3424l83.456 48.5888c13.6192 7.936 18.2784 25.5488 10.3424 39.2192-7.936 13.6192-25.5488 18.2784-39.2192 10.3424l-83.456-48.5888c-13.6192-7.936-18.2784-25.5488-10.3424-39.2192zM856.3712 475.8016c-1.5872-15.6672 9.9328-29.7984 25.6512-31.3856l96.0512-9.728c15.6672-1.5872 29.7984 9.9328 31.3856 25.6512 1.5872 15.6672-9.9328 29.7984-25.6512 31.3856l-96.0512 9.728c-15.6672 1.5872-29.7984-9.984-31.3856-25.6512zM769.3312 280.32c-10.496-11.776-9.472-29.952 2.2528-40.4992l71.9872-64.3584c11.776-10.496 29.952-9.472 40.4992 2.2528 10.496 11.776 9.472 29.952-2.2528 40.4992l-71.9872 64.3584c-11.776 10.496-30.0032 9.472-40.4992-2.2528z"fill="#FC9709" p-id="434694"></path></svg></div> </template><script>export default {name: '',data() {return {},components: {},methods: {downloadPng() {const svg = this.$refs.svg;const canvas = document.createElement('canvas');canvas.width = svg.clientWidth;canvas.height = svg.clientHeight;const ctx = canvas.getContext('2d');const data = new XMLSerializer().serializeToString(svg);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);const a = document.createElement('a');a.href = canvas.toDataURL('image/png');document.body.appendChild(a);a.click();document.body.removeChild(a);};img.src = url;},},mounted() {}, } </script><style scoped> </style>

可能報錯

not allowed to navigate top frame to data

chrome瀏覽器阻止打開Data URI的地址是為了安全考慮，但是下載不是非得打開新的網頁，給a標簽添加download屬性

// 添加 a.download = 'diagram.png';

總結

以上是生活随笔為你收集整理的vue中svg转png下载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。