<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <button type="button" id="test">测试</button> <div id="qrcode" style="position:absolute;top:0px;bottom:0px;right:0px;display: none;background-color:rgba(0, 0, 0, 0.75)"> <img id="qrcode_img" style="margin: 0 auto;padding-left: 10%;width: 80%;"> <div id="temp_code" style="display: none"></div> </div> <script type="text/javascript" src="js/jquery-2.1.0.js" ></script> <script type="text/javascript" src="js/jquery.qrcode.min.js" ></script> <script> var list = ["/Hannah/test/qrcode.jpg", ...]; //生成二维码并合并背景图 function MergePictures() { var back = "http://" + window.location.host + list[0]; var c = document.createElement('canvas'), ctx = c.getContext('2d'); c.width = 720; c.height = 1169; ctx.rect(0, 0, c.width, c.height); ctx.fillStyle = '#fff'; ctx.fill(); $('#temp_code').html(""); $('#temp_code').qrcode({ width: 233, height: 240, text: 'https://www.baidu.com/' }); var img = new Image; //img.crossOrigin = 'Anonymous'; //解决跨域 img.src = back; img.onload = function() { ctx.drawImage(img, 0, 0, c.width, c.height); var code = $("#temp_code").find("canvas"); ctx.drawImage(code[0], 340, 865, 233, 240); //ctx.drawImage(code[0], xx, yy, ww, hh); //保存生成作品图片 var base64 = (c.toDataURL("image/jpeg", 0.8)); showQrcodePage(base64); $(".loading").hide(); } } $("#test").on("click", function() { MergePictures(); }) //显示二维码页面 function showQrcodePage(base64) { $("#qrcode_img").attr("src", base64); $("#qrcode").show(); } </script> </body></html>
转载于:https://www.cnblogs.com/txhy/p/8126365.html
相关资源：JAVA上百实例源码以及开源项目源代码