最近公司有个项目里有个分销二维码的功能,由于自带的功能对这块的生成有问题,所以自己就动手做了。
利用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(); } });
以上就是本实例的代码,如果有什么不明白的,可以在下方留意给我。