vue 生成二维码+截图

链接生成二维码

1.npm安装

npm install --save qrcodejs2

2.引入

import QRCode from 'qrcodejs2'

3.生成二维码

new QRCode('qrcode', { // 传入容器id

text: url, // 链接（必填）

width: 200, // 宽px

height: 200, // 高px

colorLight: '#F1F1F1' // 背景色

colorDark: '#F00', // 前景色

correctLevel: QRCode.CorrectLevel.L // 二维码可辨识度（L,M,Q,H）

})

4.代码演示：

<style lang="less" scoped>

  #qrcode{

    width: 1.81rem;

    height: 1.81rem;

    padding: .15rem;

    background: #F1F1F1;

    /deep/img{

      width: 100%;

      height: 100%;

    }

  }

</style>

CSS

HTML

截图

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.代码演示：

.image-box{ // 隐藏截图模板方案

  position: fixed;

  top:;

  left:;

  transform: translate(-100%,0);

  z-index: -1;

}

CSS

<div class="image-box" ref="imageDom">内容，不支持object-fit属性，请用background-size代替</div>

HTML

// 截图时容器置顶

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')

})

秒客网

vue 生成二维码+截图

相关文章