zoukankan      html  css  js  c++  java
  • js+canvas实现svg标签另存为图片

    我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持。
    研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代码信息,并发送到到服务器端,由后端程序转换成图片格式后,以流的形式反射给浏览器端下载。

    最近在项目中有需求将一个非HighChart的SVG地图转存为图片并下载的功能。
    本希望模拟HighChart的原理实现,可是研究发现,该地图的SVG代码信息多达两万字节,然而HighChart后端制图程序却有着字节数限制,所以就不能这么处理了。

    然后国外社区讨论的方法也多是前后端协同处理来完成这个功能的,这样实现会比较重, 而且部署不便。

    经过一番搜寻,终于发现一个不依赖任何外部库,框架,同时仅仅通过浏览器端js便能实现的方法。 代码实现的具体来源地址已经忘记了, 这里保留代码原创作者的版权哈。

    首先,我们约定SVG的上下文结构是如下的:

    <div class="svg-wrap">
      <svg>...</svg>
    </div>

    然后,我们就可以通过如下代码来将svg图形转为图片并下载了:

    复制代码
    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(); //点击触发下载
    复制代码
  • 相关阅读:
    .net将动态页面(aspx)生成静态页面htm | html
    js复制Code
    发送Email 附件打包,
    PC大屏自适应 简洁版
    PC大屏自适应
    Java 常见类型转换
    二叉树的四种遍历
    C语言代码质量保证
    System.ComponentModel.Component入门
    旧版MFC自定义CFileDialog Win7中扩展无显示 解决
  • 原文地址:https://www.cnblogs.com/crxis/p/12913389.html
Copyright © 2011-2022 走看看