我这里使用是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生成二维码并保存成图片下载的更多相关文章

  1. js生成带有logo的二维码并保存成图片下载

    生成二维码,需要依赖jquery,先引入一个jquery,然后需要一个插件改变过了jquery-qrcode.js 插件代码(需要的自己打开看): /*! jquery-qrcode v0.14.0 ...

  2. 转: jquery.qrcode.js生成二维码插件&转成图片格式

    原文地址: https://blog.csdn.net/u011127019/article/details/51226104 1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持can ...

  3. JS 生成二维码和加上logo图片

    参考链接:https://www.cnblogs.com/chiyi/p/5710324.html,http://www.jq22.com/jquery-info294 demo链接:demo查看 d ...

  4. js生成二维码 qrcode

    js生成二维码 QRcode npm 地址 1.安装qrcode //在项目文件夹中执行: npm install --save qrcode //或者,将其全局安装以使用qrcode命令行来保存qr ...

  5. js生成二维码以及点击下载二维码

    js生成二维码 jquery.qrcode.js可以快速使用页面生成二维码.但改项目有两个小问题:1.不支持中文:2.不支持二维码中间生成图片. 支持中文的jquery-qrcode jquery.q ...

  6. Java与JS生成二维码

    1.二维码概念 二维码/二维条码是用某种特定的集合图形按一定规律在平面上(二维方向上)分布的黑白相间的图形记录数据符号信息的图片. 黑线是二进制的1,空白的地方是二进制的0,通过1.0这种数据组合用于 ...

  7. js 生成二维码图片

    1.用纯JavaScript实现的微信二维码图片生成器 QRCode.js是javascript实现二维码(QRCode)制作生成库. QRCode.js有着良好的跨浏览器兼容性(高版本使用HTML5 ...

  8. js生成二维码的jquery组件–qrcode

    js生成二维码的jquery组件–qrcode 2015/01/30 / 2508 VIEWS / JAVASCRIPT, JQUERY 有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. ...

  9. 使用jquery.qrcode.js生成二维码

    通常生成二维码的方式有两种:第一种是java代码的形式,第二种是通过Js方式. 在这里我做个记录,用js生成二维码,可以在官网下载源码:http://jeromeetienne.github.io/j ...

随机推荐

  1. [ZZ] 多领域视觉数据的转换、关联与自适应学习

    哈工大左旺孟教授:多领域视觉数据的转换.关联与自适应学习 http://blog.sciencenet.cn/home.php?mod=space&uid=3291369&do=blo ...

  2. html限制文本框只能输入数字和一个小数点

    近期在做一个前台页面,有一个文本框是用来输入充值金额的,就想到了限制用户只能输入纯数字的数据且只能包含一个小数点.下面就是我实现的代码 $(function() { //阻止数字键以外的按键输入 $( ...

  3. 在DataFrame数据表里面提取需要的行

    在DataFrame数据表里面提取需要的行 代码功能: 在DataFrame表格中使用loc(),得到我们想要的行,然后根据某一列元素的值进行排序 此代码中还展示了为DataFrame添加列,即直接n ...

  4. Web高级 Ajax和跨域CORS

    Asynchronous JavaScript and XML 1. XMLHttpRequest 前端开发都知道,不多说. var xhr = new XMLHttpRequest(); xhr.o ...

  5. solr的基础使用

    查询运算符 例如:http://localhost:8984/solr/mycore/select?q=*:* :  指定字段查指定值,如返回所有值q=*:* ?  匹配单个字符, 例如: q=tit ...

  6. 前端-JavaScript2-5——JavaScript之运算符进阶

    运算符(Operators,也翻译为操作符),是发起运算的最简单形式. 运算符的分类见仁见智,我们的课程对运算符进行如下分类: 数学运算符(Arithmetic operators) 比较运算符(Co ...

  7. xxl-job源码分析

    1 调度中心API服务 1.任务结果回调服务: 2.执行器注册服务: 3.执行器注册摘除服务: 4.触发任务单次执行服务,支持任务根据业务事件触发: API暴露代码:com.xxl.job.admin ...

  8. JNDI是什么

    参考文章:---为什么 追本溯源 http://www.cnblogs.com/xx0405/p/5332198.html jndi在Spring和tomcat下的使用: https://www.cn ...

  9. 设计模式之Factory Method模式

    作用:将实例的生成交给子类 用Template Method模式来构建生成实例的工厂,这就是Factory Method模式. 在Factory Method中,父类决定实例的生成方式,但并不决定所要 ...

  10. 报错:Exception in thread "main" java.lang.NoClassDefFoundError: Lorg/apache/hadoop/fs/FileSystem

    报错现象: Exception in thread "main" java.lang.NoClassDefFoundError: Lorg/apache/hadoop/fs/Fil ...