欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-03 17:23:09
海报效果如图:过程遇到的问题:插件问题:html2canvas 不支持 Ios无反应, 支持 Androiddom-to-image 支持 Ios无反应, 支持 Androiddom-to-image 在【ios】中, 图片部分空白,其他部分可以转成图片解决方法:【canvas 画 img】代码1:import React, {Component} from 'react' import QRCode from 'qrcode.react'import './sha...

海报效果如图:

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

过程遇到的问题:

插件问题:

  • html2canvas 不支持 Ios无反应, 支持 Android

  • dom-to-image 支持 Ios无反应, 支持 Android

  • dom-to-image 在【ios】中, 图片部分空白,其他部分可以转成图片

解决方法:【canvas 画 img】
手机端生成海报 html2canvas & dom-to-image

代码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

本文地址:https://blog.csdn.net/github_36327470/article/details/108586650