功夫码

如何jquery的qrcode生成的二维码嵌入logo图片的实例代码

晓峰 时间:2019-10-10 08:46:49 阅读:34
--------------------------------------------------------- Ta 只分享的内容开始 ---------------------------------------------------------------------

如何jquery的qrcode生成的二维码嵌入logo图片的实例代码

由于原本是不带中间嵌入logo的,所以需要我们来写个扩展代码如下jquery.qrcode.js插件没有给二维码嵌入图片的功能,于是改写jquery.qrcode.js源码,增加嵌入图片功能。

注意的是jquery.qrcode.js和qrcode.js需要都引人才行。

<script type="text/javascript" src="jquery-1.8.2.min.js" ></script>
<script type="text/javascript" src="jquery.qrcode.js" ></script>
<script type="text/javascript" src="qrcode.js" ></script>

第一步 在jquery.qrcode.js 文件里加上 下边三个参数

image.png

第二步是 在jquery.qrcode.js 文件里createCanvas方法里加上这段代码,具体参考图片上的位置;

// 新增logo的代码 放到 图片上的位置
if(options.logoSrc!=''){
   var img = new Image();
   img.src = options.logoSrc;
   if(img.complete){
      ctx.drawImage(img,options.width/2-options.logoWidth/2,options.height/2-options.logoHeight/2,options.logoWidth,options.logoHeight);
   }else{
      img.onload = function(){
                     ctx.drawImage(img,options.width/2-options.logoWidth/2,options.height/2-options.logoHeight/2,options.logoWidth,options.logoHeight);
      }
      img.onerror = function(){

      }
   }
}

image.png最后一步就可以去用了 

jQuery('#codeimg').qrcode({
    render: "canvas", //也可以替换为table
    width: 380,
    height: 380,
    text: url,
    quiet: 10,//边距
    logoSrc:'/logo.jpg',//logo图片
    logoHeight:'50', // logo图片的高度
    logoWidth:'50' // logo图片的宽度
});

image.png

image.png

--------------------------------------------------------- Ta 只分享了这些内容 ---------------------------------------------------------------------

本文来源:功夫码(gongfuma.com)
声明:本文系功夫码原创稿件,版权属[功夫码 gongfuma.com]所有。
未经授权不得转载,已经协议授权的媒体下载使用时须注明"稿件来源:功夫码",违者将依法追究责任。

相关文章

  • 回到顶部