svg图片代码data:image/svg+xml转png图片方法

把代码保存为html格式的文件中,用浏览器访问,即可右键保存
从AI软件或其它网站得到svg图片代码后,把他复制到下面源码上
注意:src=""图片地址中,一些参数的含义
d=‘这里是图片代码数据’
viewBox是图片显示区域,宽,高等
fill='%23000000’这里表示颜色 ,后面6位0表示黑色,只修改后6位即可
fill-opacity为1表示图片不透明.小数为透明.其它参数不用修改

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>svg转png</title>
</head>
<body>
<img id="test" src="data:image/svg+xml;
utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' 
viewBox='0 0 555 344' width='555' 
height='344'%3E%3Cpath 
fill='%23000000' 
fill-opacity='1' 
d='M33.7 33.8v-7.5c0-8.2-3.8-11.7-8.1-11.7-6.7 0-8.9 3.5-8.9'
%3E%3C/path%3E%3C/svg%3E">

<p style="border:1px solid #ccc;color:red">
右键点击,图片另存为,png格式的
<img id="png"src=""href="" />
</p>

<script type="text/javascript">
  var test = document.getElementById('test');
  var svghtml = test.getAttribute('src');
var png = document.getElementById('png');
  var img = new Image();
  img.setAttribute('src', svghtml);
  img.onload = function () {
  　　var canvas = document.createElement('canvas');
  　　canvas.width = test.offsetWidth;
  　　canvas.height = test.offsetHeight;
  　　var context = canvas.getContext('2d');
  　　context.drawImage(img, 0, 0);
  　　var canvasData = canvas.toDataURL('image/png');
  　　var a = document.createElement('img');

      var img2 = document.createElement('img');
      img2.setAttribute('src', canvasData);
png.setAttribute('src', canvasData);
    //  img2.onload = function() {
      //  var a = document.createElement('a');
        // a.href = url;
     //   a.download = 'svg.png';
      //  a.href = img2.getAttribute('src');
       // a.click();
    //  }
  　　
  }
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

相关阅读:
微信小程序开发01 双线程模型：为什么小程序不用浏览器的线程模型？
PHP 个人愿望众筹网站系统mysql数据库web结构apache计算机软件工程网页wamp
Kotlin学习笔记之基础篇一
软件工程导论——第三章——需求分析
@SpringBootApplication 注解报红
在线客服功能介绍-了解常见在线客服系统的功能点
MySQL 优化，查询的原理，索引的使用，如何优化查询
Spring Boot事件机制浅析
JAVA基础(四十二)——集合之Collection
redis之常见的集合操作有哪些？

原文地址：https://blog.csdn.net/viqecel/article/details/132871836