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 ui(接口)介绍
Sep 17 Javascript
jquery 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
JavaScript 比较时间大小的代码
Apr 24 Javascript
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
javascript中的window.location.search方法简介
Sep 02 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
Aug 04 Javascript
vue-devtools的安装步骤
Apr 23 Javascript
JavaScript实现百度搜索框效果
Mar 26 Javascript
Vue中的methods、watch、computed的区别
Nov 26 Javascript
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 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 strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
PHP和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
PHP错误提示的关闭方法详解
2013/06/23 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
php构造函数与析构函数
2016/04/23 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
python中stdout输出不缓存的设置方法
2014/05/29 Python
使用python开发vim插件及心得分享
2014/11/04 Python
详解Python函数作用域的LEGB顺序
2016/05/14 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
基于python代码批量处理图片resize
2020/06/04 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
商务会议邀请函
2014/01/09 职场文书
护士见习期自我鉴定
2014/02/08 职场文书
运动会跳远加油稿
2014/02/20 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL