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

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

第一种实现的html代码：访问页面会自动下载生成的图片（透明背景），有的svg代码可以，有的不行(不知道为啥😓)

 <!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-07-01
文章链接地址：https://me.jinchuang.org/archives/392.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>

	<!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>