生成二維碼,並實現長按儲存
阿新 • • 發佈:2019-02-19
1.引入js
<script type="text/javascript" src="${webRoot}/static/qrCode/js/jquery-1.11.1.js"></script> <script type="text/javascript" src="${webRoot}/static/qrCode/js/jquery.qrcode.js"></script> <script type="text/javascript" src="${webRoot}/static/qrCode/js/utf.js"></script>
2.在頁面中放置一個div
<div id="qrcodeCanvas"></div>
3.生成二維碼
$('#qrcodeCanvas').qrcode({ render : "canvas", text : url, width : "200", //二維碼的寬度 height : "200", //二維碼的高度 background : "#ffffff", //二維碼的後景色 foreground : "#000000", //二維碼的前景色 src: '${webRoot}/static/qrCode/img/1.jpg' //二維碼中間的圖片 });
4.
//獲取網頁中的canvas物件 var mycanvas1=document.getElementsByTagName('canvas')[0]; mycanvas1.style.display = 'none'//隱藏生成的canvas //將轉換後的img標籤插入到html中 var img=convertCanvasToImage(mycanvas1); $('#qrcodeCanvas').append(img);//imagQrDiv表示你要插入的容器id //從 canvas 提取圖片 image function convertCanvasToImage(canvas) { //新Image物件,可以理解為DOM var image = new Image(); // canvas.toDataURL 返回的是一串Base64編碼的URL,當然,瀏覽器自己肯定支援 // 指定格式 PNG image.src = canvas.toDataURL("image/png"); return image; }