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 相关文章推荐
如何用js控制css中的float的代码
Aug 16 Javascript
JS分割字符串并放入数组的函数
Jul 04 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
javascript实现Table排序的方法
May 15 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 Javascript
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
微信小程序中使用 async/await的方法实例分析
May 06 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
jQuery实现增删改查
Dec 22 jQuery
基于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中include()与require()的区别说明
2017/02/14 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
JS作用域深度解析
2016/12/29 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
用Python遍历C盘dll文件的方法
2015/05/06 Python
Python基本语法经典教程
2016/03/11 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
2019年c语言经典面试题目
2016/08/17 面试题
专业销售业务员求职信
2013/11/18 职场文书
餐饮收银员岗位职责
2014/02/07 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
刚毕业大学生自荐信范文
2014/02/20 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
村干部群众路线整改措施思想汇报
2014/10/12 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android