1. 程式人生 > >js生成二維碼以及插入圖片

js生成二維碼以及插入圖片

js生成二維碼以及插入圖片

先根據qrcode官網demo,不同屬性值的變化,二維碼的變化效果:https://larsjung.de/jquery-qrcode/latest/demo/

進入demo中,審查元素檢視裡面引用的js檔案,你會發現jquery-qrcode-0.14.0.js,這個版本支援二維碼中插入圖片。

下面是我寫的一個列子:

引用js:

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

index.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>生成二維碼</title>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="jquery-qrcode-0.14.0.js"></script>
    <script type="text/javascript" src=" xy
qrcode.js"></script>

<script type="text/javascript">

$(document).ready(function(){
    var options={};
    options.url="http://www.baidu.com"; //二維碼的連結
    options.dom="#code";//二維碼生成的位置
    options.image=$('#img-buffer')[0];//圖片id
    options.render="canvas";//設定生成的二維碼是canvas格式,也有image、div格式

    xyqrcode(options);
});
</script>
</head>

<body>
<div id="code"></div>
<img id="img-buffer" src="gy.jpg">
</body>
</html>

 

xyqrcode.js(給qrcode傳生成的二維碼屬性)

function xyqrcode(options) {
    var settings = {
        dom:'',
        render: 'canvas',   //生成二維碼的格式還有image、div
        ecLevel:"H",
        text:"",
        background:"#ffffff", 
        fill:"#333333", //二維碼紋路的顏色
        fontcolor:"#ff9818",
        fontname:"Ubuntu",
        image:{},
        label:"",
        mPosX:0.5,   //圖片在X軸的位置
        mPosY:0.5,    //圖片在X軸的位置
        mSize:0.27,   //圖片大小
        minVersion:10,
        mode:4,
        quiet:1,
        radius:1,
        size:400   
    };
        if (options) {
            $.extend(settings, options);//options物件跟settings比較,相同的就替換,沒有的就新增

        }
        if(settings.dom.length==0){
            window.console.log("Error: dom empty!");
            return;
        }
        if(settings.url.length==0){
            window.console.log("Error: url empty!");
            return;
        }
    settings.text=settings.url; //在qrcode生成二維碼的地址是text。這裡就把url賦值給text
        $(settings.dom).qrcode(settings);
      
}