<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的推廣</title> </head> <body> <input id="code-url" type="hidden" value="http://www.baidu.com"/><br /> <div id="mid-qrcode"></div> <div id="divOne"></div> <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script> <script type="text/javascript"> $(function(){ var qrcode= $('#divOne').qrcode({ text: $("#code-url").val(), width: 150, height: 150, }).hide(); var canvas=qrcode.find('canvas').get(0); var data_codeImg = canvas.toDataURL('image/jpg');//圖片base64位字符串 data = [ 'bg.png', //背景海報圖 data_codeImg ], base64 = []; function draw(fn) { var c = document.createElement('canvas'), // 獲取canvas對象( 通過選擇器選擇canvas元素 ) ctx = c.getContext('2d'), // 通過canvas獲取他的上下文繪制環境( context ) len = data.length; c.width = 1125; // 畫布寬 canvas的默認寬度與高度:寬度:300,高度:150 注：canvas的寬度與高度，只能通過行間屬性或者js動態修改，不要通過樣式去修改，否則獲取到的寬度與高度不准 c.height = 536; // 畫布高 ctx.rect(0, 0, c.width, c.height); // 創建矩形 參數：繪制起點x坐標，繪制起點y坐標，矩形寬（像素），矩形高（像素） ctx.fillStyle = '#fff'; ctx.fill(); function drawing(n) { if (n < len) { var img = new Image; img.src = data[n]; img.onload = function () { if (n === 1) { // 畫圖 參數：圖片對象，相對畫布的起點x坐標， // 相對畫布的起點y坐標，繪制的圖片寬度（二維碼，px），繪制的圖片高度（二維碼，px） ctx.drawImage(img, 60, 160, 250, 250); } else if(n === 0){ ctx.drawImage(img, 0, 0, c.width, c.height); } drawing(n + 1);//遞歸 } } else { //保存生成作品圖片 base64.push(c.toDataURL("image/jpeg", 0.8)); fn(); } } drawing(0); } // 調用 function hecheng() { draw(function () { document.getElementById("mid-qrcode").innerHTML = '<img src="'+base64[0]+'">'; }); } hecheng() }); </script> </body> </html>