給通過canvas生成的二維碼添加logo
阿新 • • 發佈:2018-02-02
spl 坐標 width log height alt wid qrcode.js oda
以jquery.qrcode為例來說,
生成二維碼代碼:
依賴jquery.js, jquery.qrcode.js
//計算寬,高,中心坐標,logo大小 var width = 256,height = 256; var x = width * 0.4, y = height * 0.4, lx= width * 0.2, ly = height * 0.2; $(‘#div‘) .qrcode({ render : "canvas", width: width, height: height, text: ‘this is content’ }) .hide();var canvas = $("#div canvas")[0]; //添加logo canvas.getContext(‘2d‘).drawImage($("#qrCodeIco")[0], x, y, lx, ly); //將canvas生成的二維碼內容添加到img裏,使得移動端能長按識別二維碼 $(‘#image‘).attr(‘src‘, canvas.toDataURL(‘image/png‘));
<div id="div"></div> <img id="qrCodeIco" src="logo.png" style="display:none;"/> <img id="image" src="" alt="code"/>
給通過canvas生成的二維碼添加logo