<div class="alert">
<span>
<div class="white_content">
<div id="qrcode" class="qrcode">
</div>
<div class="image">
<img id="img"/>
<h1>長按識別保存二維碼</h1>
</div>
</div>
</span>
</div>
<script type="text/javascript">
$(document).ready(function() {
var qrcode=$("#qrcode").qrcode({
render : "canvas", //設定渲染方式，有table和canvas，使用canvas方式渲染性能相對來說比較好
text : 'http://jcp.natapp1.cc/gene_detection/authorization.html?openId='+sessionStorage.getItem("openId"), //
掃描二維碼后顯示的內容,可以直接填一個網址，掃描二維碼后自動跳向該鏈接
width : "200", //二維碼的寬度
height : "200", //二維碼的高度
background : "#ffffff", //二維碼的后景色
foreground : "#000000", //二維碼的前景色
src: 'http://jcp.natapp1.cc/gene_detection/image/logo.jpg' //二維碼中間的圖片
}).hide();
var canvas=qrcode.find('canvas').get(0);
console.log(qrcode.find('canvas'));
var data = canvas.toDataURL('image/jpg');
$('#img').attr('src',data) ;
uj5u.com熱心網友回復：
<div id="container">這里是二維碼顯示位置</div><script language="JavaScript">
$(function(){
var options = {
render: "canvas",
ecLevel: 'H',//識別度
fill: '#000',//二維碼顏色
background: '#ffffff',//背景顏色
quiet: 2,//邊距
width: 200,//寬度
height: 200,
text: "http://www.whui.org",//二維碼內容
//中間logo start
mode: 4,
mSize: 11 * 0.01,
mPosX: 50 * 0.01,
mPosY: 50 * 0.01,
image:$('#img-buffer')[0],//logo圖片
//中間logo end
label: 'jQuery.qrcode',
fontname: 'Ubuntu',
fontcolor: '#ff9818',
};
$('#container').empty().qrcode(options);
})
</script>
注意：
增加中間logo的時候，
嵌入的 logo 的 img 物件 <img src="">，直接傳 logo 的 url 并沒有用，會直接報錯出來，必須用img標簽的形式。
當 render 為 canvas 時, img.src 可為 非同域
當 render 為 image 時, img.src 必須為 同域，否則會因為跨域的問題導致報錯
uj5u.com熱心網友回復：
樓主，這個問題解決了嗎？uj5u.com熱心網友回復：
logo沒有了是因為你的logo圖片跨域了，需要在原始碼中找到生成logo圖片那個函式那里，加一句img.setAttribute('crossOrigin', 'anonymous')轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/130949.html
標籤：Web 開發
上一篇：小白想求大佬們推薦下一步要學的書
下一篇：怎么做大佬們