JS实现将链接生成二维码并转为图片的方法


Posted in Javascript onMarch 17, 2018

本文实例讲述了JS实现将链接生成二维码并转为图片的方法。分享给大家供大家参考,具体如下:

<div id="code"></div>
<img id="img"/>
<script type="text/javascript">
  var qrcode=$("#code").qrcode({
    render:'canvas||table',
    width: 200, //宽度
    height:200, //高度
    text: "http://www.baidu.com" //任意内容
  }).hide();
  var canvas=qrcode.find('canvas').get(0);
  //如果有循环,此句必不可少 qrcode.find('canvas').remove();
  var data = canvas.toDataURL('image/jpg');
  $('#img').attr('src',data) ;
  saveFile(data,"fd范德萨范德萨");
  //转为图片的方法,需要上门的data
  function saveFile(data,filename){
    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);
  };
</script>

注:这里使用了qrcodejs插件,github可参考https://github.com/davidshimjs/qrcodejs

Javascript 相关文章推荐
基于jquery的$.ajax async使用
Oct 19 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
Sep 04 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
Aug 28 Javascript
JavaScript中的this机制
Jan 30 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
小程序自定义日历效果
Dec 29 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
vue之a-table中实现清空选中的数据
Nov 07 Javascript
在vue中使用Echarts画曲线图的示例
Oct 03 Javascript
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
基于vue1和vue2获取dom元素的方法
Mar 17 #Javascript
解决vue页面DOM操作不生效的问题
Mar 17 #Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 #Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 #Javascript
vue获取当前激活路由的方法
Mar 17 #Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 #Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 #Javascript
You might like
PHP n个不重复的随机数生成代码
2009/06/23 PHP
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
php获取域名的google收录示例
2014/03/24 PHP
分享php分页的功能模块
2015/06/16 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
php中上传文件的的解决方案
2018/09/25 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
jquery 学习之二 属性(类)
2010/11/25 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
详解js中的几种常用设计模式
2020/07/16 Javascript
教你安装python Django(图文)
2013/11/04 Python
python轻松查到删除自己的微信好友
2016/01/10 Python
Python的组合模式与责任链模式编程示例
2016/02/02 Python
python监控文件或目录变化
2016/06/07 Python
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
Django如何自定义分页
2018/09/25 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
大班开学家长寄语
2014/04/04 职场文书
精神文明建设标语
2014/06/16 职场文书
CSS极坐标的实例代码
2021/06/03 HTML / CSS
Oracle创建只读账号的详细步骤
2021/06/07 Oracle