文档章节

JS实现在线生成带logo的二维码

刘明欢
 刘明欢
发布于 2018/05/09 16:55
字数 326
阅读 267
收藏 0

      jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码。此插件是能够独立使用的,体积也比较小,使用gzip压缩后才不到4kb。因为它是直接在客户端生成的条码, 所以不会有图片下载的过程,能够实现快速生成。它是基于一个多语言的类库封装的,也不依赖于其他额外的服务。

     好处:使用jquery-qrcode的好处,不需要在服务器端生成多余的二维码图片,二维码直接通过JavaScript直接在客户端生成,有效减少带宽,以及维护成本。

       缺点:不能生成带logo的二维码。

       下面我介绍的是以jquery-qrcode为基础改造的能够生成带logo的二维码的js库。

<!DOCTYPE html>
<html>
    <head>
        <title>Demo page</title>
    </head>
    <body>
        <div id="output"> </div>

        <script src="./jquery.min.js"></script>
        <script type="text/javascript" src="./jquery.qrcode.min.js"></script><!--这里不再调用官方的压缩文件,换成从本帖内下载的jquery.qrcode.min.js文件-->

        <script>
            jQuery(function() {
                jQuery('#output').qrcode({
                    text: "电视端",
                    //height: 250,
                    //width: 250,
                    logo: 'logo.png'//这里配置Logo的地址即可。
                });
            })

        </script>

    </body>
</html>

源码可以到Gitbub上下载:jqqrcode 

© 著作权归作者所有

刘明欢
粉丝 3
博文 3
码字总数 949
作品 3
成都
私信 提问
开源中国在线工具 ostools.net 上线

为了方便程序员们开发中查询文档、编码转换、调试 JavaScript 等需求,我们将一些常用工具和文档集合在一起,推出新的网站 www.ostools.net 。 目前提供的工具包括: API 文档 JavaScript 在...

oschina
2012/07/10
12K
198
推荐10款来自极客标签的超棒前端特效[第二期]

日期:2013-5-3 来源:GBin1.com 本周推荐的10款来自极客社区的前端特效!希望大家会喜欢! CSS实现的工厂动画效果 一套设备运作的卡通模拟效果,非常有趣! GBdebug在线调试地址:http://ww...

gbin1
2013/05/06
4
0
前端性能优化指南

在“A Node.JS Holiday Season”系列丛书的这一章中,我们将会讨论一些前端性能和介绍一些基于Mozilla的快速开发工具。 我们将要使用前段性能自动化中非常重要的工具之一的connect-cachify。...

Jeky
2013/01/17
4.8K
4
JavaScript实现在线Qrcode二维码生成工具-toolfk程序员在线工具网

本文要推荐的[ToolFk]是一款程序员经常使用的线上免费测试工具箱,ToolFk 特色是专注于程序员日常的开发工具,不用安装任何软件,只要把内容贴上按一个执行按钮,就能获取到想要的内容结果。T...

toolfk
2018/11/26
0
0
谁有JS 版本的在二维码上显示logo?

谁有JS 版本的在二维码上显示logo?

搜索小虫
2013/08/09
158
0

没有更多内容

加载失败,请刷新页面

加载更多

protoc 编译工具

在进行开发 protoc 之前,你需要首先在你的计算机中安装 protoc 编译工具。 下载编译工具 进入 Protocol Buffers 的源代码中然后选择发布的版本中,找到对应的版本。项目的链接地址为:https...

honeymoose
39分钟前
1
0
uniapp + bootstrapvue 移动/PC 一套搞定 (一)配置bootstrapvue

1.准备文件 自己到DCloud官网: http://dcloud.io/ 去下载官方的IDE Hbuilder,新建一个空的uniapp项目即可。 uniapp框架自带优化的vue,我们仅仅需要准备以下三个文件: bootstrap.min.css ...

panyunxing
今天
9
0
Android Camera原理之camera service类与接口关系

camera service主要是指 frameworks/av/services/camera/下面的代码,最近在看这一块的代码,为了更好地理清这一块的代码,也为了后续学习camera方便一些,我觉得很有必要理一下这一块的整体...

天王盖地虎626
今天
2
0
Golang学习笔记

[TOC] Golang学习笔记 这个学习笔记是最早在1.初,版本左右的时候写的,和当前最新的版本可能会有较大的差异. 因为成文比较早,文章里面又有很多自己的见解,有些东西当时理解的不太透彻可能写错...

我爱吃炒鸡
今天
14
0
科技赋能成效显著!金融壹账通两大赋能项目荣获IDC大奖

7月19日,2019IDC中国未来金融论坛曁颁奖典礼于北京举办。由金融壹账通赋能的长春农商银行多人视频面审智能风控系统、包头农商银行互联网银行SaaS服务两大项目因在项目的创新性、技术领先性、...

IFTNews
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部