svg格式图像导出为png图片

思路：（svg => canvas => png）

1、把svg作为dataurl放在image
2、创建一个canvas来显示image
3、利用canvas.toDataURL存为图片
4、创建a标签出发浏览器下载

可以解决导出后图片显示不全问题

doexport(){ var serializer = new XMLSerializer();var svg1 = document.querySelector('#penetrateChart svg');var toExport = svg1.cloneNode(true);var bb = svg1.getBBox();toExport.setAttribute('viewBox', bb.x + ' ' + bb.y + ' ' + bb.width + ' ' + bb.height);toExport.setAttribute('width', bb.width);toExport.setAttribute('height', bb.height);var source = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(toExport);var image = new Image;image.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);var canvas = document.createElement("canvas");canvas.width = bb.width;canvas.height = bb.height;var context = canvas.getContext("2d");context.fillStyle = '#fff';//#fff设置保存后的PNG 是白色的  context.fillRect(0, 0, 10000, 10000);image.onload = function() {  context.drawImage(image, 0, 0);  var a = document.createElement("a");  a.download = "Atlas.png";  a.href = canvas.toDataURL("image/png");a.click();}},

以上内容转自：svg图像保存为png图片（能解决可缩放svg图像转换为png后显示不全问题）

svg格式图像导出为png图片相关推荐

gif透明背景动画_BMP、GIF、TIFF、PNG、JPG和SVG格式图像的特点
一张图片可以储存为多种格式,为什么有的几十KB,有的几百MB,有的静止不动,有的是好几个画面循环播放?在项目开发的过程中经常会读取或保存图像文件,不同类型的图像特点不同,适用的范围也不同,简要介绍BM ...
SVG格式文件可以用什么软件打开?
SVG是一种基于矢量的图像文件格式,通过基于网格上的点和线的数学公式存储图像,与 JPEG 等基于像素的位图文件不同.这种文件类型可以在不损失任何质量的情况下生成很小的文件,因而加载速度也相对更快,也 ...
LabVIEW读写各类格式图像的方法（基础篇—1）
目录 1.读写各类格式图像的方法 1.1.LabVIEW集成图像读写函数 1.2.Nl Vision图像读写函数 2.小试牛刀图像数据被采集至内存缓冲区后,机器视觉软件即可对其施加各种图像预处理.图 ...
AI批量导出SVG格式图片
软件版本:Illustratorlcc2015 解决直接用ai批量导出时,勾选画板得到空白svg图像问题. 解决方法: 先用画板导出为EPS格式一个一个的大小,每一个可以使用画板, 然后在AI打开所有 ...
项目中使用svg格式的字符串转换图片并把图片插入到word和pdf文档
在用Highcharts做图表展示的时候使用到的功能.提供前端页面以及Java后台对svg格式的字符串转换为具体的图片废话不多了直接上干货主要代码 web端 <!DOCTYPE HTML&g ...
QT5开发及实例学习之十八显示Qt5 SVG格式图片
SVG 的英文全称是 Scalable Vector Graphics,即可缩放的矢量图形.它是由万维网络联盟 ( World Wide Web Consortium, W3C ) 在 2000 ...
cad转图片，cad图纸该如何转换成svg格式图片呢？
CAD转SVG格式图片非常实用方便,优点是可以让用户直接用代码来描绘图像,而且用任何文字处理工具都可以打开SVG图像.CAD制图工作中,我们需要把CAD转换成图片.cad图纸该如何转换成svg格 ...
element适配svg格式图片
SVG格式图片的配置名词解释: svg是可缩放矢量图形,顾名思义就是任意改变其大小也不会变形,基于可扩展标记语言(xml),他严格遵守XML语法,并用文本格式的描述性语言来描述图像内容.用户可以直接 ...
怎么用class引入svg_利用AI工具，将图片格式转换为SVG格式操作
这几天,有读者留言,问怎么把图片转换为SVG格式,网上有在线转换的工具,百度搜索下,就能找到好几个网站提供这样的服务,简单的图片可以,有些复杂的图片输出后有点问题,这个需要大家自行测试,这里就不推荐哪 ...

svg格式图像导出为png图片

svg格式图像导出为png图片相关推荐

最新文章

热门文章