文档章节

分享两个qrcode 生成二维码的jq

18y
 18y
发布于 2017/01/19 16:00
字数 461
阅读 46
收藏 0

最后在网上发现了两个qrcode 一个算是原作者的(转载的人太多不知道哪个是正版)

http://github: https://github.com/jeromeetie

这个应该是原作者的了但是不支持logo

http://pan.baidu.com/s/1nuSYXL3 百度云js文件

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <meta charset="utf-8"/>
<script src="__PUBLIC__/js/jquery.js"></script>
 <script src="__PUBLIC__/js/qrcode.js"></script>

 <style>
    body{
        text-align: center;
    }
    #qrcode{
      width: 164px;
      height: 164px;
      position: absolute;
  
      text-align: center;
  
      left:0;
      right:0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
 </style>
</head>
<body>
<div>
  <div style="margin-left:auto">
    <div id="qrcode"></div> 
  </div>
</div>

<script>
$('#qrcode').qrcode({
  width: 164,
  height: 164,
  text: "{$link}"
});
</script>
</body>
</html>

 

第二个是别人修改过的,支持中文与logo,亲测可用

js文件 http://pan.baidu.com/s/1b1Be5w

使用方式


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>该二维码支持中文和LOGO</title>

<script type="text/javascript" src="__PUBLIC__/js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/utf.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/jquery.qrcode.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#qrcodeCanvas").qrcode({
      render : "canvas",    //设置渲染方式,有table和canvas,使用canvas方式渲染性能相对来说比较好
      text : "{$link}",    //扫描了二维码后的内容显示,在这里也可以直接填一个网址,扫描二维码后
      width : "200",               //二维码的宽度
      height : "200",              //二维码的高度
      background : "#ffffff",       //二维码的后景色
      foreground : "#000000",        //二维码的前景色
      src: '__PUBLIC__/img/photo.jpg'             //二维码中间的图片
    });
  });
</script>

</head>
<body>
    <center>
      <h2>该二维码支持中文和LOGO</h2>
      <div id="qrcodeCanvas"></div>
    </center>
</body>
</html>

文件路径需要修改成你自己的

© 著作权归作者所有

18y

18y

粉丝 4
博文 96
码字总数 24696
作品 0
河源
程序员
私信 提问
前端如何优雅的制作带LOGO的二维码

说在前面的话... 最近项目有个功能产品列表,可以将不同产品生成不同的二维码,扫码可以进入对应的产品详情页,同时二维码需要带公司logo,需要可以长按调起微信的下载图片的功能,其实也就是...

Color..「Blind」
2018/07/19
0
0
thinkphp5 生成二维码在模板中显示

thinkphp5 生成二维码 使用php qrcode类库 composer require endroid/qrcode 导入phpqrcode类库 2. 类库使用 a.$qrCode = new EndroidQrCodeQrCode();//实例化 b.设置生成二维码生成的各项...

phpervip
2017/10/24
0
0
两种生成带logo二维码的开发总结

一、使用的类库 1、phpqrcode(php库) 2、qrcode.js(javascript库) 二、phpqrcode的使用 只用php的类库,也就是二维码的生成在后台操作。因为要在后台生成带logo的二维码,那么首先必须将...

许家瑞
2016/04/05
4.3K
10
在web页面上快速生成二维码的两种实用方法

二维码是桌面和移动端快速分享的高效手段之一,这里介绍两个不错的快速开发二维码的方法,和大家分享一下~~ 方法1:使用新浪提供的服务 这种方式简单快速,在服务端生成一个二维码的图片,兼...

第三方支付接口
2015/05/18
370
1
使用PHP生成二维码的二种方法(带logo图像)

分享下如何使用PHP生成二维码,以及如何生成中间带LOGO图像的二维码 一、利用Google API生成二维码 Google提供了较为完善的二维码生成接口,调用API接口很简单,以下是调用代码: 二、使用P...

mysoftsky
2014/07/14
214
0

没有更多内容

加载失败,请刷新页面

加载更多

记一次项目启动报java.lang.StackOverflowError

项目是spring boot,之前没有问题,突然有一次debug方式启动的时候报这个错误。 因为其他同事没有问题,线上也没有问题,所以先排除了是代码问题。 开始以为电脑开的软件太多,然后给jvm的内存...

chro008
7分钟前
5
0
idea 2019.2免费激活码

亲测有效到2020.6 812LFWMRSH-eyJsaWNlbnNlSWQiOiI4MTJMRldNUlNIIiwibGljZW5zZWVOYW1lIjoi5q2j54mIIOaOiOadgyIsImFzc2lnbmVlTmFtZSI6IiIsImFzc2lnbmVlRW1haWwiOiIiLCJsaWNlbnNlUmVzdHJpY3Rpb......

Iverson58
15分钟前
3
0
移动APP开发中的重要注意事项

您的移动app在变化吗?如果没有,请确保遵循这些提示进行移动app开发。大多数行业的IT领导者都优先考虑劳动力和消费者的移动性。实现成功的移动app开发具有挑战性,涉及在app功能开发的基础上...

a429011717
22分钟前
5
0
Qt编写自定义控件69-代码行数统计

一、前言 代码行数统计主要用来统计项目中的所有文件的代码行数,其中包括空行、注释行、代码行,可以指定过滤拓展名,比如只想统计.cpp的文件,也可以指定文件或者指定目录进行统计。写完这...

飞扬青云
40分钟前
9
0
驰骋工作流引擎-ccflow关于 “ 是否自动计算未来的处理人”的功能变更

关键字:流程未来节点处理人 工作流快速开发平台 工作流流设计 业务流程管理 asp.net 开源工作流 业务背景:一个流程在启动起来后,是可以对一些节点计算出来处理人是谁,流程的走向。对于另...

孟娟
56分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部