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

以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"/>