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中获取请求的URL参数[正则]
Dec 25 Javascript
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
详解Vue自定义过滤器的实现
Jan 10 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
Feb 06 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
Vue实现导出excel表格功能
Mar 30 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
Jul 18 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 Javascript
基于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 5.3新增魔术方法__invoke概述
2014/07/23 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
2012/09/19 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
原生javascript和jquery判断浏览器版本等信息
2013/07/04 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
nodejs搭建本地服务器并访问文件的方法
2017/03/03 NodeJs
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
select自定义小三角样式代码(实用总结)
2017/08/18 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
js实现购物车功能
2018/06/12 Javascript
js事件on动态绑定数据,绑定多个事件的方法
2018/09/15 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
vue的webcamjs集成方式
2020/11/16 Javascript
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
个人简历自荐信
2014/06/26 职场文书
简易离婚协议书范本
2014/10/24 职场文书
检讨书怎么写
2015/01/23 职场文书