SVG画布代码转成png图片下载

一些网站生成图片，需要登录付费下载才可以用，不然你浏览器检查工具看到的只是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图片就是当前看到的内容了！

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

留言列表

我要留言