带有logo的二维码

简介: 带有logo的二维码

摘要:


  

前面介绍了使用javascript生成二维码,但是这样并不能满足我们的需求,我们有时也会看到带有logo的二维码,本文就介绍如何生成带有logo的二维码。


简介:


  

主要使用了svg的文本和图像,我这里也有介绍的,可以先了解这个再来看。二维码使用qrcode.js生成


首先分享下在二维码中插入文字,如下:


<script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="qrcode.js"></script>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g id="qrcode"/>
      <text x="85" y="85" style="fill:orange;font-size: 30;font-weight:bold">夕阳白雪</text>
    </svg>
    <script type="text/javascript">
      var qrcode = new QRCode(document.getElementById("qrcode"), {
          width : 100,
          height : 100,
          useSVG: true
      });
      qrcode.makeCode("http://www.cnblogs.com/xiyangbaixue");
    </script>

 

效果


image.png

带图片的二维码:


<script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="qrcode.js"></script>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g id="qrcode"/>
      <image xlink:href="qq.png" x="130" y="60" height="30" width="30">
    </svg>
    <script type="text/javascript">
      var qrcode = new QRCode(document.getElementById("qrcode"), {
          width : 100,
          height : 100,
          useSVG: true
      });
      qrcode.makeCode("http://www.cnblogs.com/xiyangbaixue");
    </script>


效果:


image.png

相关文章
|
6月前
|
数据采集 人工智能 数据可视化
打造企业级调度系统的最佳实践---以百度热搜关键词为例
本教程详解如何构建自动化分析百度热搜关键词的系统,涵盖代理IP、多线程、任务调度等核心技术,助你打造高效稳定的数据采集引擎。
266 0
|
负载均衡 应用服务中间件 Linux
在Linux中,LVS、Nginx、HAproxy有什么区别?工作中怎么选择?
在Linux中,LVS、Nginx、HAproxy有什么区别?工作中怎么选择?
|
机器学习/深度学习 人工智能 PyTorch
【AI系统】计算图基本介绍
近年来,AI框架如TensorFlow和PyTorch通过计算图描述神经网络,推动了AI技术的发展。计算图不仅抽象了神经网络的计算表达,还支持了模型算子的高效执行、梯度计算及参数训练。随着模型复杂度增加,如MOE、GAN、Attention Transformer等,AI框架需具备快速分析模型结构的能力,以优化训练效率。计算图与自动微分紧密结合,实现了从前向计算到反向传播的全流程自动化。
265 4
【AI系统】计算图基本介绍
|
SQL 关系型数据库 分布式数据库
Citus 简介,将 Postgres 转换为分布式数据库
【10月更文挑战第4天】Citus 简介,将 Postgres 转换为分布式数据库
483 4
|
人工智能 自动驾驶 安全
人工智能浪潮下的伦理困境与未来展望
在AI技术飞速发展的今天,我们站在了一个新的历史节点上。本文将探讨人工智能带来的伦理挑战,并展望未来可能的发展路径。我们将从AI技术的本质出发,分析其对社会、工作和人际关系的影响,进而深入讨论如何平衡技术进步与人类价值的关系,最后提出对未来AI发展的展望和建议。
709 2
|
消息中间件 缓存 Java
高性能电商返利APP架构设计与实现
高性能电商返利APP架构设计与实现
|
JavaScript 前端开发
js对比日期大小
js对比日期大小
210 1
|
安全 Java Spring
Spring Authorization Server 快速入门
Spring Authorization Server 快速入门
1052 0
Spring Authorization Server 快速入门
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的校园服务平台的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的校园服务平台的详细设计和实现
211 0
|
应用服务中间件 nginx
【学习笔记】启动Nginx、查看nginx进程、查看nginx服务主进程的方式、Nginx服务可接受的信号、nginx帮助命令、Nginx平滑重启、Nginx服务器的升级
 1.启动nginx的方式: cd /usr/local/nginx ls ./nginx -c nginx.conf 2.查看nginx的进程方式: [root@localhost nginx]# ps –ef | grep nginx [root@localhost nginx]# ps -ef | grep n
7475 0