二维码添加背景和头像JS工具类

最新推荐文章于 2023-09-27 15:03:52 发布
最新推荐文章于 2023-09-27 15:03:52 发布
阅读量456 收藏
点赞数 1
文章标签： html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ALI141/article/details/107574654
版权

示例效果：

可以修改背景图片的宽高，二维码的宽高、位置，头像的宽高、位置等。

代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <script src="jquery.qrcode.min.js"></script>
    <script>
        $(function () {
            $("#qr").qr({
                qr: {
                    text: "abc",
                    // width: 100,
                    // height: 100,
                    size: 100,
                    // left: 100,
                    // top: 10,
                    // colorDark: "#000000",
                    // colorLight: "#ffffff",
                    // correctLevel: 2,
                },
                bg: {
                    src: "bg.jpg",
                    // width: 400,
                    // height: 400,
                    scale: 0.5,
                },
                head: {
                    src: "head.jpg",
                    // width: 20,
                    // height: 20,
                    scale: 0.1,
                    // left: 100,
                    // top: 100,
                }
            });
        });
        jQuery.fn.qr = function (x) {
            if (!x.qr) {
                return false;
            }
            var _this = this;
            var qr = {}, bg = {}, head = {};
            var qrImage, bgImage, headImage;
            var canvas = document.createElement("canvas");
            var canvasContext = canvas.getContext("2d");
            setBg();
            function setBg() {
                if (x.bg && x.bg.src) {
                    bgImage = new Image();
                    bgImage.src = x.bg.src;
                    bgImage.onload = function () {
                        bg.width = x.bg.scale ? (x.bg.scale * bgImage.width) : (x.bg.width ? x.bg.width : bgImage.width);
                        bg.height = x.bg.scale ? (x.bg.scale * bgImage.height) : (x.bg.height ? x.bg.height : bgImage.height);
                        setQr();
                    }
                } else {
                    setQr();
                }
            }
            function setQr() {
                qr.text = x.qr.text ? x.qr.text : "";
                qr.width = x.qr.size ? (x.qr.size) : (x.qr.width ? x.qr.width : 256);
                qr.height = x.qr.size ? (x.qr.size) : (x.qr.height ? x.qr.height : 256);
                qr.colorDark = x.qr.colorDark ? x.qr.colorDark : "#000000";
                qr.colorLight = x.qr.colorLight ? x.qr.colorLight : "#ffffff";
                qr.correctLevel = x.qr.correctLevel ? x.qr.correctLevel : 2;
                qr.left = bg.width ? (x.qr.left ? x.qr.left : (bg.width - qr.width) / 2) : 0;
                qr.top = bg.height ? (x.qr.top ? x.qr.top : (bg.height - qr.height) / 2) : 0;
                qrImage = new Image();
                qrImage.src = _this.qrcode(qr).find("canvas").get(0).toDataURL("image/png");
                qrImage.onload = function () {
                    setHead();
                }
            }
            function setHead() {
                if (x.head && x.head.src) {
                    headImage = new Image();
                    headImage.src = x.head.src;
                    headImage.onload = function () {
                        head.width = x.head.scale ? (x.head.scale * headImage.width) : (x.head.width ? x.head.width : headImage.width);
                        head.height = x.head.scale ? (x.head.scale * headImage.height) : (x.head.height ? x.head.height : headImage.height);
                        head.left = x.head.left ? x.head.left : qr.left + (qr.width - head.width) / 2;
                        head.top = x.head.top ? x.head.top : qr.top + (qr.height - head.height) / 2;
                        showImage();
                    }
                } else {
                    showImage();
                }
            }
            function showImage() {
                if (x.bg && x.bg.src) {
                    canvas.width = bg.width;
                    canvas.height = bg.height;
                    canvasContext.drawImage(bgImage, 0, 0, bg.width, bg.height);
                } else {
                    canvas.width = qr.width;
                    canvas.height = qr.height;
                }
                canvasContext.drawImage(qrImage, qr.left, qr.top, qr.width, qr.height);
                if (x.head && x.head.src) {
                    canvasContext.drawImage(headImage, head.left, head.top, head.width, head.height);
                }
                _this.empty();
                _this.append('<img src="' + canvas.toDataURL("image/jpeg", 0.8) + '">');
            }
        }
    </script>
</head>

<body>
    <div id="qr"></div>
</body>

</html>

 

 

 

阿狸141
关注
SpringBoot+zxing+Vue实现前端请求后台二维码图片
BADAO_LIUMANG_QIZHI的博客
02-25 2433
场景 ZXing是一个开源的，用Java实现的多种格式的1D/2D条码图像处理库。 github地址： https://github.com/zxing/zxing 若依微服务版手把手教你本地搭建环境并运行前后端项目： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/109363303 在上面搭建起来SpringBoot+Vue的前后端分离的项目的基础上，要实现前端点击按钮请求后台， 后台将需要的内容，比如是最新版的app下载
制作二维码过程的详解(基于python)_基于opencv+python的二维码识别
weixin_39897218的博客
12-01 1331
花了2天时间终于把二维码识别做出来了，不过效果一般，后面会应用在ROS辅助定位上，废话少说先上图：具体过程参考了这位大神的博客：http://blog.csdn.net/qq_25491201/article/details/51065547详细解释：第一步：利用opencv提取二维码区域1，先将读入的摄像头frame转换成灰度图：gray = cv2.cvtColor(image_path, c...
JS生成带logo的二维码DEMO，带js包，亲自尝试，已适用于项目
07-18
JS生成带logo的二维码DEMO，带js包，亲自尝试，已适用于项目
jQuery+canvas 生成海报（二维码+头像+背景图）
好幸运
09-07 1742
相关搜索： jQuery canvas 头像海报微信二维码 jQuery canvas长按保存 一、背景：因为之前同事用java后端生成海报，导致海报加载缓慢，所以把它放到前端来拼接 二、菜鸟教程：https://www.runoob.com/html/html5-canvas.html 三、准备好需要的材料（图片） html <!-- html中添加 --> <canvas id="myCanvas" width="200...
HTML5 使用 JS 生成二维码，带头像
weixin_30851867的博客
03-12 1366
一般在项目开发中，前端显示给用户扫描的二维码基本都是由后端代码生成的，那么这个高大上的功能能不能用 JS来绘制呢？ 答案是肯定的 首先我们需要一个插件jquery.qrcode.js，该插件基于jquery插件，使用方法很简单，如下 <!DOCTYPE html> <html> <head> <meta charset="UT...
js生成二维码附带logo
HuangHe201691的博客
08-12 749
我这里用的是qrcode.js 1，首先页面引入js 2，页面准备载体 class='none' 这里需要隐藏此图片 3，具体生成方法 text中的内容是跳转路径。width，height等根据具体场景自行定义。
网页二维码生成器纯js代码带logo图纯前端合成
xnzsxnzs的专栏
08-25 4373
通过在静态页面里，插入一段js代码，实现在页面上自动显示网址的二维码。最好放在body最后。 特点：二维码中心带有logo小图，可以被微信识别，可以长按二维码弹出“”识别二维码”，一般使用jquery code的代码，没有中间的图标，也不能被微信识别。 代码如下：   var myqrsize='300';//二维码的大小100-600 var LiftOrRight='righ
[Java] Java生成二维码带LOGO, LOGO加圆角白框
阿航的技术小站
08-15 8027
先来看看效果: 实现: 生成指定文字内容的二维码 二维码中间嵌入LOGO 二维码做圆角和白色边框处理 新需求不断, 这不, 又来了个想生成带用户头像的需求. 蛮简单的… 在这里造完轮子分享给大家 因为公司后端主要是Kotlin写的. 请大家自行翻译. Kotlin和Java本质是一种东西… 有关kotlin写后端是否合适…自己看吧. 人家官网直接支持 不废话了, 上代码 需引入: ...
如何制作一个漂亮的二维码 QRBTF
weixin_42196212的博客
05-17 1870
作者 ciaochaos CPunisher 置顶：我们的二维码生成网站 qrbtf.com 有人说，二维码是 线下向线上转化最重要的入口，无论是对于线下商家、自媒体运营者、策展人还是纸媒编辑，二维码都是非常重要的一环。而标准二维码形式单一、对比浓重，常常在一张海报中「拉低审美」。 缘起 二维码是什么？ 从大学开始，大范围地接触生成艺术——利用计算机算法制作的视听艺术作品，有那么一刻，我心中也会想，二维码不也可以是一种生成艺术？ 还记得几年前的一个下午，我打开了初代 Apple Watch，我.
超火工具箱微信小程序源码
最新发布
05-28
这个源码包括了个性头像制作、壁纸大全、红包封面、二维码生成、影视资讯以及朋友圈文案等多种功能，覆盖了日常生活和娱乐的多个方面。通过分析这个源码，我们可以深入学习微信小程序的开发技术，并理解如何将不同...
带徽标的二维码：带头像（徽标）的二维码（qrcode）生成工具，无jQuery依赖，自由调整大小
02-03
带Logo的QR码（二维码）生成工具 注：当前版本的已支持调整大小，大家可以直接往生成的二维码上覆盖Logo即可。 对的再封装，支持Logo，支持调整大小 一，支持列表 支持npm方式引用， 支持直接[removed]方式引用 支持vue 支持React 支持IE9 + 等 二，使用方法： 1. npm ： npm i --save qr-code-with-logo import QrCodeWithLogo from 'qr-code-with-logo' import LocalImage from './Avatar.png' const myCanvas = document .
生成带头像的二维码并保存分享的demo
12-24
生成带头像的二维码并保存分享的demo，注释很全，可拓展行强
前端生成生成带Logo的二维码
02-13
前端生成生成带Logo的二维码，使用jquery.qrcode的方式，附上源码和js文件
js 生成二维码，自定义二维码样式
09-06
自动生成二维码，可设置二维码样式；自动生成二维码，可设置二维码样式；自动生成二维码，可设置二维码样式；自动生成二维码，可设置二维码样式；
纯前端生成带专属的二维码的海报（完整源码）.rar
10-25
一、纯前端与canvas实现二维码和图片合成海报功能（生成带二维码的好友分享图片） 二、代码完整，可以直接使用
利用jquery-qrcod生成二维码(普通二维码&带头像的二维码)
CapMiachael的博客
09-22 1666
利用jquery-qrcode生成二维码（普通） jquery.qrcode.min.js 下载地址 http://download.csdn.net/download/capmiachael/9990314 使用方法 在引入jquery.min.js.之后引入jquery.qrcode.min.js <div id="qrCode"></div> <input type="text" id=
二维码和背景图生成海报
qq_42874794的博客
09-27 282
二维码和背景图生成海报
Js 生成二维码图片和颜色可自行选择
Tongyao
06-09 1380
我们在平常开发过程中，难免遇到一些不依靠后端操作来实现的功能，例如，生成带图片的二维码，这篇文章讲述如何前端页面里引入js来生成二维码功能。 Js代码 引入组件 保存一份js文件，或直接在本js中引入......
artqrcodejs的学习记录，尝试简单实现了gif二维码、图片作为前景色或背景色、渐变色、中心logo的功能
weixin_45042868的博客
11-14 949
代码的原型是这位老哥的，他的github地址-ArtQRCode 配合另一位老哥对二维码的讲解–深度探索二维码及其应用，让我对二维码的理解更深了，我大部分代码都加了注释，不过关于纠错算法的地方，我肝不动了，看不下去了。 初衷是想用在vue项目中，github地址 效果 普通模式 原本有的艺术二维码（以图片作为填充元素） 附加的内容：我主要是做了些canvas的操作 图片作为前景色填充 图片作为背景色填充 多彩模式-线性渐变 多彩模式-径向渐变 多彩模式-随机块 gif–(用到了libgif.
使用zxing工具类在Java中生成二维码
要使用zxing工具类生成二维码，首先需要在pom.xml文件中添加相关依赖： ``` <groupId>com.google.zxing</groupId> <artifactId>core <version>3.2.0 <groupId>com.google.zxing</groupId> <artifactId>...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值