海报生成自定义二维码canvas合成

1.引入生成二维码的js

///自行下载js库,引入你本地地址
<script src="jquery-2.1.1.js"></script>
<script src="qrcode.min.js"></script>

2.html

<div id="qrcode" style="display: none;"></div>    //生成的二维码
<div id="imgBox">
 <img src="" id="share_img" style="width: 95%;margin-left: 2.3%;"/> //最后生成的带二维码的海报
</div>

3.javascript

    function drawImg() {
    /////生成二维码
        var qrcode = new QRCode("qrcode", {
            text: "",  //需要生成二维码的地址
            width: 110,
            height: 110,
            correctLevel: QRCode.CorrectLevel.H
        });  
    ///////////////      
        var canvas = $("#qrcode").find('canvas').get(0);
        var dataIU = canvas.toDataURL('image/jpg');//生成的二维码图片路径
        var BoxId = $("#share_img").attr("id");//生成的图片id
        var codeW = "";//二维码大小
        var codeH = "";
        var codeX = "";//原海报图片大小 防止生成的海报变形
        var codeY = "";
        var bgImgUrl = "";  //需要生成的原海报地址
        drawCover(codeW, codeH, codeX, codeY, bgImgUrl, BoxId, dataIU);
    }



   /////可以生成一个js文件 需要时候直接引用
    function drawCover(codeW, codeH, codeX, codeY, bgImgUrl, BoxId, dataIU) {
	        ///链接生成的二维码
     
			/*
			绘制图片
				图片预加载，获取图片文件
				onload中调用
				drawImage(img,x,y,w,h);绘制图片(图片,坐标x,坐标y,宽度,高度)
			*/
			var imgs = new Image();
			var imgc = new Image();
			imgs.src = bgImgUrl;
			imgc.src=dataIU;
		    var can = document.createElement("canvas");	
			var cxt = can.getContext("2d");
			cxt.rect(0, 0, can.width, can.height);
			cxt.fillStyle = '#fff';
			cxt.fill();
			
			imgs.onload = drawImg;//图片加载完成再执行
			function drawImg() {
			   
			    can.width = imgs.width;
			    can.height = imgs.height;
				cxt.drawImage(imgs,0,0,can.width,can.height);
				cxt.drawImage(imgc, codeX, codeY, codeW, codeH);
				
				///////////////下面是在海报上添加自定义文字，如果需要
				
				    cxt.font = "bold 55px Arial";
				    cxt.fillStyle = "#ffffff";
				    cxt.textAlign = "center";
				    cxt.fillText(time, 370, 240);
				    cxt.font = "22px Arial";
				    cxt.fillStyle = "#000000";
				
				///////////////////
			    var imgURL = can.toDataURL('image/jpg',1);  ///最后生成的海报地址
			    $("#" + BoxId).attr("src", imgURL);
			} 
			
		}
		

4.自定义生成二维码，合成海报完成啦！！！！