jquery 生成二维码并嵌入图片

用到的js 库 jquery-3.3.1.min.js jquery.qrcode.min.js html2canvas.js

(百度云链接：https://pan.baidu.com/s/1Jh8L0tS6UuvRvOgUIUVx4w 提取码：qmpo，永久有效！）

上html源码（如下）：只需新建一个html ，你就可以看如（图一）的效果。进入页面直接截图并展示。

<!DOCTYPE html>
<!--<html lang="en">-->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
<head><meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/><meta name="format-detection" content="telephone=no,email=no,date=no,address=no"><meta charset="UTF-8"><title>淘淘金融</title>
</head>
<style>body{margin: 0px;}
</style>
<body>
<td style="position:relative;padding: 0px" id="td" ><div><div id="box" hidden   style="position:absolute; z-index:1; height: 100px;width: 100px;padding: 0px"   ></div><img id="short" style="position:absolute; z-index:1; height: 100%;width: 100%"  src="/img/re_code.jpg" /></div><div style="position:absolute;top:22.3%; left:37.3%; z-index:3"   class="code" id="code"></div>
</td>
</body>
<script src="/js/jquery-3.3.1.min.js"></script>·
<script src="/js/jquery.qrcode.min.js"></script>
<script  src="/js/html2canvas.js"></script>
<script>var url = "/reCode/getReCodeUrl";$.ajax({type: "post",url: url,data: {},success: function (data, text) {var code = data.code;if (code == 200) {showReCode(data.info);shortPig();} else {alert(data.msg);}},error: function (data, status, e) {},complete: function (XMLHttpRequest, status) { //请求完成后最终执行参数}});function showReCode(obj) {/** 任意字符串 生成二维码  默认使用Canvas画图* *//* alert($(window).height());alert($(window).width());*/var h1 = 528;//p10var w1 = 360;//p10var h = $(window).height();var w = $(window).width();var hh1 = h/h1;var ww1 = w/w1;var hw = h/w;$('#code').qrcode({render: 'canvas',width: 100*ww1,height: 100*hh1,
/*width: 110*hh1,height: 100*ww1,
*/text: obj.url});}//     $('#code').qrcode('http://blog.csdn.net/u011127019');/*** 触发截图*/function shortPig(){html2canvas(document.body).then(function (canvas) {var dataUrl = canvas.toDataURL();var newImg = document.createElement("img");newImg.src = dataUrl;newImg.height =  $(window).height();newImg.width = $(window).width();/*newImg.height = 550;newImg.width = 340;*/$("img").hide();$("#code").hide();$("#box").show();$("#box").html(newImg);});}</script></html>

（图一）

备注：我用的是华为p10，为了二维码显示在白色框中，我在宽度和高度那里进行了计算。h1 528px w1 360px这是华为屏幕的高和宽。

业务场景：要前段用jquery生成二维码，二维码要业务推广用，要附在图片上。而且还要手机浏览器浏览，

项目是手机的web页面，当app用，从没见过如此变态的要求。

思路是首先生成二维码，然后两张图合并，截图，剩下的手机浏览器都自带分享功能，分享到微信。

1.本人生成二维码参考（ https://blog.csdn.net/u011127019/article/details/51226104 ）

还有本来我是想把图片当背景的，无奈截图不成功，后来就两张图片重叠放置，也可以。

到此结束！

转载请注明：https://blog.csdn.net/somdip/article/details/85068720

jquery 生成二维码并嵌入图片相关推荐

jquery生成二维码怎么添加图片（两种方法）
github项目地址: https://github.com/fengliting/erweima 注意:这里实现的是第一个方法自动生成二维码里面添加图片,有两种方法,一种是使用jquery原生的二 ...
js生成二维码以及插入图片
js生成二维码以及插入图片先根据qrcode官网demo,不同属性值的变化,二维码的变化效果:https://larsjung.de/jquery-qrcode/latest/demo/ 进入dem ...
java生成二维码（在图片上生成二维码（二维码带logo）并且在图片上添加文字标签）
1pom.xml  <dependency><groupId>cn.hutool</groupId><artifactId ...
jquery生成二维码图片
1.插件介绍 jquery.qrcode.min.js插件是jq系列的基于jq,在引入该插件之前要先引入jq.能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生 ...
使用jquery生成二维码并添加logo图标
使用插件js文件在前端生成二维码图片还使用到了一个添加logo图标的js文件 utf.js 直接贴上代码 jquery版本应该是都可以的吧我的是我项目使用的版本js <!--HTML的标准文 ...
生成二维码并以图片格式下载-qrcodejs2
最近在做项目,碰到票据完成后的生成二维码以及提供下载功能,这里谈谈个人实战经验: 先上代码: 引入: html: js: 说明: 网上文章里提到的插件很多,但是好像并不是都有用(有点坑),实践之后发现 ...
Java生成二维码并把图片流导出压缩包下载（亲测可用）
目录背景 Maven依赖相关二维码生成基础实体类二维码工具类控制层代码结果展示单个二维码二维码压缩包源码地址背景: 实际开发中有不少二维码生成并下载的需求,单个和批量下载都比较常见 ...
java 简单快速的生成二维码（带图片）
**使用java+zxing 简单快速的生成二维码.** 效果图: 首先需要引入两个jar文件: <dependency><groupId>commons-codec</ ...
生成二维码，合成图片
1.动态生成二维码链接:https://pan.baidu.com/s/14cDyPTWOn_YuHWE-cfrIfg 提取码:6bfv 使用: <div class="qrcode ...

jquery 生成二维码并嵌入图片

jquery 生成二维码并嵌入图片相关推荐

最新文章

热门文章