一些网站生成图片,需要登录付费下载才可以用,不然你浏览器检查工具看到的只是svg的代码而已,并不是图片!
参考文章:js实现svg图形转存为图片下载
js转换代码:
<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>
完整html代码:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>靳闯博客 - svg转换png图片示例页面</title>
<script src="//code.jquery.com/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>
示例页面:svg画布转换png图片示例页面
注意:打开示例页面第一次自动下载一个png图片有可能会是空白的;请再次刷新页面,得到的png图片就是当前看到的内容了!
本站文章除注明转载/出处外,均为本站原生内容,转载前请注明出处 | 文章链接地址:https://me.jinchuang.org/archives/392.html
你这个例子有问题 输出的图片为空白.
第一次打开是有可能空白的,再刷新下页面 下载的就是有内容的了,我当时也是有这个需求找的别人写的js代码,我也不懂js反正这个能实现需求就行
学习了,感谢分享