1. 程式人生 > >給通過canvas生成的二維碼添加logo

給通過canvas生成的二維碼添加logo

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