链接生成二维码
1.npm安装
npm install --save qrcodejs2
2.引入
import QRCode from 'qrcodejs2'
3.生成二维码
new QRCode('qrcode', { // 传入容器id
text: url, // 链接(必填)
200, // 宽(默认256px)
height: 200, // 高(默认256px)
colorLight: '#F1F1F1' // 背景色
colorDark: '#F00', // 前景色
correctLevel: QRCode.CorrectLevel.L // 二维码可辨识度(L,M,Q,H)
})
4.代码演示:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.qrcodeBox{ width: 296px; height: 296px; padding: 20px; background: #F1F1F1; transform-origin: 0 0; }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div class="qrcodeBox" :style="`transform: scale(${scale});`"> <div id="qrcode"></div> </div>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// 计算倍数1.08rem/7.5rem this.scale = document.body.clientWidth * 108 / 750 / 296 // 屏蔽下一行eslint报错 // eslint-disable-next-line new QRCode('qrcode', { // 容器id text: location.href, colorLight: '#F1F1F1', correctLevel: QRCode.CorrectLevel.L })
截图
1.npm安装
npm install html2canvas@1.0.0-rc.4 // 指定安装版本最新版不支持IOS13
2.引入
import html2canvas from 'html2canvas'
3.截图
html2canvas(this.$refs.imageDom, // 传入容器ref值
{
scale: 2, // 缩放倍数
logging: false, // 取消调试
useCORS: true, // 用CORS从服务器加载映像
allowTaint: false, // 允许跨域
proxy: 'url' // 跨域地址
}
).then(canvas => {
this.imgUrl = canvas.toDataURL('image/png') // 生成base64图片路径
}
4.代码演示:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.image-box{ // 隐藏截图模板方案 position: fixed; top: 0; left: 0; transform: translate(-100%,0); z-index: -1; }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div class="image-box" ref="imageDom">内容,不支持object-fit属性,请用background-size代替</div>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// 截图时容器置顶 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.yjwysj.cn' }).then(canvas => { // 设置图片:src="imgUrl" this.imgUrl = canvas.toDataURL('image/png') })