SVG画布代码转成png图片下载
· 技术积累 · SVG

一些网站生成图片,需要登录付费下载才可以用,不然你浏览器检查工具看到的只是svg的代码而已,并不是图片!

参考文章:js实现svg图形转存为图片下载

第一种实现的html代码:访问页面会自动下载生成的图片(透明背景)经测试需要把html放到服务器上才行,放到本地打开保存的一直是空的

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>靳闯博客 - svg转换png图片示例页面</title>
    <script src="https://me.jinchuang.org/download/jquery.min.js"></script>
</head>
<body>
    <div class="svg-wrap">
        <!--你的svg代码放在这里-->
    </div>
<script type="text/javascript">
var svgXml = $('.svg-wrap').html();
var image = new Image();
image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml))); //给图片对象写入base64编码的svg流
var canvas = document.createElement('canvas');  //准备空画布
canvas.width = $('.svg-wrap svg').width();
canvas.height = $('.svg-wrap svg').height();
var context = canvas.getContext('2d');  //取得画布的2d绘图上下文
context.drawImage(image, 0, 0);
var a = document.createElement('a');
a.href = canvas.toDataURL('image/png');  //将画布内的信息导出为png图片数据
a.download = "MapByMathArtSys";  //设定下载名称
a.click(); //点击触发下载
</script>
</body>
</html>

第二种实现的html代码:访问页面会在页面中生成一个baes64编码的图片(白色背景)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Convert SVG to PNG using html2canvas</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
</head>
<body>
  <div id="svg-container">
        <!--你的svg代码放在这里-->
  </div>
  <script>
    var svgContainer = document.getElementById("svg-container");
    html2canvas(svgContainer).then(function(canvas) {
      var imgData = canvas.toDataURL("image/png");
      var imgElement = document.createElement("img");
      imgElement.src = imgData;
      document.body.appendChild(imgElement);
    });
  </script>
</body>
</html>

示例页面:[第一种方法]svg画布转换png图片示例页面

注意:[第一种方法]打开示例页面第一次自动下载一个png图片有可能会是空白的;请再次刷新页面,得到的png图片就是当前看到的内容了!

本文最后更新时间 2023-11-20
文章链接地址:
https://me.jinchuang.org/archives/392.html
本站文章除注明[转载|引用|原文]出处外,均为本站原生内容,转载前请注明出处


留言列表

  1. qy
    qy GNU/Linux Google Chrome · 中国上海市电信 · 回复

    你这个例子有问题 输出的图片为空白.

    1. J.C
      J.C Windows 10 Google Chrome · 中国天津市联通 · 回复

      第一次打开是空白的,再刷新下页面下载的就是有内容的了,html需要放到服务器上打开,如果本地新建文件一直是空白的

  2. YAMADIE
    YAMADIE Windows 7 Google Chrome · 中国广东省东莞市电信 · 回复

    学习了,感谢分享

留言