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操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
文字垂直滚动之javascript代码
Jul 29 Javascript
Ionic + Angular.js实现图片轮播的方法示例
May 21 Javascript
详解vue几种主动刷新的方法总结
Feb 19 Javascript
微信小程序保存多张图片的实现方法
Mar 05 Javascript
微信小程序日历弹窗选择器代码实例
May 09 Javascript
JavaScript封闭函数及常用内置对象示例
May 13 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
ES2020 新特性(种草)
Jan 12 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 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
Discuz! Passport 通行证整合
2008/03/27 PHP
php绝对路径与相对路径之间关系的的分析
2010/03/03 PHP
php中防止SQL注入的最佳解决方法
2013/04/25 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
PHP函数rtrim()使用中的怪异现象分析
2017/02/24 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
详解Vue之事件处理
2020/07/10 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
临床医学专业学生的自我评价分享
2013/11/21 职场文书
技术副厂长岗位职责
2013/12/26 职场文书
暑期社会实践学生的自我评价
2014/01/09 职场文书
教师求职自荐信
2014/03/09 职场文书
影子教师研修方案
2014/06/14 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
高中家长意见怎么写
2015/06/03 职场文书
学生会干部任命书
2015/09/21 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
「我的青春恋爱物语果然有问题。-妄言录-」第20卷封面公开
2022/03/21 日漫