利用jquery.qrcode.min.js生成二维码和结合html5的canvas合成生成一张海报实例！

最近公司有个项目里有个分销二维码的功能，由于自带的功能对这块的生成有问题，所以自己就动手做了。

利用jquery.qrcode.min.js生成二维码和结合html5的canvas合成生成一张海报jquery.qrcode.min.js生成二维码和结合html5的canvas自定义背景图合成生成一张海报。

还是来张效果图吧

接下来，就来代码吧

<div><div id="qrcode"></div>
   <div id="h">
      <canvas id="myCanvas"></canvas>
   </div></div>

$(function(){
     var url= "这里填写你要生成二维码的东西";
     //默认使用Canvas生成，并显示到图片
     jQuery('#qrcode').qrcode({
         render: "canvas",
         width       : 100,     //设置宽度
         height      : 100,     //设置高度
         typeNumber  : -1,      //计算模式
         correctLevel:2,
         text: url
     });
     //从 canvas 提取图片 image
     function convertCanvasToImage(canvas) {
         //新Image对象，可以理解为DOM
         var image = new Image();
         // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
         // 指定格式 PNG
         image.src = canvas.toDataURL("image/png");
         return image;
     }

     var mycanvas1=document.getElementsByTagName('canvas')[0]; //获取网页中的canvas对象
     //将转换后的img标签插入到html中
     var img=convertCanvasToImage(mycanvas1);
     $('#qrcode').html("");//移除已生成的避免重复生成
     $('#qrcode').append(img);//imagQrDiv表示你要插入的容器id
     $('#qrcode img').attr("id","tulip");
     var canvas = document.getElementById("myCanvas");
     var ctx = canvas.getContext("2d");
     //图片
     var img = new Image();
     img.src = '这里是你自定义的背景图';
     canvas.width = window.screen.availWidth;
     canvas.height = window.screen.availHeight;
     var ewm=document.getElementById("tulip");
     img.crossOrigin="*";
     img.onload = function() { //必须等待图片加载完成
         ctx.drawImage(img, 0, 0, window.screen.availWidth, window.screen.availHeight); //绘制图像进行拉伸
         ctx.drawImage(ewm, window.screen.availWidth/3,window.screen.availHeight/3);
         var srcImg = new Image();
         srcImg.src = canvas.toDataURL('images/png');
         $('#h').html("");//移除已生成的避免重复生成
         $('#h').append(srcImg);//imagQrDiv表示你要插入的容器id
         $('#h img').attr("width",'100%');
         $('#h img').attr("height",'100%');//imagQrDiv表示你要插入的容器id
         $('#qrcode').hide();
     }
 });

以上就是本实例的代码，如果有什么不明白的，可以在下方留意给我。