链接生成二维码

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 

<div id="qrcode"></div>

HTML 

// eslint-disable-next-line // 屏蔽下一行eslint报错
new QRCode('qrcode', { // 容器id
  text: location.href,
colorLight: '#F1F1F1',
correctLevel: QRCode.CorrectLevel.L
})

JS

 

截图

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: 0;
left: 0;
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="https://www.cnblogs.com/xiaolinxitong/archive/2020/06/19/imgUrl"
this.imgUrl = canvas.toDataURL('image/png')
})

JS

 

1.《vue 生成二维码+截图》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。

2.《vue 生成二维码+截图》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

3.文章转载时请保留本站内容来源地址，https://www.cxvn.com/study/26515.html