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 sortable效果 代码有错但值得看看
Nov 05 Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
bootstrap css样式之表单
Jan 19 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 Javascript
详解AngularJS controller调用factory
May 19 Javascript
解决ie img标签内存泄漏的问题
Oct 13 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
Apr 09 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 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 图像函数大举例(非原创)
2009/06/20 PHP
PHP setTime 设置当前时间的代码
2012/08/27 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
JS控制按钮10秒钟后可用的方法
2015/12/22 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
详解用async/await来处理异步
2019/08/28 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
python梯度下降法的简单示例
2018/08/31 Python
实例讲解python中的协程
2018/10/08 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
锐步英国官网:Reebok英国
2019/11/29 全球购物
工商管理专业职业生涯规划
2014/01/01 职场文书
献爱心活动总结
2014/05/07 职场文书
学籍证明模板
2014/11/21 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers