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 相关文章推荐
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
javascript 写类方式之四
Jul 05 Javascript
javascript 得到变量类型的函数
May 19 Javascript
iframe的onreadystatechange事件在firefox下的使用
Apr 16 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
js编写简单的计时器功能
Jul 15 Javascript
提升页面加载速度的插件InstantClick
Sep 12 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 Javascript
vue实现搜索过滤效果
May 28 Javascript
如何基于filter实现网站整体变灰功能
Apr 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
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
PHP之autoload运行机制实例分析
2014/08/28 PHP
php猜单词游戏
2015/09/29 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
use jscript List Installed Software
2007/06/11 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
python实现给字典添加条目的方法
2014/09/25 Python
github配置使用指南
2014/11/18 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
python 阶乘累加和的实例
2019/02/01 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
Python如何绘制日历图和热力图
2020/08/07 Python
机械设计及其自动化专业推荐信
2013/10/31 职场文书
毕业生文员求职信
2013/11/03 职场文书
社区庆八一活动方案
2014/02/02 职场文书
个人函授自我鉴定
2014/03/25 职场文书
教师新年寄语
2014/04/03 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
Python打包exe时各种异常处理方案总结
2021/05/18 Python
tomcat默认最大连接数及相关调整方法
2022/05/06 Servers
移除Selenium中window.navigator.webdriver值
2022/06/10 Python