React 手机端生成海报 html2canvas & dom-to-image

最新推荐文章于 2025-11-11 00:17:00 发布

原创最新推荐文章于 2025-11-11 00:17:00 发布 · 1.9k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #html

前端工具技能专栏收录该内容

11 篇文章

订阅专栏

海报效果如图：

在这里插入图片描述

过程遇到的问题：

插件问题：

html2canvas 不支持 Ios无反应, 支持 Android
dom-to-image 支持 Ios无反应, 支持 Android
dom-to-image 在【ios】中, 图片部分空白，其他部分可以转成图片

解决方法：【canvas 画 img】
在这里插入图片描述

代码1：

import React, {Component} from 'react' 
import QRCode from 'qrcode.react'
import './shareActivity.less'
import classnames from 'classnames'

class ShareActivity extends Component {
  constructor (props) {
    super(props)
    this.state = {
      shareUrl: '',
      poster: '',
      hideImg: false
    }
  }
  componentWillReceiveProps(state, props) {
    console.log('props', props)
  } 
  componentDidMount () { 
    const _this = this
    const {shareUrl} = this.props
    const posterIndex = Number.parseInt(Math.random()*7 + 1)
    const poster = require(`../../../assets/image/invite/invite-${posterIndex}.jpg`)

    this.setState({ 
      shareUrl, 
      poster 
    }, () => {
      var canvas = document.getElementById("canvasImg")
      var ctx =canvas.getContext('2d')
      var img = new Image()
      img.src= poster   
      img.onload = function(){  
        let domImg = document.getElementById('posterImg').getBoundingClientRect()  
        _this.setState({posterWidth: domImg.width, posterHeight: domImg.height}, () => {
          ctx.drawImage(img,0,0, _this.state.posterWidth, _this.state.posterHeight)   
          // 生成图片 
          _this.props.callback() 
        })   
      }   
    })  

  }
  render () {
    return  (   
      <div id="shareActivity">      
          <canvas width={this.state.posterWidth} height={this.state.posterHeight} id="canvasImg"></canvas>
          <img id="posterImg" className={classnames(['poster', {hideDom: this.state.hideImg}])} src={this.state.poster}/>
          <p className="text">
            <img className="icon-link" src={require('../../../assets/image/icon-link.png')} alt=""/>
            <span>长按发送给朋友</span>
          </p>  
          <QRCode
            value={this.state.shareUrl} 
            fgColor="#000000"
          /> 
      </div> 
    )
  }
} 

export default ShareActivity

代码2：

showCourseShare(show_url) {  
    AntdAlert('', <ShareActivity shareUrl={show_url} callback={function() {
      let canvasImg = document.getElementById('shareActivity')  // activityDom  shareActivity
      if (!canvasImg) { return } 
      domtoimage.toJpeg(canvasImg).then((url) => {  
        if (!canvasImg) { return }    
        canvasImg.innerHTML = `<img class="domToImage" src=${url}>`
      })      
    }}/>)    
  },

–end