jquery.qrcode生成带logo的二维码，同时生成带二维码的好友分享图片（js与canvas实现二维码和图片合成的海报）

首先给大家看一下效果图（纯jQuery前端技术）：

提供一下demo 源代码和jquery.qrcode文件下载：

https://download.csdn.net/download/qq15577969/11987493

html+ css+jQuery代码：

<html lang="zh-cn">
<head>
<title>jQuery生成二维码分享图片</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no">
<style type="text/css">
body{width: 100%;   height: 100%;
}
.qrcodeCanvas {width: 100%; height: 100%;display:none;
}#pageLoading{text-align:center;padding:50px 0;
}
</style>
</head>
<body>
<div id="qrcodeBox"><!--图1：背景图--><img class="bg-img" src="data:images/share_500X852.jpg" style="display:none;"/><!--图2：边框图--><img class="boder-img" src="data:images/code_boder.png" style="display:none;"/><!--图3：二维码--><img class="code-img" style="display:none;"/><!--图4：二维码中间的logo--><img id="logo" src="data:images/logo.png" style="display:none;"/><!--jquery.qrcode生成的二维码--><div id="qrcode" style="display:none;"></div>
</div>
<!--canvas 合成的二维码分享图-->
<div class="qrcodeCanvas"></div>
<!--页面空白加载-->
<div id="pageLoading"><p><img src="data:images/none_page.png" style="width:200px;height:200px;"/></p><p style="color:#999;font-size:25px;">页面加载中…</P>
</div>
<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
<script type="text/javascript" src="js/jquery.qrcode.logo.min.js"></script>
<script type="text/javascript">
$(function(){//生成二维码$("#qrcode").qrcode({render: "canvas", //也可以替换为tableminVersion: 1,    // version range somewhere in 1 .. 40maxVersion: 40,ecLevel: 'H',     //识别度  'L', 'M', 'Q' or 'H'left: 0,top: 0,size: 300,//尺寸fill: '#000',//前景色background: null,//背景色text: toUtf8("https://www.baidu.com/"),//二维码内容radius: 0.1,// 0.0 .. 0.5quiet: 1,//边距mode: 4,//中间图片样式mSize: 0.2,//logo图片大小mPosX: 0.5,mPosY: 0.5,label: '飞鸟娱乐',fontname: '黑体',fontcolor: '#000',image: $('#logo')[0]//logo图片});//将二维码显示到图3上var canvas=$("#qrcode").find('canvas').get(0); $('.code-img').attr('src',canvas.toDataURL('image/jpg'));  setTimeout(     function(){         //绘制图片drawImage();},500);
})function drawImage() {//图1let bg_img = document.getElementsByClassName('bg-img')[0].getAttribute('src');//图2let boder_img = document.getElementsByClassName('boder-img')[0].getAttribute('src');//图3let code_img = document.getElementsByClassName('code-img')[0].getAttribute('src');var bgwidth=$(".qrcodeCanvas").width();var bgHeight=$(".qrcodeCanvas").height();//canvas必须设定确定的宽高,设置为图片大小let canvas = document.createElement('canvas')canvas.width = bgwidth;canvas.height = bgHeight;let ctx = canvas.getContext("2d");ctx.rect(0,0, canvas.width, canvas.height); //(距离左上角x坐标,距离左上角y坐标,宽度,高度)ctx.fillStyle = "#fff"; //矩形的颜色ctx.fill(); //填充      loadImg([bg_img,boder_img,code_img,]).then(([img1, img2,img3])=> {  ctx.drawImage(img1, 0, 0, bgwidth, bgHeight)//(绘制图片资源,x坐标,y坐标,宽,高)ctx.drawImage(img2, 365, 280, 400, 400)ctx.drawImage(img3, 390, 305, 350, 350)//设置字体属性ctx.font = "40px bold 黑体";//设置颜色颜色ctx.fillStyle = "#64970E";//绘制文字ctx.fillText("飞鸟娱乐",490,270);ctx.fillText("截图保存 • 长按识别",385,730);imageURL = canvas.toDataURL("image/jpg");let compose_img = new Image();compose_img.src = imageURL;compose_img.setAttribute("alt", "好友邀请图片");document.getElementsByClassName("qrcodeCanvas")[0].append(compose_img)      canvas.style.display = "none";$("#pageLoading").hide();$(".qrcodeCanvas").show();});
}function loadImg(src) {const paths = Array.isArray(src) ? src : [src];const promise = [];paths.forEach((path) => {promise.push(new Promise((resolve, reject) => {let img = new Image();img.setAttribute("crossOrigin", 'anonymous');img.src = path;img.onload = () => {resolve(img);};img.onerror = (err) => {alert('图片加载失败')}}))});return Promise.all(promise);
}
//如果内容中有中文，在生成二维码前就要把字符串转换成utf-8
function toUtf8(str) {  var out, i, len, c;  out = "";  len = str.length;  for (i = 0; i < len; i++) {  c = str.charCodeAt(i);  if ((c >= 0x0001) && (c <= 0x007F)) {  out += str.charAt(i);  } else if (c > 0x07FF) {  out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));  out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));  out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));  } else {  out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));  out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));  }  }  return out;
}
</script>
</body>
</html>

jquery.qrcode生成带logo的二维码，同时生成带二维码的好友分享图片（js与canvas实现二维码和图片合成的海报）相关推荐

Vue.js结合Canvas制作二维码和图片的合成（qrcanvas + html2canvas）
(这个有问题,最近会把整理后的更新上去!!!!!!) 最新最新!!!:https://blog.csdn.net/zuorishu/article/details/88632978 需求背景: 分享图 ...
Vue.js结合Canvas制作二维码和图片的合成（html2canvas + Canvas2Image）--整理
之前写过一篇关于二维码和图片合成的博文,但是存在一些问题,本篇是本人整理最后在项目中使用的. 建议:如果是单张背景图或者是多张背景图且二维码在同一位置的话,建议直接在后台合成分享图直接给前端返回即可, ...
jquery.qrcode生成带logo和背景图的二维码
效果图: <html lang="zh-cn"> <head> <title>jQuery生成二维码分享图片</title> < ...
jQuery带logo的网页二维码生成
jquery生成带logo的二维码非常非常简单主要引用utf.js/jquery.qrcode.js jquery.qrcode.js是下载之后修改过的,如果大家想要可以去我的网盘下载链接地址:h ...
jQuery生成带Logo的二维码
用zxing生成二维码并解析:https://blog.csdn.net/qq_41879385/article/details/81320723 用QR Code生成和解析二维码文章地址:https ...
JS生成带Logo的QRCode二维码
一:jquery.qrcode.min.js QRCode的JS库下载(自己百度或者直接下载最后的Demo): 二:选定自己需要放在二维码中间的一个Logo图片: 三:代码实现: <!DOCTY ...
Py之qrcode：调用python的qrcode库两种方式生成二维码、带logo的二维码
Py之qrcode:调用python的qrcode库两种方式生成二维码.带logo的二维码目录 python编程实现生成二维码 1.第一种方式-纯文本 2.第二种方式-带logo
QRCode二维码生成方案及其在带LOGO型二维码中的应用（2）
QRCode二维码生成方案及其在带LOGO型二维码中的应用(2) 原文:QRCode二维码生成方案及其在带LOGO型二维码中的应用(2) 续前:QRCode二维码生成方案及其在带LOGO型二维码中的应 ...
Golang使用qrcode生成二维码，以及生成带logo的二维码
添加并引用依赖 go get github.com/boombuler/barcodeimport ("github.com/skip2/go-qrcode" ) 1.生成字节形式 ...

jquery.qrcode生成带logo的二维码，同时生成带二维码的好友分享图片（js与canvas实现二维码和图片合成的海报）

首先给大家看一下效果图（纯jQuery前端技术）：

提供一下demo 源代码和jquery.qrcode文件下载：

html+ css+jQuery代码：

jquery.qrcode生成带logo的二维码，同时生成带二维码的好友分享图片（js与canvas实现二维码和图片合成的海报）相关推荐

最新文章

热门文章