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

关注

原创最新推荐文章于 2026-09-20 14:22:09 发布 2k 阅读 AI 写同款· GEO 优化 ›

ios生成海报使用dom-to-image中toPng报错isTrusted:true 主要是ios中safari浏览器解析错误，引起的报错，主要引起原因toPng会调用toSvg，toSvg直接将html标签内容通过svg中foreignObject标签直接包裹，然后转base64，通过data:image/svg+xml;解决办法：二次生成（调用两次），判断ios or 安卓，生成第一次生成，不用参数，例如：scale： 3，在第二次生成再进行清晰度操作，避免多次生成，引起性能消耗。以上种种很多案例，使用canvase进行转换的，标签丢失，直接toPng版本的，兼容性问题。阅读详情

海报效果如图：

在这里插入图片描述

过程遇到的问题：

插件问题：

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

收录于