日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁 > 云知道 > >

前端生成二維碼的插件 插件二維碼代碼展示

云知道

基本使用插件安裝cnpm install qrcodejs2 --save// 或者npm install qrcodejs2 --save插件導(dǎo)入使用commonjs或者es6模塊方式
import QRCode from 'qrcodejs2';// 或者let QRCode = require('qrcodejs2');頁面容器頁面增加一個容器標(biāo)簽
<div id="qrcode" ref="qrcode"></div>實例化 creatQrCode() {let text = '二維碼內(nèi)容';let qrcode = new QRCode(this.$refs.qrcode, {text: text, //二維碼內(nèi)容字符串width: 128, //圖像寬度height: 128, //圖像高度colorDark: '#000000', //二維碼前景色colorLight: '#ffffff', //二維碼背景色correctLevel: QRCode.CorrectLevel.H, //容錯級別})}問題處理1、清除已經(jīng)生成的二維碼方案一：this.$refs.qrcode.innerHTML = ''; 方案二： qrcode.clear(); // 清除二維碼方法二2、動態(tài)替換二維碼的內(nèi)容let string='新的內(nèi)容'qrcode.makeCode(string)3、報錯提醒 Error: code length overflow ？這是因為url太長，導(dǎo)致二維碼加載報錯，可以調(diào)低容錯率來處理 。
修改參數(shù)：correctLevel: QRCode.CorrectLevel.H，容錯級別，由低到高分別為L M Q H
4、字符串較長，二維碼顯示模糊怎么辦？可以嘗試先將生成的二維碼倍數(shù)擴大，然后在css上面固定顯示寬高，這樣可以擴大顯示像素精度
.qrcode-wrap{ width: 128px; height: 128px;}.qrcode-wrap canvas,.qrcode-wrap img { width:100%; height:100%;} <div id="qrcode" ref="qrcode" class="qrcode-wrap"></div>creatQrCode() {let text = '二維碼內(nèi)容';let qrcode = new QRCode(this.$refs.qrcode, {text: text,width: 128 * 3, //寬擴大3倍height: 128 * 3, //高擴大3倍colorDark: '#000000',colorLight: '#ffffff',correctLevel: QRCode.CorrectLevel.H,})}5、二維碼想要帶白邊怎么辦？插件默認(rèn)生成的圖片是沒有邊框的

前端生成二維碼的插件 插件二維碼代碼展示


如果只想在頁面顯示上有邊框
方案一：直接給容器上面加樣式，利用padding的特性，擠出白邊
.qrcode-border{display: flex;width: 128px;height: 128px;box-sizing: border-box;padding: 10px;/*利用padding*/border: 1px solid rgb(204, 204, 204);}<div id="qrcode" ref="qrcode" class="qrcode-border"></div>方案二：給容器加一個帶邊框樣式的父級容器
.qrcode-container{display: flex;align-items: center;justify-content: center;width: 150px;height: 150px;border: 1px solid #cccccc;}<div class="qrcode-container"><div id="qrcode" ref="qrcode"></div> </div>效果展示

前端生成二維碼的插件 插件二維碼代碼展示


?PS：如果只想【打印】的白邊邊框，這兩種方案也可以

前端生成二維碼的插件 插件二維碼代碼展示


QRCode.js 文檔：
http://code.ciaoca.com/javascript/qrcode/
npm package 地址：
https://www.npmjs.com/package/qrcodejs2
github 地址：
https://github.com/davidshimjs/qrcodejs
如果想要頁面和下載的二維碼都帶白邊邊框
可以結(jié)合插件html2canvas來實現(xiàn)（如有其它方案，歡迎分享）
html2canvas 是一款利用javascript進(jìn)行屏幕截圖的插件
//安裝cnpm install --save html2canvas//引入import html2canvas from "html2canvas";【前端生成二維碼的插件 插件二維碼代碼展示】主要思路：
  • 先使用QRCode生成二維碼圖片
  • 然后使用html2canvas把帶樣式的二維碼生成新的圖片
  • 隱藏QRCode生成的二維碼圖片
<divref="canvas" class="canvas-box" :style="{display:(originImg===true?'none':'flex')}"><divclass="qrcode-box"><div ref="qrcode" class="qrcode-img"></div></div><div class="qrcode-text">掃一掃</div></div><img :src="http://pic.yunnanlong.com/220918/0U55K457-3.jpg">

推薦閱讀