canvas 画布
使用画布来生成二维码
<div class="canvascode"> <img id="img3" style="width: 100%;height: 100%;"/> //背景图片 <canvas id="myCanvas" class="hide" width="750" height="1190" style="border:1px solid #d3d3d3;background:#ffffff;"> //画布 Your browser does not support the HTML5 canvas tag. </canvas> <div id="qrcode" class="hide"></div> </div>
<script type="text/javascript"> $("#qrcode").qrcode("https://www.baidu.com/?tn=49055317_10_hao_pg"); //二维码跳转页面 document.onreadystatechange = function () { if (document.readyState == "complete") { //页面载入完成 var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var imgbg = new Image(); imgbg.src = "../static/images/canvasbg1.jpg"; imgbg.onload = function () { ctx.drawImage(imgbg, 0, 0) var canvas = $("#qrcode canvas")[0]; var imgCode = new Image(); imgCode.src = canvas.toDataURL('image/png'); imgCode.onload = function () { ctx.drawImage(imgCode, 530, 970, 200, 200); //控制二维码位置、大小 var img3 = document.getElementById('img3'); img3.src = c.toDataURL('image/png'); } } } } </script>
document.onreadystatechange = subSomething; //当页面加载状态改变的时候执行这个方法.
readyState 属性返回当前文档的状态
- uninitialized - 还未开始载入
- loading - 载入中
- interactive - 已加载,文档与用户可以开始交互
- complete - 载入完成
drawImage() 方法绘制一幅图像。
drawImage(image, x, y, width, height)