### 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=" xyqrcode.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);
}
~~~