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 相关文章推荐
Javascript中eval函数的使用方法与示例
Apr 09 Javascript
JavaScript监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
jQuery ui 1.7更新小结
Aug 15 Javascript
用JavaScript修改CSS属性的代码
May 06 Javascript
利用jquery包将字符串生成二维码图片
Sep 12 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
详解javascript事件冒泡
Jan 09 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
简单的网页广告特效实例
Aug 19 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 Javascript
jquery实现轮播图特效
Apr 12 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
简单实用的.net DataTable导出Execl
2013/10/28 PHP
php自定义函数截取汉字长度
2014/05/15 PHP
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
Node.js(安装,启动,测试)
2014/06/09 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
浅谈Vue 初始化性能优化
2017/08/31 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
解决iView中时间控件选择的时间总是少一天的问题
2018/03/15 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
Python中的pprint折腾记
2015/01/21 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
Python控制台实现交互式环境执行
2020/06/09 Python
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
销售业务员岗位职责
2014/01/29 职场文书
《燕子专列》教学反思
2014/02/21 职场文书
2014年学习全国道德模范事迹思想汇报
2014/09/15 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
2015年监理工作总结范文
2015/04/07 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
浅谈react useEffect闭包的坑
2021/06/08 Javascript