jquery.qrcode生成带logo和背景图的二维码
2024-06-11 06:58:53
效果图：
<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="/admin/images/lantian.jpg" style="display:none;"/><!--图2：二维码中间的logo--><img class="boder-img" src="/admin/images/a.jpg" style="display:none;"/><!--图3：二维码--><img class="code-img" style="display:none;"/><!--jquery.qrcode生成的二维码--><div id="qrcode" style="display:none;"></div>
</div>
<!--canvas 合成的二维码分享图-->
<div class="qrcodeCanvas"></div>
<!--页面空白加载-->
<!-- <div id="pageLoading"><p><img src="/admin/images/empty_forget_paw.jpg" style="width:200px;height:200px;"/></p><p style="color:#999;font-size:25px;">页面加载中…</P>
</div> -->
<script type="text/javascript" src="/index/jq/jquery-1.10.2.min.js" ></script>
<script type="text/javascript" src="/index/jq/jquery.qrcode.min.js"></script>
<script type="text/javascript">
$(function(){//生成二维码$("#qrcode").qrcode({text: toUtf8("https://www.baidu.com/"),//二维码内容});//将二维码显示到图3上var canvas=$("#qrcode").find('canvas').get(0); $('.code-img').attr('src',canvas.toDataURL('/admin/images/empty_forget_paw.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])=> { // 二维码的顺序要放在logo之前，不然会覆盖掉ctx.drawImage(img1, 0, 0, bgwidth, bgHeight)//(绘制图片资源,x坐标,y坐标,宽,高)ctx.drawImage(img3, 390, 305, 350, 350)ctx.drawImage(img2, 510, 425, 100, 100)//设置字体属性ctx.font = "40px bold 黑体";//设置颜色颜色
// ctx.fillStyle = "#64970E";//绘制文字// ctx.fillText("小熊",490,270);ctx.fillText("截图保存 • 长按识别",385,730);imageURL = canvas.toDataURL('/admin/images/empty_forget_paw.jpg');// console.log(imageURL)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和背景图的二维码相关推荐
- vue-qr生成带logo和背景图片的二维码
vue-qr一款可以生成带logo和背景图片二维码的vue前端插件,功能强大但使用简单,你可以使用该插件生成各种漂亮的二维码图片. 点击这里进入demo
- 微信公众号怎么生成带粉丝关注统计的渠道二维码
关于微信公众号在线生成带粉丝关注统计的渠道二维码,第三方工具微号帮提供了渠道二维码生成功能实现,可以为公众号生成带粉丝关注统计的渠道二维码,可以生成多个不同的渠道二维码,每个渠道二维码都可以单独统计粉 ...
- Python学习之生成带logo背景图的二维码（静态和动态图）
前言 二维码简称 QR Code(Quick Response Code),学名为快速响应矩阵码,是二维条码的一种,由日本的 Denso Wave 公司于 1994 年发明.现随着智能手机的普及,已广 ...
- jquery.qrcode生成带logo的二维码，同时生成带二维码的好友分享图片（js与canvas实现二维码和图片合成的海报）
首先给大家看一下效果图(纯jQuery前端技术): 提供一下demo 源代码和jquery.qrcode文件下载: https://download.csdn.net/download/qq15577 ...
- vuejs中html2canvas使用 背景图和二维码海报图片保存到一张图片上 生成一张海报并下载
不少的项目中都用到了二维码加背景图片生成海报的宣传图片,实现方法就是canvas绘制到一张上后进行下载.html2canvas的技巧在这里不在讲解. 二维码和背景图片进行定位. 在传统场合,这类功能往 ...
- 生成带图片无白边的二维码
二维码 转载请注明出处:https://blog.csdn.net/u013173247/article/details/81748481 二维码又称二维条码,常见的二维码为QR Code,QR全称Q ...
- qrcode生成带logo二维码
qrcode生成带logo二维码 要点:因为qrcode生成二码后会把canvas隐藏,华为手机不生效且微信不支持canvas长按识别,需要把canvas转图片: 1 . 引入文件 <scrip ...
- php使用QRcode生成带logo二维码
$url = 'http://www.baidu.com'; //二维码内容 可以文字.连接 都行 $errorCorrectionLevel = 'M';//容错级别 容错级别L(7%).M(15% ...
- C# 中使用 ThoughtWorks.QRCode.dll 生成指定尺寸和边框宽度的二维码
本文介绍在 C# 中使用 ThoughtWorks.QRCode.dll 生成指定尺寸和边框宽度的二维码.网上文章大多只是简单介绍内置参数的设置,根据我的使用目的,增加了自定义目标二维码图片尺寸和白边 ...
最新文章
- 企业中的混乱：如何对云计算具有信心
- 记录mysql的配置表误删
- 《人月神话》阅读笔记--02
- MFC编程入门之十三（对话框：属性页对话框及相关类的介绍）
- 解决 A component required a bean of ‘XXX.RoleService‘ that could not be found.
- 哈佛大学推荐：让自己变幸福的20件小事(值得收藏)
- pycharm注释、查看函数用法快捷键
- MD9 入门 制作衣服 笔记
- 【SCI文献下载】手把手教你如何免费下载SCI文献
- 巴特沃斯数字低通滤波器的设计步骤
- 【转】写给支持和反对《完全用Linux工作》的人们
- 重拾呐些記憶，前面の路，獨自繼續前往。
- 嵌入Quicktime
- 期刊论文发表的作者顺序有什么讲究吗
- [CryptoHack] RSA-PRIMES PART1 Write-Up
- Python字典添加元素的几种方法
- PC微信逆向：两种姿势教你解密数据库文件
- SVM支持向量机——MATLAB在数学建模中的应用
- PTGUI全景合成软件使用教程之垂直/水平校正
- Flutter中Scaffold布局的使用详解及实例代码
热门文章
- 报表动态大屏功能上线——动态化、自动化，让数据展示更直观
- Java-反射性能优化和工具包ReflectASM
- Windows更换壁纸脚本 获取必应壁纸 定时更换壁纸 c#调用.ps1脚本
- Android中的单例模式(java单例模式详解，Glide，EventBus，LayoutInfalter的源码单例模式详解)
- HTML网页设计结课作业--个人介绍(3页)
- 技术前沿与经典文章26：量子化与连续性之辩
- win10连接不上***，显示一直在连接中
- 【Rust日报】 2019-04-11
- 小波变换和小波阈值去噪
- 2021.3Pycharm 和 Idea下载地址，Linux、Windows、macOS各版本