canvas生成笔记图片

import styles from './index.less'
import { PureComponent, createRef } from 'react'
import QRCode from 'qrcode'
import html2canvas from 'html2canvas'
import classnames from 'classnames'
import preventScroll from 'prevent-scroll'
import growingService from '@xb/services/growing'
import MaskBasic from '@xb/components/Mask/Basic'
import MaskCenter from '@xb/components/Mask/Center'
import ButtonBasic from '@xb/components/Button/Basic'
import Line from '@xb/components/Line/Basic'
import { MountPoint, sleep } from '@xb/utils/dom'
import { device } from '@xb/utils/userAgent'
import creditService from '@xb/services/credit'

import iconLogoComplete from '@xb/assets/icons/icon-logo-complete.png'
import ellipseBg from '@xb/assets/ellipse-bg.png'
import userImg from '@xb/assets/user.png'

class ModalComponent extends PureComponent {
 constructor(props) {
   super(props)
   const { onClick, uniqueId, noteId } = this.props
   this.onClick = onClick
   this.node = createRef()
   this.container = createRef()
   this.saveImage = createRef()
   this.avatar = createRef()
   this.startTime = ''
   this.endTime = ''

   const link = `${window.location.origin}/course/note/landing/${uniqueId}/${noteId}?sourceType=h5wxshare`
   this.action.generateQR(link)
   this.state = {
     once: true,
     qrcode: false,
   }
 }

 action = {
   generateQR: async url => {
     try {
       const baseImage = await QRCode.toDataURL(url)
       const image = new Image()
       image.src = baseImage
       this.node.current.appendChild(image)
       this.setState({ qrcode: true })
     } catch (err) {
       console.error(err)
     }
   },
   generateImage: async () => {
     const canvas = this.action.drawCanvas(this.container.current)
     await sleep(300)
     html2canvas(this.container.current, {
       useCORS: true,
       logging: false,
       canvas,
       scale: 10,
       letterRendering: true,
     }).then(canvas => {
       const image = new Image()
       image.src = canvas.toDataURL('image/png')
       this.saveImage.current.appendChild(image)
     })
   },
   checkPicture: async url => {
     return new Promise(resolve => {
       const image = new Image()
       image.src = url
       image.onload = () => {
         resolve(url)
       }
       image.onerror = () => {
         resolve(userImg)
       }
     })
   },
   DPR: () => {
     if (window.devicePixelRatio && window.devicePixelRatio > 1) {
       return window.devicePixelRatio
     }
     return 1
   },
   parseValue: value => {
     return parseInt(value, 10)
   },
   drawCanvas: node => {
     const box = window.getComputedStyle(node)
     // DOM 节点计算后宽高
     const width = this.action.parseValue(box.width)
     const height = this.action.parseValue(box.height)
     // 获取像素比
     const scaleBy = this.action.DPR()
     // 创建自定义 canvas 元素
     const canvas = document.createElement('canvas')
     // 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比
     canvas.width = width * scaleBy
     canvas.height = height * scaleBy
     // 设定 canvas css宽高为 DOM 节点宽高
     canvas.style.width = `${width}px`
     canvas.style.height = `${height}px`
     // 获取画笔
     const context = canvas.getContext('2d')
     // 【重要】关闭抗锯齿
     context.mozImageSmoothingEnabled = false
     context.msImageSmoothingEnabled = false
     context.imageSmoothingEnabled = false
     // 将所有绘制内容放大像素比倍
     context.scale(scaleBy, scaleBy)

     return canvas
   },
   touchstart: () => {
     this.startTime = +new Date()
   },
   touchend: () => {
     this.endTime = +new Date()
     const { uniqueId } = this.props

     if (this.endTime - this.startTime > 700) {
       const { payload } = this.props
       growingService.noteShareImage(payload)
       try {
         creditService.shareNote(uniqueId)
       } catch (error) {
         console.error(error)
       }
     }
   },
 }

 render() {
   const { userUrl, userName, createdTime, content, productTitle } = this.props
   const { once, qrcode } = this.state
   const isIOSBox = device.isIOS ? styles.isIOSBox : ''
   const isIOSNote = device.isIOS ? styles.isIOSNote : ''

   const avatar = this.action.checkPicture(userUrl)
   avatar.then(url => {
     this.avatar.current.src = url
     if (once && qrcode) {
       this.action.generateImage()
       this.setState({ once: false })
     }
   })

   return (
     <MaskBasic onClick={this.onClick}>
       <MaskCenter>
         <div className={classnames(styles.box, isIOSBox)} onClick={e => e.stopPropagation()}>
           <div
             ref={this.saveImage}
             className={styles.containerImage}
             onTouchStart={this.action.touchstart}
             onTouchEnd={this.action.touchend}
           />
           <div ref={this.container} className={styles.container}>
             <img className={styles.logo} src={iconLogoComplete} />
             <img className={styles.ellipse} src={ellipseBg} />
             <div className={styles.content}>
               <div className={styles.product}>
                 <span>来自课程</span>
                 <p>{productTitle}</p>
               </div>
               <div className={styles.userInfo}>
                 <img ref={this.avatar} className={styles.avatar} crossOrigin='anonymous' />
                 <div className={styles.user}>
                   <h3>{userName}</h3>
                   <p>{createdTime}</p>
                 </div>
               </div>
               <p className={classnames(styles.note, isIOSNote)}>{content}</p>
               <Line className={styles.line} size={15} />
               <div className={styles.qrcodeInfo}>
                 <div className={styles.qrcode} ref={this.node} />
                 <div className={styles.description}>
                   <h3>长按识别二维码</h3>
                   <p>查看完整笔记，亦可点赞评论</p>
                 </div>
               </div>
             </div>
           </div>
           <div className={styles.button}>
             <ButtonBasic style={{ width: '100%', color: '#222222', fontWeight: 400, boxShadow: 'none' }}>长按按钮分享笔记</ButtonBasic>
           </div>
         </div>
         <div className={styles.close} />
       </MaskCenter>
     </MaskBasic>
   )
 }
}

class GlobalModalSharePicture extends MountPoint {
 hide = () => {
   preventScroll.off()
   this.removeMountPoint()
 }

 show = options => {
   preventScroll.on()
   this.render(<ModalComponent onClick={this.hide} {...options} />)
 }
}

export default new GlobalModalSharePicture()