html5+jquery.qrcode前端生成二维码海报

共6个文件

js：3个

jpg：2个

html：1个

二维码

2星需积分: 35 6 浏览量 2020-01-05 16:51:45 上传评论 3 收藏 238KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

CreateHaiBao.rar （6个子文件）

CreateHaiBao

img

mycode.jpg 76KB

timg.jpg 143KB

index.html 3KB

jquery.qrcode.min.js 14KB

jquery.qrcode.js 3KB

jquery-2.1.1.min.js 86KB

<html> <head> <meta charset="utf-8"> <title>个人中心</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <script src="js/jquery-2.1.1.min.js"></script> <script src="js/jquery.qrcode.min.js"></script> <style> body{ margin:0 auto; } </style> </head> <body> <div> <div id="qrcode"></div> <div id="h"> <canvas id="myCanvas"></canvas> </div> </div> </body> <script> $(function(){ var url= "http://www.baudu.com"; //默认使用Canvas生成，并显示到图片 jQuery('#qrcode').qrcode({ render: "canvas", width:90, //设置宽度 height:100, //设置高度 foreground: "#C00",//前景颜色 background: "#FFF",//背景颜色 typeNumber : -1,//计算模式 correctLevel:1,//纠错等级1-3 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 = 'img/timg.jpg'; 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-110,window.screen.availHeight-120,90,100);//绘制二维码 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(); } }); </script>

评论收藏

内容反馈