精华内容
下载资源
问答
  • jQuery生成带logo二维码所需js,呃,没办法免费,因为要求CSDN代码已经写死了,也没有选项
  • JS实现生成带Logo二维码

    万次阅读 2018-02-09 09:38:50
    JS实现生成带Logo二维码 需要下载对应JS文件 JS文件包括jquery.qrcode.js(生成二维码所需)和Utf.js(中文转码所需) 1、页面引入JS 需要引入Jquery.js 需要引入jquery.qrcode.js 需要引入Utf.js <...

    JS实现生成带Logo二维码

    • 需要下载对应JS文件
    • JS文件包括jquery.qrcode.js(生成二维码所需)和Utf.js(中文转码所需)

    1、页面引入JS

    • 需要引入Jquery.js
    • 需要引入jquery.qrcode.js
    • 需要引入Utf.js
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/jquery.qrcode.js"></script>
    <script src="js/utf.js"></script>

    2、页面二维码div

    • 该div用于显示生成的二维码
    <div  id="qrCodeImge"></div>

    3、Js代码实现

    $("#qrCodeImge").qrcode({
            render : "canvas", //二维码方式 
            text : "扫描二维码后显示的内容",    
            width : "120",//二维码宽度
            height : "120",//二维码高度
            background : "#ffffff",//二维码背景颜色     
            foreground : "#000000",//二维码前景颜色
            src: 'images/icon_03.png'//二维码中间Logo图片             
     });
    展开全文
  • qrcode生成带logo二维码

    2021-01-25 11:41:40
    qrcode生成带logo二维码 要点:因为qrcodejs生成二码后会把canvas隐藏,华为手机不生效且微信不支持canvas长按识别,需要把canvas转图片; 1 . 引入文件 <script src="/static/js/jquery-3.5.1.min.js"></...

    qrcode生成带logo二维码

    要点:因为qrcode生成二码后会把canvas隐藏,华为手机不生效且微信不支持canvas长按识别,需要把canvas转图片;

    1 . 引入文件
    <script src="/static/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="/static/js/qrcode/qrcode.min.js"></script>
    
    2 . html代码片段
    //二维码容器
    <div class="transit_qrcode"  style="display:position"></div>  
    //二维码canvas(位置随意)
    <div id="qrcode" style="display: none;"></div>
    //logo图(位置随意)
    <img id="logo" src="/static/images/logo.png" style="display: none;">
    
    3 . js代码片段
    var _url='......';
     var qrWidth = 200;
     var qrHeight = 200;
     var logoQrWidth = qrWidth / 4;
     var logoQrHeight = qrHeight / 4;
     new QRCode($("#qrcode")[0],{
         render: "canvas",
         ecLevel: 'H',//识别度
         text: _url,
         width: qrWidth, //二维码的宽度
         height: qrHeight, //二维码的高度
         colorDark : "#000000",
         colorLight : "#ffffff",
         typeNumber: -1,//计算模式
         correctLevel: 2,//二维码纠错级别
     });  
     //二维码与logo图绘制为canvas
     $("#qrcode canvas")[0].getContext('2d').drawImage($("#logo")[0], (qrWidth - logoQrWidth) / 2, (qrHeight - logoQrHeight) / 2, logoQrWidth, logoQrHeight);
     var cover_canvas = document.getElementsByTagName('canvas')[0];
     var img = converCanvasToImage(cover_canvas);
     //图片放入容器
     $('.transit_qrcode').append(img);
    // canvas转Image
    function converCanvasToImage(canvas){
        var image = new Image();
        image.src = canvas.toDataURL("image/png");
        return image;
    } 
    
    展开全文
  • 经过测试,通过QRcode.jar里的生成二维码方法生成带LOGO二维码,代码中会将LOGO调整为固定大小。
  • 因为要在后台生成带logo二维码,那么首先必须将logo图片上传至服务器(在上传这里我用了webuploader) phpqrcode使用方法: 首先下载phpqrcode:http://phpqrcode.sourceforge.net/ 然后在使用之前记得引入...
  • JavaScript生成带logo图标的二维码,内附js文件,下载即可使用。祝各位前程似锦,升职加薪
  • 微信小程序生成带logo二维码

    千次阅读 2019-05-20 11:30:17
    引入js直接用 页面就一个画布就行,标上id,宽高 qrcodejs下载地址链接:https://pan.baidu.com/s/1pqpTQxMxguAf0lMcgs7lug 提取码:f4bu 这就完了 模拟器完全ok的,到了手机上就不显示了,可能是我手机配置低吧...

    先上图,看看是不是你想要的!!!
    这是效果图
    引入js直接用
    在这里插入图片描述
    页面就一个画布就行,标上id,宽高
    wxml
    qrcodejs下载地址链接:https://pan.baidu.com/s/1pqpTQxMxguAf0lMcgs7lug
    提取码:f4bu

    这就完了

    模拟器完全ok的,到了手机上就不显示了,可能是我手机配置低吧渲染失败,所以就再来一次,确保我的低端手机没问题!
    在这里插入图片描述刚开始写小程序,路子还长,慢慢积累~

    展开全文
  • 方法一:一、使用的类库 ...2、qrcode.jsjavascript库...因为要在后台生成带logo二维码,那么首先必须将logo图片上传至服务器(在上传这里我用了webuploader)phpqrcode使用方法: 首先下载phpqrcode:http://phpqrc

    方法一:

    一、使用的类库
    1、phpqrcode(php库)
    2、qrcode.js(javascript库)

    方法二:

    二、phpqrcode的使用
    只用php的类库,也就是二维码的生成在后台操作。因为要在后台生成带logo的二维码,那么首先必须将logo图片上传至服务器(在上传这里我用了webuploader)

    phpqrcode使用方法:
    首先下载phpqrcode:http://phpqrcode.sourceforge.net/
    然后在使用之前记得引入phpqrcode.php文件

    
    $value = $url;//二维码内容 
    $errorCorrectionLevel = 'L';//设置容错级别 
    $matrixPointSize = $size;//生成图片大小 
    QRcode::png($value, 'public_files'.DIRECTORY_SEPARATOR .'code'.DIRECTORY_SEPARATOR .'qrcode.png', $errorCorrectionLevel, $matrixPointSize, 2);//生成二维码图片 无logo
    $logo = $tar_path;//上传至服务器的logo图片 
    $QR = 'public_files'.DIRECTORY_SEPARATOR .'code'.DIRECTORY_SEPARATOR .'qrcode.png';//已经生成的原始二维码图
    
    if ($logo !== FALSE) {
      $QR = imagecreatefromstring(file_get_contents($QR));
      $logo = imagecreatefromstring(file_get_contents($logo));
      $QR_width = imagesx($QR);//二维码图片宽度
      $QR_height = imagesy($QR);//二维码图片高度
      $logo_width = imagesx($logo);//logo图片宽度
      $logo_height = imagesy($logo);//logo图片高度
      $logo_qr_width = $QR_width / 5;
      $scale = $logo_width/$logo_qr_width;
      $logo_qr_height = $logo_height/$scale;
      $from_width = ($QR_width - $logo_qr_width) / 2;
      imagecopyresampled($QR, $logo, $from_width, $from_width, 0, 0, $logo_qr_width,
        $logo_qr_height, $logo_width, $logo_height);
    }
    $name = time();
    imagepng($QR, 'public_files'.DIRECTORY_SEPARATOR .'code'.DIRECTORY_SEPARATOR .$name.'.png');//输出带logo的二维码图片

    方法三:

    三、qrcode.js的使用
    使用qrcode.js在前端直接生成二维码,首先需要下载jquery.qrcode.js
    qrcode的使用也很简单:

    
    var length = size*80;//设置二维码大小
    length = parseInt(length);
    $("#code_img").qrcode({ //code_img是一个img标签的id
      render : "canvas",  //设置渲染方式,有table和canvas,使用canvas方式渲染性能相对来说比较好
      text : url,  //扫描二维码后显示的内容,可以直接填一个网址,扫描二维码后自动跳向该链接
      width : length,       //二维码的宽度
      height : length,
      background : "#ffffff",    //二维码的后景色
      foreground : "#000000",    //二维码的前景色
      src: $('#image').attr('src')       //二维码中间的图片
    });
    引入jquery.qrcode.js后再自己编写这段js代码,执行后二维码就可以显示处理了
    主要是二维码中间的logo引用格式,一般取本地图片有两种格式:一种是本地URL,另一种是将图片转成base64格式
    一开始我试用本地URL的格式来引用图片,发现只能引用与js文件统一目录下的图片,所以本地URL格式并不支持,于是我采用了后一种方式。
    用
    <input accept="image/*" type="file" id="file_input">
    来上传选取本地图片,然后取其base64格式
    
    var input = document.getElementById("file_input");
    
    if(typeof FileReader==='undefined'){
      input.setAttribute('disabled','disabled');
    }else{
      input.addEventListener('change',readFile,false);
    }
    
    function readFile(){
      var file = this.files[0];
      if(!/image\/\w+/.test(file.type)){
        alert("文件必须为图片!");
        return false;
      }
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function(e){
        $('#image').attr('src',this.result);//image为img标签的id
      }
    }
    将文件读取为一串Data URL字符串,将小文件以一种特殊格式的URL地址直接读入页面。这个特殊格式就是base64
    
    两个类库之间的对比
    两个类库,一个在后台操作,一个直接在前端操作。
    phpqrcode 生成二维码在后台操作,生成的图片保存在服务器。一般生成二维码都是直接保存到本地然后直接使用,很少会去服务器二次获取,所以采用phpqrcode的 话会使得服务器中的图片堆积,占用了不必要的空间,删除的话也会花费多余的开销。所以使用phpqrcode不适用于这种二维码生成工具。而且上传图片也 会产生多余的开销
    qrcode.js直接在前端操作,上传图片直接保存在浏览器,直接在前端生成二维码,不需要任何后台的干涉,这样减少了不必要的开销,也不会在服务器造成图片的堆积而占用不必要的空间。
    展开全文
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...jquery.qrcode生成二维码</title> </head> <style> .hidden { display:...
  • 如何用javascript生成带logo二维码 近期根据项目的需要需要在生产带logo二维码,但是想用javascript生成,找了很多相关资料,终于解决啦。 开整! 首先需要确认自己的需求是带logo二维码还是普通二维码。 ...
  • js生成带logo二维码

    2017-09-07 16:44:00
    闲话少叙,说下我的思路,先使用jquery.qrcode.js生成一个二维码(关于中文问题接下来讨论),由于此插件本身不支持自定义logo的,所以差强人意吧,但是已经为我们省去不少工作,接下来的工作我们自己搞 ...
  • JS生成带logo二维码DEMO,带js包,亲自尝试,已适用于项目
  • 前端生成生成带Logo二维码,使用jquery.qrcode的方式,附上源码和js文件
  • 因为要在后台生成带logo二维码,那么首先必须将logo图片上传至服务器(在上传这里我用了webuploader) phpqrcode使用方法: 首先下载phpqrcode: http://phpqrcode.sourceforge.net/ 然后在使用...
  • 引入文件jQuery-qrcode.js 地址:https://blog-static.cnblogs.com/files/kitty-blog/jquery-qrcode.js https:...
  • jquery.qrcode.js生成二维码插件&转成图片格式 ;"> ;"><img id='imgOne'/></div> var qrcode =$('#code').qrcode({ render : "canvas", //设置渲染方式,有table和canvas,使用canvas方式渲染性能相对来说比较...
  • 已添加UTF-8编码,中文生成二维码扫描不会出现乱码。二维码编码原理配置说明render string配置用哪个节点元素画二维码,选项有table、svg和canvas默认的选择顺序为 canvas -> svg -> tabletext string要...
  • JS生成带Logo的QRCode二维码

    千次阅读 2019-07-06 11:13:24
    一:jquery.qrcode.min.js QRCode的JS库下载(自己百度或者直接下载最后的Demo); 二:选定自己需要放在二维码中间的一个Logo图片; 三:代码实现; <!DOCTYPE html>...JS生成QRCode带Logo&...
  • QRCode GitHub: 纯前端 HTML / Vue :二维码生成、扫描...支持二维码生成,实时动态生成和渲染! 支持扫一扫识别,从相册选择二维码识别! 支持PC端,手机移动端等! HTML版 Demo实例效果: Vue.js版 Demo实例效果:
  • JS生成带logo二维码

    2019-09-13 21:09:22
    开门见上,先看效果: 源代码: <!DOCTYPEHTML> <html> <head> <title>生成带logo二维码</title> <metahttp-equiv="Content-Type"co...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,905
精华内容 762
关键字:

js生成带logo二维码