|
鏈接生成二維碼 1.npm安裝 npm install --save qrcodejs2 2.引入 import QRCode from 'qrcodejs2' 3.生成二維碼 new QRCode('qrcode', { // 傳入容器id text: url, // 鏈接（必填） width: 200, // 寬（默認(rèn)256px） height: 200, // 高（默認(rèn)256px） colorLight: '#F1F1F1' // 背景色 colorDark: '#F00', // 前景色 correctLevel: QRCode.CorrectLevel.L // 二維碼可辨識(shí)度（L,M,Q,H）
}) 4.代碼演示： 
.qrcodeBox{ width: 296px; height: 296px; padding: 20px; background: #F1F1F1; transform-origin: 0 0; }
<div class="qrcodeBox" :style="`transform: scale(${scale});`"> <div id="qrcode"></div> </div>
// 計(jì)算倍數(shù)1.08rem/7.5rem this.scale = document.body.clientWidth * 108 / 750 / 296 // 屏蔽下一行eslint報(bào)錯(cuò) // eslint-disable-next-line new QRCode('qrcode', { // 容器id text: location.href, colorLight: '#F1F1F1', correctLevel: QRCode.CorrectLevel.L })
截圖 1.npm安裝 npm install [email protected] // 指定安裝版本最新版不支持IOS13 2.引入 import html2canvas from 'html2canvas' 3.截圖 html2canvas(this.$refs.imageDom, // 傳入容器ref值 { scale: 2, // 縮放倍數(shù) logging: false, // 取消調(diào)試 useCORS: true, // 用CORS從服務(wù)器加載映像 allowTaint: false, // 允許跨域 proxy: 'url' // 跨域地址 } ).then(canvas => { this.imgUrl = canvas.toDataURL('image/png') // 生成base64圖片路徑 } 4.代碼演示：
.image-box{ // 隱藏截圖模板方案 position: fixed; top: 0; left: 0; transform: translate(-100%,0); z-index: -1; }
<div class="image-box" ref="imageDom">內(nèi)容,，不支持object-fit屬性,，請(qǐng)用background-size代替</div> 
// 截圖時(shí)容器置頂 window.pageYoffset = 0 document.documentElement.scrollTop = 0 document.body.scrollTop = 0 // 截圖 html2canvas(this.$refs.imageDom, { scale: 2, logging: false, useCORS: true, allowTaint: false, proxy: 'https://cdn.' }).then(canvas => { // 設(shè)置圖片:src="imgUrl" this.imgUrl = canvas.toDataURL('image/png') })
|
|
|
來(lái)自： 路人甲Java > 《待分類(lèi)》
