js生成二维码并保存成图片下载
我这里使用是jQuery,和jquery.qrcode.js,需要的可以自己找链接下载。示例代码仅做参考
html代码:
<a id="downloadLink"></a>
<button type="button" onclick="downloadClick()">下载</button>
js代码:
$(function(){
var qrcode = $('#qrcode').qrcode({
width: 128,
height: 128,
text: "https://www.baidu.com"
});
downloadClick = function () {
var data = $("canvas")[0].toDataURL().replace("image/png", "image/octet-stream;");//获取二维码值,并修改响应头部。
var filename="tupian.png";//保存的图片名称和格式,canvas默认使用的png格式。这个格式效果最好。
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
}
})
document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
详细查询参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createElementNS
其中第一个参数解释如下:
这不是一个计算值,它是基于检查范围内的命名空间声明的名称空间查找的结果。节点的命名空间URI在节点创建时被固定。
在Firefox 3.5或更早的版本中,HTML文档中HTML元素的名称空间URI是null。在之后的版本中,由http://www.w3.org/1999/xhtml 作为XHTML,符合HTML5.
js生成二维码并保存成图片下载的更多相关文章
- js生成带有logo的二维码并保存成图片下载
生成二维码,需要依赖jquery,先引入一个jquery,然后需要一个插件改变过了jquery-qrcode.js 插件代码(需要的自己打开看): /*! jquery-qrcode v0.14.0 ...
- 转: jquery.qrcode.js生成二维码插件&转成图片格式
原文地址: https://blog.csdn.net/u011127019/article/details/51226104 1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持can ...
- JS 生成二维码和加上logo图片
参考链接:https://www.cnblogs.com/chiyi/p/5710324.html,http://www.jq22.com/jquery-info294 demo链接:demo查看 d ...
- js生成二维码 qrcode
js生成二维码 QRcode npm 地址 1.安装qrcode //在项目文件夹中执行: npm install --save qrcode //或者,将其全局安装以使用qrcode命令行来保存qr ...
- js生成二维码以及点击下载二维码
js生成二维码 jquery.qrcode.js可以快速使用页面生成二维码.但改项目有两个小问题:1.不支持中文:2.不支持二维码中间生成图片. 支持中文的jquery-qrcode jquery.q ...
- Java与JS生成二维码
1.二维码概念 二维码/二维条码是用某种特定的集合图形按一定规律在平面上(二维方向上)分布的黑白相间的图形记录数据符号信息的图片. 黑线是二进制的1,空白的地方是二进制的0,通过1.0这种数据组合用于 ...
- js 生成二维码图片
1.用纯JavaScript实现的微信二维码图片生成器 QRCode.js是javascript实现二维码(QRCode)制作生成库. QRCode.js有着良好的跨浏览器兼容性(高版本使用HTML5 ...
- js生成二维码的jquery组件–qrcode
js生成二维码的jquery组件–qrcode 2015/01/30 / 2508 VIEWS / JAVASCRIPT, JQUERY 有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. ...
- 使用jquery.qrcode.js生成二维码
通常生成二维码的方式有两种:第一种是java代码的形式,第二种是通过Js方式. 在这里我做个记录,用js生成二维码,可以在官网下载源码:http://jeromeetienne.github.io/j ...
随机推荐
- [ZZ] 多领域视觉数据的转换、关联与自适应学习
哈工大左旺孟教授:多领域视觉数据的转换.关联与自适应学习 http://blog.sciencenet.cn/home.php?mod=space&uid=3291369&do=blo ...
- html限制文本框只能输入数字和一个小数点
近期在做一个前台页面,有一个文本框是用来输入充值金额的,就想到了限制用户只能输入纯数字的数据且只能包含一个小数点.下面就是我实现的代码 $(function() { //阻止数字键以外的按键输入 $( ...
- 在DataFrame数据表里面提取需要的行
在DataFrame数据表里面提取需要的行 代码功能: 在DataFrame表格中使用loc(),得到我们想要的行,然后根据某一列元素的值进行排序 此代码中还展示了为DataFrame添加列,即直接n ...
- Web高级 Ajax和跨域CORS
Asynchronous JavaScript and XML 1. XMLHttpRequest 前端开发都知道,不多说. var xhr = new XMLHttpRequest(); xhr.o ...
- solr的基础使用
查询运算符 例如:http://localhost:8984/solr/mycore/select?q=*:* : 指定字段查指定值,如返回所有值q=*:* ? 匹配单个字符, 例如: q=tit ...
- 前端-JavaScript2-5——JavaScript之运算符进阶
运算符(Operators,也翻译为操作符),是发起运算的最简单形式. 运算符的分类见仁见智,我们的课程对运算符进行如下分类: 数学运算符(Arithmetic operators) 比较运算符(Co ...
- xxl-job源码分析
1 调度中心API服务 1.任务结果回调服务: 2.执行器注册服务: 3.执行器注册摘除服务: 4.触发任务单次执行服务,支持任务根据业务事件触发: API暴露代码:com.xxl.job.admin ...
- JNDI是什么
参考文章:---为什么 追本溯源 http://www.cnblogs.com/xx0405/p/5332198.html jndi在Spring和tomcat下的使用: https://www.cn ...
- 设计模式之Factory Method模式
作用:将实例的生成交给子类 用Template Method模式来构建生成实例的工厂,这就是Factory Method模式. 在Factory Method中,父类决定实例的生成方式,但并不决定所要 ...
- 报错:Exception in thread "main" java.lang.NoClassDefFoundError: Lorg/apache/hadoop/fs/FileSystem
报错现象: Exception in thread "main" java.lang.NoClassDefFoundError: Lorg/apache/hadoop/fs/Fil ...