总的有两个依赖， jquery和jquery.qrcode 。实现原理其实就是图层的堆叠。做二维码推广的时候要用到此方法
<body> <div class="" id="qrcode" style="display: none;"></div> <canvas id="sec_canvas" ></canvas> <img id="bg_pic" src="/pic/tgdt1.jpg" /> <img class="canimg" /> </body> <script type="text/javascript"> //获取可显示区域的宽和高 var width = $('.user_cont').width(); //宽度 var height = $('.user_cont').height(); // 高度 //设置底图显示大小 var bg_pic = document.getElementById("bg_pic"); bg_pic.style.width = width+'px'; bg_pic.style.height = height+'px'; //先把二维码内容画出来，不然等下太慢了 new QRCode(document.getElementById("qrcode"), { text: location.origin+'?dl='+sessionStorage.getItem('id'), width: 800, height: 800 }); //获取二维码图片 var qr_canvas1=document.getElementsByTagName('canvas')[0]; var image = new Image(); image.src = qr_canvas1.toDataURL("image/png"); //因为是要在背景图上画东西，所以要等背景图加载完成后才能继续下一步 bg_pic.onload = function() { //必须等待图片加载完成 //弄张画布出来 var c = document.getElementById("sec_canvas"); c.width = width c.height = height //获取画布，然后就可以开始画了 var ctx = c.getContext("2d"); //先把背景图先画上去 { ctx.drawImage(bg_pic, 0, 0, width, height); //绘制图像进行拉伸 } //画二维码 { //要等二维码的图片生成后才能画 ，如果画出来的是空白，可以能是图片还没生产好可以使用onload方法 //img.onload = function() {} ctx.drawImage(image, width*0.3, height*0.69, width*0.4, height*0.225); } { //写点文字上去 ctx.font = 'bold '+height*0.028+'px sans-serif'; ctx.fillStyle = '#fcde04'; ctx.fillText('【长按】保存/转发', width*0.25, height*0.96); } //绘制完成,转为图片 setTimeout(function() { //在ios上无法在画完之后取到整个画布内容，加了个settimeout var bigcan = $('canvas')[0]; let images = new Image(); images.src = bigcan.toDataURL("image/png"); //alert(bigcan.toDataURL("image/png")) images.setAttribute("crossOrigin", 'Anonymous') { var cc1=document.getElementsByTagName('canvas')[1]; cc1.toDataURL("image/png"); $('.canimg').css('width', width); $('.canimg').css('height', height); $('.canimg').attr('src', cc1.toDataURL("image/png")); //图画好，画图过程使用的垫子全部都要隐藏起来 c.style.display = 'none'; bg_pic.style.display = 'none'; } }, 0 ) } </script>