js实现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(); //点击触发下载

 

转载于:https://www.cnblogs.com/jiangxiaobo/p/6007589.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/489694.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

视图插入数据_用EXCEL作数据分析--招聘信息

前提数据分析职位在哪些城市最多&#xff1f;数据分析师的工资水平怎么样&#xff1f;做数据分析师对学历专业要求怎么样&#xff1f;一、字段信息城市职位名称职位类型公司名称公司规模学历要求所属领域薪资工作年限要求数据预览二、数据清洗首先插入表格&#xff0c;这样后续…

从全球最赚钱的20家公司,我们可以发现什么?

来源&#xff1a;资本实验室在商业的版图中&#xff0c;更少的公司贡献着更多的利润&#xff0c;这已经是一个不争的事实。而在目前&#xff0c;这种现象正在加剧&#xff1a;更多的利润越来越向更少的公司集中。例如&#xff0c;在1975年&#xff0c;美国上市公司共4819家&…

python ftp上传_Python FTP传输的简单示例

对python这个高级语言感兴趣的小伙伴&#xff0c;下面一起跟随编程之家 jb51.cc的小编两巴掌来看看吧&#xff01;访问FTP&#xff0c;无非两件事情&#xff1a;upload和download&#xff0c;最近在项目中需要从ftp下载大量文件&#xff0c;然后我就试着去实验自己的ftp操作类&…

NASA:首批“太空蜜蜂”将赴空间站上班,助宇航员推进研究!

来源&#xff1a;机器人大讲堂2006年&#xff0c;美国宇航局&#xff08;NASA&#xff09;将三个可自由飞行的小型机器人送上国际空间站。这些名为SPHERES &#xff08;同步位置的保持、连通与再定向试验卫星&#xff09;的机器人在太空进行了长达600个小时的实验&#xff0c;开…

k米案例分析

K米产品分析 第一部分 调研、评测 评测 上手体验 大一暑假的时候&#xff0c;在ktv和同学唱k的时候就接触过了。 - -、所以对于k米的第一次上手体验已经不记得了&#xff08;ps&#xff1a;尴尬&#xff09;&#xff01;~其实以前用它的时候想法很简单&#xff0c;不用到点歌台…

java消息对话框用什么做_Java如何创建消息对话框?

本示例演示如何使用JOptionPane类方法创建消息对话框。在下面的代码&#xff0c;你会看到使用的JOptionPane.showMessageDialog()&#xff0c;JOptionPane.showInputDialog()和JOptionPane.showConfirmDialog()。package org.nhooo.example.swing;import javax.swing.*;import …

python教程app 小米应用商店_一篇文章教会你用Python多线程获取小米应用商店App...

【一、项目背景】小米应用商店给用户发现最好的安卓应用和游戏,安全可靠&#xff0c;可是要下载东西要一个一个的搜索太麻烦了。而已速度不是很快。今天用多线程爬取小米应用商店的游戏模块。快速获取。【二、项目目标】目标 &#xff1a;应用分类 - 聊天社交 应用名称&#xf…

传感器发展历史,你知道吗?(图文并茂)

来源&#xff1a;北京物联网智能技术应用协会传感器与通信、计算机被称为现代信息技术的三大支柱和物联网基础&#xff0c;其应用涉及国民经济及国防科研的各个领域&#xff0c;是国民经济基础性、战略性产业之一。当前倍受国际关注的物联网、大数据、云计算技术&#xff0c;乃…

mysql 优化not null_mysql 优化之11:尽可能的使用 NOT NULL

除非你有一个很特别的原因去使用 NULL 值&#xff0c;你应该总是让你的字段保持 NOT NULL。这看起来好像有点争议&#xff0c;请往下看。首先&#xff0c;问问你自己“Empty”和“NULL”有多大的区别(如果是INT&#xff0c;那就是0和NULL)&#xff1f;如果你觉得它们之间没有什…

python第六章函数课后答案_浙大PTA-Python题库 函数题(6-1~6-6)题解

其他各章题解链接如下浙大PTA-Python题库 编程题第一章(1-1~1-3)题解https://blog.csdn.net/zimuzi2019/article/details/107020657浙大PTA-Python题库编程题 第二章(2.1~2.14)题解https://blog.csdn.net/zimuzi2019/article/details/106984549浙大PTA-Python题库 编程题第三章…

我们为什么不能只相信建立在深度学习基础上的人工智能系统

来源&#xff1a;简书本文摘自&#xff1a;https://www.jianshu.com/p/55e1abcd896dGary Marcus介绍了如何实现通用智能以及为什么通用智能可能会让机器更安全。加里•马库斯(Gary Marcus)对深度学习的大肆宣传并不感冒。尽管这位纽约大学教授认为&#xff0c;这项技术在推进人…

matlab向量归一化_已知近似的特征值,求特征向量

对于矩阵A, 已知它的一个近似的特征值&#xff0c; .一般特征值问题在已知特征值后&#xff0c;可确定齐次线性方程 &#xff0c; 是一个齐次线性方程组&#xff0c;且有非零解&#xff0c;即可用null解得其解空间。然而&#xff0c; 在数值上行列式不严格为零&#xff0c;则无…

MVC防止xss攻击 ——Html.AntiForgeryToken的AJAX提交

1、在Html表单里面使用了Html.AntiForgeryToken()就可以阻止CSRF攻击。 2、相应的我们要在Controller中也要加入[ValidateAntiForgeryToken]过滤特性。该特性表示检测服务器请求是否被篡改。注意&#xff1a;该特性只能用于post请求&#xff0c;get请求无效。 3、至于JS&#x…

关于《重启人工智能》11条建议的思考

来源&#xff1a;人机与认知实验室马库斯和欧内斯特戴维斯在他们的新书《重启人工智能》(Rebooting AI)中主张开辟一条新的前进道路。他们相信&#xff0c;我们离获得这样的通用智能还差得很远&#xff0c;但他们也相信&#xff0c;我们最终能够做到这一点。We will also sugge…

cmd中加载java源文件_如何在cmd中编译和运行java源文件

如何在cmd中编译和运行java源文件首先写一个名为HelloWorld.java的java源文件&#xff0c;存储在如C:/java/src的地址&#xff0c;我们再假设待会要存储的位置是C:/java/bin&#xff0c;则我们做一下工作首先&#xff0c;进入cmd环境&#xff0c;输入”C&#xff1a;”回车进入…

python getattr和getattribute_详解Python中 __get__和__getattr__和__getattribute__的区别

引子假设我们有个类A,其中a是A的实例a.x时发生了什么?属性的lookup顺序如下:如果重载了__getattribute__,则调用.a.__dict__, 实例中是不允许有descriptor的,所以不会遇到descriptorA.__dict__, 也即a.__class__.__dict__ .如果遇到了descriptor,优先调用descriptor.沿着继承链…

Hbase随笔

大数据时代的数据量是超大规模的&#xff0c;传统的关系数据库已经很难存储和管理这些数据了&#xff0c;为了存储海量数据&#xff0c;我们有了HDFS&#xff0c;它可以把成千上万台服务器上的硬盘聚集成一块超级大的硬盘&#xff0c;为了让这些数据产生价值&#xff0c;我们有…

《2019中国硬科技发展白皮书》发布,中美硬科技创新指数PK

来源&#xff1a;创新研究10月30日&#xff0c;在2019全球硬科技创新大会上&#xff0c;《2019中国硬科技发展白皮书》正式发布。白皮书从综述篇、科技篇、产业篇和城市篇四个部分&#xff0c;系统论述了发展硬科技的时代背景、硬科技的各领域突破和进展情况、国内各城市硬科技…

JAVA编写提示用户输入投资额_java(计算银行存款总额(要求输入错误时,提示重新输入))...

【任务一】&#xff1a;编写一个简单 Java 程序&#xff0c;计算银行年存款的本息。 要求&#xff1a;程序运行后要求用户输入存款本金、年利率和存款年限&#xff0c;最后程序计算并输出相应年限后存款的金额。相应 的计算公式为&#xff1a;存款总额本金 * (1 利率)存款年限…

这一次,脑机接口可以实时读取人类脑中画面了?

来源&#xff1a;机器之心由俄罗斯脑机接口公司 Neurobotics、莫斯科物理技术学院&#xff08;MIPT&#xff09;研发的一种全新脑机接口算法最近被公之于众&#xff0c;它可以利用人工神经网络和脑电图将人类大脑中的图像实时显示在计算机屏幕上。而且&#xff0c;与马斯克脑机…