前端下载svg格式图片

前端完成下载svg格式的图片但是下载的该文件只是格式是svg，实际还是图片，图片放大还是会失真

downloadSvg() {new html2canvas(document.querySelector("#echartPdf"), {useCORS: true,allowTaint: true // 这两个属性都是图片跨域相关属性}).then(res => {const width = res.width; //图片宽const height = res.height;//图片高var dataURL = res.toDataURL(); //canvas获取的base64格式//svg 的dom节点(字符串)var svgString = `<svg id="downloadSvg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"width="${width}px" height="${height}px"viewBox="0 0 ${width} ${height}" enable-background="new 0 0 ${width} ${height}" xml:space="preserve"><image id="image0" width="${width}" height="${height}" x="0" y="0" href="${dataURL}"></image></svg>`;let node = document.querySelector('#container')console.log(node);node.insertAdjacentHTML('afterbegin', svgString)this.downsvg(document.querySelector('svg').outerHTML)})}downsvg(arg) {var blob = new Blob([arg], { type: 'image/svg' });var href = window.URL.createObjectURL(blob);var a = document.createElement('a');a.href = href;a.download = '趋势图.svg'; //设置下载svg的名称document.body.appendChild(a);a.click();document.body.removeChild(a);URL.revokeObjectURL(href);}

前端下载svg格式图片相关推荐

Android使用svg格式图片，并改变图片颜色
1.在iconfont网站上下载svg格式图片,iconfont网站地址:iconfont-阿里巴巴矢量图标库,登录后下载 2.Android studio 在drawable文件夹右击,选择New- ...
关于ps图标上传到蓝湖，蓝湖下载svg格式图标空白解决办法
平常我们从阿里矢量图或者其他矢量图下载下来的图标放到ps以后,都会自动栅格化或者生成智能对象, 但是这并不是我们想要的,我们明明下载的矢量图,为啥就变成智能对象或者栅格化了呢?因为ps不支持处理矢量图 ...
QT5开发及实例学习之十八显示Qt5 SVG格式图片
SVG 的英文全称是 Scalable Vector Graphics,即可缩放的矢量图形.它是由万维网络联盟 ( World Wide Web Consortium, W3C ) 在 2000 ...
android支持svg格式图片么,Android Studio2.0中使用SVG图片格式
SVG格式, 适应屏幕, 图片较小, 还有很多优点 . 本文讲解如何使用SVG格式. SVG: Scalable Vector Graphics, 可缩放矢量图形. IRI: Internationa ...
cad转图片，cad图纸该如何转换成svg格式图片呢？
CAD转SVG格式图片非常实用方便,优点是可以让用户直接用代码来描绘图像,而且用任何文字处理工具都可以打开SVG图像.CAD制图工作中,我们需要把CAD转换成图片.cad图纸该如何转换成svg格 ...
element适配svg格式图片
SVG格式图片的配置名词解释: svg是可缩放矢量图形,顾名思义就是任意改变其大小也不会变形,基于可扩展标记语言(xml),他严格遵守XML语法,并用文本格式的描述性语言来描述图像内容.用户可以直接 ...
一键完成：批量转pdf图片为png、svg格式图片
记得以前使用texlive2020时,只要在standalone的选项里面使用convert选项,再加一些设置,就能自动生成高清png 格式的图片了. 自从升级为exlive2022后,才发现再也不能 ...
学习QT之显示SVG格式图片
SVG的英文全称是Scalable Vector Graphics,即可缩放的矢量图形.它是有万维网联盟在2000年8月制定的一种新的二维矢量图形格式,也是规范中的网格矢量图形标准,是一个开发的图形标 ...
svg上传服务器无法显示,让WordPress支持上传SVG格式图片并显示在媒体库中的方法...
让WordPress支持上传SVG格式图片并显示在媒体库中的方法发布时间:2020-12-11 14:18:12 来源:亿速云阅读:167 作者:小新这篇文章将为大家详细讲解有关让WordPre ...

前端下载svg格式图片

前端下载svg格式图片相关推荐

最新文章

热门文章