PC端生成小程序二维码海报并下载

最新推荐文章于 2024-05-17 09:04:44 发布

雨住一_abc

最新推荐文章于 2024-05-17 09:04:44 发布

阅读量587

点赞数 2

文章标签：小程序前端 javascript react

本文链接：https://blog.csdn.net/weixin_57033986/article/details/121754400

版权

我采用了前端截屏+前端生成二维码的方法展示海报并下载
上代码

//截屏组件
import html2canvas from 'html2canvas'
//生成二维码组件
import QRCode from 'qrcode.react'

//调用事件并截屏下载
const creatCode = () => {
	 const n = document.getElementsByClassName('poster1')[0] //获取海报的最外层dom
     html2canvas(n, { useCORS: true }).then(canvas => {
       const imgUrl = canvas.toDataURL()
       // 获取截图base64
       const img = new Image()
       img.crossOrigin = ''
       img.src = imgUrl
       const downLink = document.createElement('a')
       const event = new MouseEvent('click') // 创建一个单击事件
       downLink.href = img.src
       downLink.download = '二维码' // 图片name
       downLink.dispatchEvent(event)
     })
}

//生成包含背景图片、二维码的海报
<div className='poster1'>
  <div className='content'>
      <img src={bg} className='bg' alt='背景图' />
      <div className='body'>
        <div className='company'>{name}-{record.name}</div>
        <img className='hand' src={hand} alt='扫描二维码，快速入职' />
        <div className='code'>
          <QRCode
            id='qrCode'
            className='img'
            value={'小程序二维码链接'}
            size={284} // 二维码的大小
            fgColor='#ffffff' 
            bgColor='#000000' 
          />
        </div>
      </div>
    </div>
  </div>