靳闯博客 记录是一种习惯,分享是一种态度
  • 波浪
  • 波浪
  • 波浪
  • 波浪
SVG画布代码转成png图片下载
发表于: | 分类: 技术积累 | 标签: SVG | 评论:3 | 阅读: 1853

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


商业转载请联系作者获得授权,非商业转载请注明出处,谢谢合作。


如果这篇文章帮助到了你,我感到十分荣幸!

已有 3 条评论

  1. qy qy   GNU/Linux x64 Google Chrome 74.0.3729.169

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

    1. J.C J.C   Windows 10 x64 Edition Google Chrome 78.0.3904.108

      第一次打开是有可能空白的,再刷新下页面 下载的就是有内容的了,我当时也是有这个需求找的别人写的js代码,我也不懂js反正这个能实现需求就行

  2. YAMADIE YAMADIE   Windows 7 x64 Edition Google Chrome 68.0.3423.2

    学习了,感谢分享

或许你不想写点什么·但我依旧在这里

icon_mrgreen.pngicon_neutral.pngicon_twisted.pngicon_arrow.pngicon_eek.pngicon_smile.pngicon_confused.pngicon_cool.pngicon_evil.pngicon_biggrin.pngicon_idea.pngicon_redface.pngicon_razz.pngicon_rolleyes.pngicon_wink.pngicon_cry.pngicon_surprised.pngicon_lol.pngicon_mad.pngicon_sad.pngicon_exclaim.pngicon_question.png2018new_aini_org.png2018new_baobao_thumb.png2018new_erha_org.png2018new_kuxiao_thumb.png2018new_yun_thumb.png2018new_hufen_thumb.png2018new_gui_org.png2018new_xiaoerbuyu_org.png2018new_heixian_thumb.png2018new_wabi_thumb.png2018new_tianping_thumb.png

站点地图 网站地图
豫ICP备17003270号 | Copyright © 2019 💖 靳闯博客
Typecho🍹Sgreen
TOP