HTML5 使用 JS 生成二维码，带头像

一般在项目开发中，前端显示给用户扫描的二维码基本都是由后端代码生成的，那么这个高大上的功能能不能用 JS 来绘制呢？答案是肯定的

首先我们需要一个插件 jquery.qrcode.js，该插件基于 jquery 插件，使用方法很简单，如下

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>二维码</title><script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script><script src="https://blog-static.cnblogs.com/files/lovling/jquery.qrcode.js"></script>
</head>
<style type="text/css">#output {width: 360px;padding: 0;}
</style>
<body> <div id="output"></div>
</body>
<script type="text/javascript">$('#output').qrcode({text: "ninhaonihaohnihao",      // 二维码的内容
        render: "canvas",               // 设置渲染方式
        width: 360,                     // 设置宽度: 默认256
        height: 360,                    // 设置高度: 默认256
        background: "#ffffff",          // 背景颜色
        foreground: "#000000",          // 前景颜色
    });
</script>
</html>

效果如下，这样，我们就可以自己生成二维码了，可以用手机扫一扫，发现能完美获得配置的内容

可是我们发现，某些官方网站的二维码中间是有 logo 的，那么这个可以加 logo 吗？

目前该插件不支持该功能，可是笔者是有强迫症的人，这个黑乎乎的二维码怎么能满足我呢，百度 google 一番，通过修改了插件的一些源码，终于实现了想象中的效果

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>二维码</title><script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script><script src="https://blog-static.cnblogs.com/files/lovling/jquery.qrcode.js"></script>
</head>
<style type="text/css">#output {width: 360px;padding: 0;margin: 100px auto 0 auto;}
</style>
<body> <div id="output"></div>
</body>
<script type="text/javascript">$('#output').qrcode({text: "ninhaonihaohnihao",      // 二维码的内容
        render: "canvas",               // 设置渲染方式
        width: 360,                     // 设置宽度: 默认256
        height: 360,                    // 设置高度: 默认256
        background: "#ffffff",          // 背景颜色
        foreground: "#000000",          // 前景颜色
        src: "./my.jpg",                // logo地址, 图片居中, 图片为二维码的 1/9 为最佳，可适当调整，但是太大会影响二维码的内容
        imgWidth: 120,                  // logo宽度
        imgHeight: 120                  // logo高度
    });
</script>
</html>

效果如下，图片选的不是很好，效果不好看，不过总算是实现了

修改后的插件已上传到博客园，有兴趣的朋友可以下载看看，顺便看看能不能再优化 https://blog-static.cnblogs.com/files/lovling/jquery.qrcode.js

大家可以直接引用改地址，也可以下载后在本地引入

转载于:https://www.cnblogs.com/lovling/p/10518556.html

HTML5 使用 JS 生成二维码，带头像相关推荐

iOS 生成二维码带头像logo 头像logo带边框圆角
1 调用的地方 //生成带边框的圆角图片,这个圆角图标可以先生成,如果放在二维码生成时会影响图片生成速度. self.logo= [self createNewlogoViewView:centerL ...
JS生成二维码(兼容各种浏览器及中文）
本文将介绍如何使用JS生成二维码,兼容各种浏览器及手机端,支持中文. 代码如下: <!DOCTYPE html> <html> <head> <meta ch ...
js生成二维码以及插入图片
js生成二维码以及插入图片先根据qrcode官网demo,不同属性值的变化,二维码的变化效果:https://larsjung.de/jquery-qrcode/latest/demo/ 进入dem ...
JS生成二维码以及点击下载二维码
JS生成二维码效果扫描二维码可访问指定链接或当前网站链接,内容可以自己更改 "复制链接",点击按钮复制当前网站链接如何获取当前网站链接源码 textarea{opacity ...
qrcode.js使用js生成二维码（并下载）的实践
知识点 base64数据形式 Base64是一种用64个字符来表示任意二进制数据的方法. – 廖雪峰官方网站 Base64编码有哪些情景需求? – 知乎案例场景后台生成邀请链接,前端拿到链接之后处 ...
qrcode.js 生成二维码包含logo和背景图片及IE下载二维码
思路: 1. 通过qrcode.js 生成带logo的二维码 2. 将背景图片.logo与生成的二维码图通过canvas 绘制在一起形成一个新的canvas 3. 将canvas 转成base64的u ...
微信小程序——weapp-qrcode.js生成二维码、海报二维码、核销码
各位小伙伴们,不知道你们在开发的时候有没有遇到小程序生成二维码,生成海报时候带上二维码.核销码等等. 那么,小程序端该如何生成二维码图片呢? 效果如下: weapp-qrcode.js 小伙伴们可以来 ...
jquery.qrcode.js生成二维码插件转成图片格式
1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式, github源码地址: https://github.com/jeromeetien ...
JS生成二维码以及保存页面为图片的解决方案:html2Canvas+file-saver+qrcodejs2的使用心得以及解决图片失真，保存不完整的解决办法
前言最近因为工作需求,需要前端根据后端传过来的链接生成二维码,并且要使用JS保存页面为图片.然后网上搜了很多解决办法.最终都是用h5的canvas进行绘制然后保存为图片.其中,又以html2Canv ...

HTML5 使用 JS 生成二维码，带头像

HTML5 使用 JS 生成二维码，带头像相关推荐

最新文章

热门文章