目录

网页生成二维码 1

将二维码变成图片 2

1效果：二维码变成了图片 2

下载二维码 2

1全部代码 3

网页生成二维码

  1. 导入生成二维码需要的js文件（https://github.com/lrsjng/jquery-qrcode）

<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>

<script type="text/javascript" src="js/jquery.qrcode.js" ></script>

<script type="text/javascript" src="js/qrcode.js" ></script>

<script type="text/javascript" src="js/utf.js" ></script>
  1. 网页写入样式

<body>

<p>Render in table</p>

<div id="qrcodeTable"></div>

<p>Render in canvas</p>

<div id="qrcodeCanvas"></div>

</body>
  1. 写入js代码

<script>

jQuery('#qrcodeTable').qrcode({

render    : "table",                <!--二维码生成方式 -->

text    : "http://www.baidu.com" , <!-- 二维码内容  -->

width : "200",               //二维码的宽度

height : "200",

});

jQuery('#qrcodeCanvas').qrcode({

render    : "canvas",

text    : "http://www.baidu.com",

width : "200",               //二维码的宽度

height : "200",              //二维码的高度

background : "#ffffff",       //二维码的后景色

foreground : "#000000",        //二维码的前景色

src: 'img/gray.jpg'             //二维码中间的图片

});

</script>
  1. 效果：

将二维码变成图片

<script>

var aa=jQuery(‘#qrcodeTable').qrcode({

render : "table",                <!--二维码生成方式 -->

text : "http://www.baidu.com" , <!-- 二维码内容  -->

width : "200",               //二维码的宽度

height : "200",

}).hide();//将生成的二维码隐藏起来

//将二维码生成图片

var canvas=aa.find(‘canvas’).get(0);

//这里我们需要在页面定义一个img标签，<img id=”qrcodeImg’”></img>

$(‘#qrcodeImg’).attr(‘src’,canvas.toDataURL());

</script>

1效果：二维码变成了图片

下载二维码

先在页面定义一个按钮

<button id="ss">下载图片</button>

给按钮添加响应事件

<script>

$(function(){

$(“#ss”).click(function(){

downloadImage(‘qrcodeImg’,’picture’)//第一个参数是img的id  第二个参数是你随便取得名称

});

});

function downloadImage(selector,name){

// 通过选择器获取img元素

         var img = $("#selector");

// 将图片的src属性作为URL地址

         var url=document.getElementById(selector).src;

var a = document.createElement('a')

var event = new MouseEvent('click')

a.download = name || name

a.href = url

a.dispatchEvent(event)

}

</script>

1全部代码

<%@page contentType="text/html; charset=UTF-8"%>

<%@taglib uri="/struts-tags" prefix="s"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ page isELIgnored="false"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>活动详情</title>

<link href="jules/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">

<link href="jules/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">

<link href="jules/css/animate.min.css" rel="stylesheet">

<link href="jules/css/style.min862f.css?v=4.1.0" rel="stylesheet">

<script src="jules/js/bootstrap.min.js?v=3.3.6"></script>

<script type="text/javascript" src="jss/js/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="jss/js/jquery.qrcode.js"></script>

<script type="text/javascript" src="jss/js/qrcode.js"></script>

<script type="text/javascript" src="jss/js/utf.js"></script>

</head>

<body class="gray-bg">

<div id="code"></div>

<button id="ss">下载图片</button>

<p>Render in table</p>

<div id="qrcodeTable"></div>

<img src="" id="qrcodeImg" />

<br>

<p>Render in canvas</p>

<div id="qrcodeCanvas"></div>

<script>

$(function(){

$("#ss").click(function(){

downloadIamge('qrcodeImg', 'picture')

});

});

function downloadIamge(selector, name) {

// 通过选择器获取img元素

    var img = $("#selector");

// 将图片的src属性作为URL地址

//  var url = $("selector").attr('src');

    var url=document.getElementById(selector).src;

var a = document.createElement('a')

var event = new MouseEvent('click')

a.download = name || name

a.href = url

a.dispatchEvent(event)

}

</script>

<script> 

   var aa= jQuery('#qrcodeTable').qrcode({

render    : "canvas",                //<!--二维码生成方式 -->

text    : "http://news.baidu.com/" , //<!-- 二维码内容  -->

width : "200",               //二维码的宽度

height : "200",

}).hide();

var bb=jQuery('#qrcodeCanvas').qrcode({

render    : "canvas",

text    : "sss",

width : "200",               //二维码的宽度

height : "200",              //二维码的高度

background : "#ffffff",       //二维码的后景色

foreground : "#000000",        //二维码的前景色

src: 'jss/img/gray.jpg'             //二维码中间的图片

});

//将二维码生成图片

     var canvas =bb.find('canvas').get(0);

$('#qrcodeImg').attr('src', canvas.toDataURL());

</script>

</body>

</html>

全部内容：https://pan.baidu.com/s/1y0NH5AjZO74b-LK8aixzWg

网页生成二维码 把二维码变成图片 下载二维码相关推荐

  1. python玩王者荣耀皮肤_python 王者荣耀皮肤高清图片下载 附源码

    本帖最后由 你isbest 于 2018-3-20 16:33 编辑 最近在学python ,用python做了一个王者荣耀的皮肤高清图片的下载工具,发给大家这个是从官网下载一个json文件,所以是实 ...

  2. discuz迪恩素材教程资源图片下载站源码

    介绍: 1.版本支持:discuzx3.0版本,discuzx3.1版本,discuzx3.2,discuzx3.3版本. 2.模板论坛首页,列表页,内容页,以及文章页面数据采用DIY数据读取,方便新 ...

  3. 【Vue+Java】前后端联动生成下载二维码

    目录指引 背景 运用场景 环境 丑话说在前 前端部分 通过axios请求传参 二次封装axios.create方法 定义download方法,通过axios进行传参 前端vue页面方法 HTML部分按 ...

  4. 在页面点击“生成二维码”，直接把二维码图片下载下来

    在页面设置一个"生成二维码"按钮,点击按钮,调用后台生成一个二维码图片,直接在浏览器下载下来. 生成二维码工具类QRCodeUtil.java:这个工具类需要导入依赖 <!- ...

  5. qrcodejs2生成二维码，通过canvas绘制带边框+中间logo的二维码图片，下载二维码

    文章目录 一.通过qrcodejs2生成一个二维码 二.点击[下载配置服务器二维码]来下载二维码 1.通过canvas去绘制 边框+二维码+logo (1)为canvas增加绘制圆角矩形的方法(can ...

  6. android 快传 源码_最新安卓仿茄子快传APP源码包括服务端源码Android开发快传类项目源码全套...

    适使用范围:  安卓APP茄子快传源码 Android项目源码相似茄子快传的快传项目包括服务端 运行环境:  Android app 源码详细: 本项目是一个基于安卓的相似茄子快传的项目源码,包括安卓 ...

  7. 下载Android源码流程（完整版）

      要在Linux环境下操作,要在Linux环境下操作,要在Linux环境下操作~~ 不要想在Windows环境下操作,因为会有各种问题.Windows环境的童鞋又不想装双系统的可以跟着下面的操作,L ...

  8. windows平台下载android源码

    最近在看<android内核剖析>,很多细节不具体看代码很难理解,记住了印象也不深,感觉还是跟着源码走一遍好些,回来下载android源码,遇到不少问题,终于开始下载了,整理下流程,鉴于网 ...

  9. Unity发布PC平台，接入微信开放平台网页应用，扫码登录不拉起浏览器直接显示二维码在UI上

    文章目录 一.前言 二.登录微信开放平台,申请网页应用 三.抓取授权二维码原理 四.测试 五.核心代码 六.补充:如何知道用户扫码成功 一.前言 Unity发布PC平台,如果在PC平台想要使用微信登录 ...

最新文章

  1. Sublime Text 自动换行
  2. 最新安卓系统细节曝光：后盖手势控制、浮雕式UI、隐私保护.....本月更新！
  3. 4.2w Star的文件同步工具，比VIP网盘还好用！
  4. 三十一、电子商务分析与服务推荐
  5. 爬虫工程师是干什么的？你真的知道了吗？
  6. 26.PhantomData幽灵数据.rs
  7. OpenStack推出最新版本Newton，显著提升单一云平台 对虚拟化、裸机和容器的管理...
  8. 连连看（HDU-1175）
  9. 【Flink】Flink1.12.0 FlinkSQL消费Kafka 使用 temporal join 关联维表Hive 最新分区数据 join 不上
  10. GitHub+Hexo 搭建个人网站
  11. 磨刀不误砍柴工，使用visual studio之前应该先了解这些...
  12. web调用qq临时会话
  13. 神经网络与深度学习（第一章）（五）
  14. 解决Gitlab的The remote end hung up unexpectedly错误
  15. PS怎么制作下雨天玻璃水雾图片效果
  16. 小程序个人中心（我的页面）
  17. 在计算机术语中只读存储器常用,计算机应用基础复习题.doc
  18. 关于两个数相乘, 求其为多少进制
  19. 金蝶中间件AAS无法访问管理平台提示404
  20. 阵列卡直通模式和raid模式_DNF：希洛克Raid攻略，一不小心就被全屏秒杀

热门文章

  1. 「星辰大海」你可能需要知道的 promise 知识的总结（内附思维导图）
  2. 第三方支付平台是什么意思？
  3. go int 转成time.Duration int64转成time.Duration
  4. 找不到/usr/bin/ld: 找不到 -lxxxx
  5. 用Java实现一个区块链系统 附源码！
  6. 吴军三部曲见识（四） 大家智慧
  7. 电流引导型 DAC Current Steering
  8. 计算机思维与应用课程报告,论计算机思维培养的论文(2)
  9. SAP学习2---基础
  10. vue的echarts,饼图结合 width:100； display:none显示不完全