<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style> *{ margin: 0; padding: 0; } button{ width: 100px; height: 60px; } #code{ position: relative; } </style> </head> <body> <div id="code"> </div> <canvas id="main" height="700" width="420" style="border:1px solid #d3d3d3;"></canvas> <!--saveImageInfo()生成照片并显示到另个网页--> <button onclick="saveImageInfo()">生成图片</button> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script> <script> //预加载将图片绘制到画布 $(function(){ drawImg(); }); function drawImg(){ $("#code").qrcode({ render: "canvas", //table方式 120, //宽度 height:145, //高度 text: "www.helloweba.com" //任意内容 }); //获取画布对象 var mainCtx = getCanvasContext('main'); var maxWidth = mainCtx.width; var maxHeight = mainCtx.height; var qrcode=$('#code').find('canvas')[0]; mainCtx.clearRect(0,0,1000,1000); //获取图片的实际路径 var starImg = new Image(); var starImg1 = new Image(); var starImg2 = new Image(); starImg.src='bg-alert.png'; starImg1.src='myorder_03.png'; starImg2.src='myorder_03.png'; //背景图 starImg.onload=function(){ //先把图片绘制在这里 mainCtx.drawImage(starImg,0,0,420,730); //绘制二维码 mainCtx.drawImage(qrcode,150,500) //设置用户文本的大小字体等属性 mainCtx.font = "small-caps bold 18px STXinwei"; //设置用户文本填充颜色 mainCtx.fillStyle = "white"; //绘制文字 mainCtx.fillText('阿瑟发',120,110); }; // 商品图 starImg1.onload=function(){ //先把图片绘制在这里 mainCtx.drawImage(starImg1,150,280,120,120); }; starImg2.onload=function(){ //先把图片绘制在这里 mainCtx.drawImage(starImg2,200,560,30,30); }; } //通过id获取canvas对象 function getCanvasContext(id){ return document.getElementById(id).getContext("2d"); } //将画布生成图片 function saveImageInfo() { var mycanvas = document.getElementById("main"); var image = mycanvas.toDataURL("image/jpg"); var w=window.open('about:blank','image from canvas'); w.document.write("<img src='"+image+"' alt='from canvas'/>"); } //下载图片 function saveAsLocalImage(){ var myCanvas = document.getElementById("main"); var image = myCanvas.toDataURL("image/jpg").replace("image/jpg", "image/octet-stream"); window.location.href=image; } </script> </body> </html>