图片合成，使用canvas，做一个漂亮的二维码分享_多张图片生成二维码软件资源-CSDN文库

共5个文件

jpg：3个

html：1个

project：1个

图片合成

5星 · 超过95%的资源需积分: 39 183 浏览量 2018-04-08 15:42:48 上传评论收藏 2.32MB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

erweimafenxiang.rar （5个子文件）

erweimafenxiang

.project 977B

index.html 4KB

img

mycode.jpg 38KB

pic2.jpg 2.27MB

timg.jpg 42KB

css

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>  </head> <body>  <script type="text/javascript"> // “()()”表示自执行函数 (function (doc, win) { var docEl = doc.documentElement, // 手机旋转事件,大部分手机浏览器都支持 onorientationchange 如果不支持，可以使用原始的 resize resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { //clientWidth: 获取对象可见内容的宽度，不包括滚动条，不包括边框 var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 10*(clientWidth / 320) + 'px'; }; recalc(); //判断是否支持监听事件，不支持则停止 if (!doc.addEventListener) return; //注册翻转事件 win.addEventListener(resizeEvt, recalc, false); })(document, window); </script> <div class="qrcodeContent"> <div class="imgContent" style="width: 60%;margin: 0 auto;"> <img src="img/timg.jpg" style="width: 52%;"/> <img src="img/mycode.jpg" style="width: 40%;"/> <div class="btn" style="padding: 2rem 0;text-align: center;"> <button id="btn" style="font-size: 1rem;">点击合成</button> </div> </div>  <div class="qrcodeCanvas" style="display: none;width: 51%;margin: 0 auto;height: 12.5rem;"> <img class="imgBox" src="img/timg.jpg" style="display: none;width: 100%;height: 100%;"/> <img class="imgCode" src="img/mycode.jpg" style="display: none;width: 5.5rem;height: 5.5rem;"/> <div id="qrcodeCanvas"></div> </div>   </div> </body> <script type="text/javascript"> $(function() { //生成画布 hecheng(); function hecheng(){ draw(function(){ document.getElementById('qrcodeCanvas').innerHTML='<img src="'+base64[0]+'">'; }) } var base64=[]; function draw(fn) { var imgArr = ['img/timg.jpg','img/mycode.jpg']; var c = document.createElement('canvas'), ctx = c.getContext('2d'), len = imgArr.length; c.width = $(".qrcodeCanvas").width(); c.height = $(".qrcodeCanvas").height(); ctx.rect(0,0,c.width,c.height); ctx.fillStyle='#ccc'; ctx.fill(); function drawing(n) { if (n<len) { var img = new Image; img.src = imgArr[n]; img.onload = function() { if (n==1) { var codeW = $(".imgCode").width(), codeH = $(".imgCode").height(), offleft = ($(".qrcodeCanvas").width()/2) - codeW/1.1, offtop = $(".qrcodeCanvas").height()/3; ctx.drawImage(img,offleft,offtop,codeW,codeH); drawing(n+1); } else { ctx.drawImage(img,0,0,c.width,c.height); drawing(n+1); } } } else { base64.push(c.toDataURL("image/jpeg",0.8)); fn(); } } drawing(0); } clickFunc(); function clickFunc() { $("#btn").unbind("click").click(function() { $(".qrcodeCanvas").toggle(); }) } }) </script> </html>

评论收藏

内容反馈

阿里哦

2021-02-02

有参考价值，感谢分享
qq_42966617

2019-05-14

只是在IE里可以用，试了几个其它浏览器，没有用

zkau0518
上传者
2019-07-08

没有积分的可以去 https://blog.csdn.net/weixin_39888214/article/details/79850047 下载

zkau0518
上传者
2019-07-08

浏览器都是可以的，而且开发测试我一直用的谷歌
+Q1062037521

2019-05-14

这个最好了,我开发了一个生成海报二维码的