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

示例效果：

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

代码如下：

<!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>

二维码添加背景和头像JS工具类相关推荐

JAVA生成的二维码以及给二维码添加背景图片
JAVA生成的二维码以及给二维码添加背景图片** 1.页面只需一行代码即可(用ajax请求得不到响应,也可以用表单提交) window.location.href = "${ctx}/qrc ...
PHP给微信二维码添加背景和昵称，微信带参数海报跨坑记录。
先获取微信二维码,这里我获取的是永久二维码: $wx= $this->getTicket($this->userid);//我带的参数是用户ID,可自由发挥.//下面是相关函数 funct ...
java实现二维码的生成和解析包含工具类
1.下载jar包( jdk1.7) 链接:https://pan.baidu.com/s/1LVq_zGsp_Po8V456h1TVmA 提取码:vqyd 2.工具类Utils.java packag ...
【小程序源码】二维码DIY背景美化生成器
这是一款DIY美化器小程序支持上传自定义图片作为背景二维码内容支持DIY输入,支持上传识别读取总得来说还是不错的,好了下面大家可以来看看小编的测试演示图: 小程序源码下载地址:[小程序源码]二维 ...
jquery二维码生成插件jquery.qrcode.js，生成二维码并下载
下载插件: 在GitHub上,下载qrcode二维码插件: https://github.com/jeromeetienne/jquery-qrcode Vue项目可直接通过node.js安装:npm ...
基于jquery类库的绘制二维码的插件jquery.qrcode.js
jquery.qrcode.min.js 如下 (function(r){r.fn.qrcode=function(h){var s;function u(a){this.mode=s;this.d ...
二维码生成插件qrious(纯JS)
二维码生成插件qrious(纯JS) 二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能 ...
Zxing系列之设置二维码图片背景透明教程
继之前的博客:PDF文件添加二维码水印教程.图片添加二维码水印教程之后,对之前的添加二维码水印功能进行完善,之前的程序生成的二维码图片背景不是透明的,所以不是很美观,所以本博客对程序进行完善,对二维码 ...
微信小程序内部长按识别二维码添加个人微信
项目场景: 最近接到需求,在小程序内部长按识别二维码添加个人微信. 初步效果: 问题描述:web-view官方文档微信小程序目前image标签,仅支持长按识别小程序码,后面查看网上相关资料,发现微信 ...

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

二维码添加背景和头像JS工具类相关推荐

最新文章

热门文章