index.js

import React, { Component } from "react"
import "./index.scss"
import { HeaderBar } from "src/common"
import { http, getParam } from "src/utils"
import QRCode from "qrcode"
import { Toast } from "antd-mobile"

class SharePoster extends Component {
  constructor(props) {
    super(props)
    this.state = {
      codeSrc: "",
      billSrc: "", // 图片链接
      imgUrl: "",
      smallListImg: [], // 小图片地址
      smallactive: 0, // 小图选中标记
      distPrice: "", // 分销价格
      name: "", // 用户姓名
      bgImage: [], // 背景图
    }
  }

  componentDidMount() {
    this.getCodeWe()
    http
      .get(
        `${API.home}/m/dist/posters/${getParam("courseId")}/${getParam("uid")}`
      )
      .then((res) => {
        // console.log(res);
        if (res.data.code === 200) {
          this.setState({
            imgUrl: res.data.data.avatar,
            smallListImg: res.data.data.list,
            distPrice: res.data.data.dist_course,
            bgImage: res.data.data.list,
            name: res.data.data.username,
          })
          this.initCanvas(this.state.bgImage, 0)
        } else {
          Toast.info(res.data.msg, 2)
        }
      })
  }

  // 初始化海报
  initCanvas = (imgList, index) => {
    let _this = this
    let imgSrc1 = imgList[index].poster
    let $width = 450
    let $height = 800
    let avatarWidth = 50 // imgList[index].poster_width    // 头像宽度
    let avatarHeight = 50 // imgList[index].poster_height     // 头像高度
    let avatarPositionX = imgList[index].header_position_x * $width // 头像x轴位置
    let avatarPositionY = imgList[index].header_position_y * $height - 18 // 头像Y轴位置

    let qrCodePositionX = imgList[index].qr_code_x * $width // 二维码x轴位置
    let qrCodePositionY = imgList[index].qr_code_y * $height + 7 // 二维码y轴位置

    var canvas = document.getElementById("canvas"),
      context = canvas.getContext("2d")
    _this
      .getBase64(imgSrc1)
      // 背景图片合成
      .then((img) => {
        let bgImage = new Image()
        bgImage.src = img
        let qrCodeImg = document.getElementById("qrcode")
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
          qrCodeImg = document.getElementById("qrcode")
        } else if (/(Android)/i.test(navigator.userAgent)) {
          //Android终端
          qrCodeImg = document.getElementById("qrcode")
        }

        bgImage.setAttribute("crossOrigin", "anonymous")
        bgImage.onload = function () {
          context.drawImage(bgImage, 0, 0, 450, 800)
          context.drawImage(
            qrCodeImg,
            qrCodePositionX,
            qrCodePositionY,
            100,
            100
          )
          context.fillStyle = imgList[index].username_color
          context.font = "16px serif"
          context.fillText(
            "@" + _this.state.name,
            avatarPositionX + avatarWidth + 20,
            avatarPositionY + avatarHeight / 2
          )
          context.font = "14px serif"
          context.fillText(
            "正在学习该课程",
            avatarPositionX + avatarWidth + 20,
            avatarPositionY + avatarHeight / 2 + 20
          )
          context.restore()
        }
      })
      // 头像生成
      .then(() => {
        _this.getBase64(_this.state.imgUrl).then((img) => {
          let bgImage = new Image()
          bgImage.src = img
          bgImage.setAttribute("crossOrigin", "anonymous")
          bgImage.setAttribute("border-Radius", "50%")
          bgImage.onload = function () {
            _this.imgPosition(
              context,
              bgImage,
              avatarPositionX,
              avatarPositionY,
              24
            )
            context.drawImage(bgImage, avatarPositionX, avatarPositionY, 48, 48)
            context.restore()
            _this.setState({
              billSrc: _this.convertCanvasToImage(canvas),
            })
          }
        })
      })
  }
  children = (curEle, tagName) => {
    var nodeList = curEle.childNodes
    var ary = []
    if (/MSIE(6|7|8)/.test(navigator.userAgent)) {
      for (var i = 0; i < nodeList.length; i++) {
        var curNode = nodeList[i]
        if (curNode.nodeType === 1) {
          ary[ary.length] = curNode
        }
      }
    } else {
      ary = Array.prototype.slice.call(curEle.children)
    }

    // 获取指定子元素
    if (typeof tagName === "string") {
      for (var k = 0; k < ary.length; k++) {
        curEle = ary[k]
        if (curEle.nodeName.toLowerCase() !== tagName.toLowerCase()) {
          ary.splice(k, 1)
          k--
        }
      }
    }

    return ary
  }

  // 合成图片位置
  imgPosition = (ctx, img, x, y, r) => {
    ctx.save()
    var cx = x + r
    var cy = y + r
    ctx.beginPath()
    ctx.arc(cx, cy, r, 0, 2 * Math.PI)
    ctx.clip()
  }

  // 获取二维码
  getCodeWe() {
    let _this = this
    let qrCodeLink = `https://m.julyedu.com/detail?id=${getParam(
      "courseId"
    )}&dist_code=${getParam("dist_code")}`
    return new Promise((resolve) => {
      QRCode.toDataURL(qrCodeLink, {}, function (err, url) {
        _this.setState({
          codeSrc: url,
        })
      })
      /*
                        let qrcode = new QRCode(document.getElementById('qrcode'), {
                            text: qrCodeLink,
                            width: 160,
                            height: 160,
                            colorDark: "#000000", // 生成的二维码的深色部分
                            colorLight: "#ffffff", //生成二维码的浅色部分
                        })
            */
      resolve()
    })
  }

  // 图片路径转成base64
  getBase64(img) {
    let _this = this
    return new Promise((resolve) => {
      let base64 = null
      let image = new Image()
      let timeStamp = +new Date()
      image.setAttribute("crossOrigin", "anonymous")
      image.src = img + "?" + timeStamp
      image.onload = () => {
        base64 = _this.getBase64Image(image)
        resolve(base64)
      }
      image.onerror = function () {
        let timeStamp = +new Date()
        _this.getBase64(img + "?" + timeStamp)
      }
    })
  }

  // 图片路径放入canvas转成base64
  getBase64Image = (img) => {
    let canvas = document.createElement("canvas")
    canvas.width = img.width
    canvas.height = img.height

    let ctx = canvas.getContext("2d")
    ctx.drawImage(img, 0, 0, img.width, img.height)
    let ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase()
    return canvas.toDataURL("image/" + ext)
  }

  // canvas转换成img图片
  convertCanvasToImage = (canvas) => {
    let image = new Image()
    image.src = canvas.toDataURL("image/png")
    return image
  }

  // 小图切换
  squareClick = (index) => {
    this.setState({
      smallactive: index,
    })
    this.initCanvas(this.state.bgImage, index)
  }

  render() {
    const { distPrice = {}, smallListImg = [], smallactive } = this.state
    return (
      <div className="share-poster">
        <HeaderBar title="生成专属海报" arrow={true} cart={false} />
        <div className="total-container">
          <div className="placard-img-container" id="imgWrapper">
            <img src={this.state.billSrc.src} alt="" />
          </div>
          <img
            src={this.state.codeSrc}
            alt=""
            id="qrcode"
            className="placard-code"
          />
          <canvas
            id="canvas"
            width="450"
            height="800"
            className={this.state.billSrc === "" ? "" : "hide"}
          />
        </div>
        <div className="placard-desc">
          <span className="placard-sharetxt">
            长按保存海报分享给好友，每有一人通过您的分享购买该课程，您可以
            {distPrice.count_type === 0 && (
              <span className="placard-price">
                获得{distPrice.first_level_tip}元的佣金奖励。
              </span>
            )}
            {distPrice.count_type === 1 && (
              <span className="placard-price">
                获得成交金额的{distPrice.first_level_scale}%作为佣金奖励。
              </span>
            )}
          </span>
        </div>
        <div className="placard-swiper">
          <ul className="placard-list">
            {smallListImg.length > 0 &&
              smallListImg.map((item, index) => {
                return (
                  <li
                    onClick={this.squareClick.bind(this, index)}
                    key={index}
                    className={smallactive === index ? "active" : ""}
                  >
                    <img src={item.square} alt="" />
                  </li>
                )
              })}
          </ul>
        </div>
      </div>
    )
  }
}

export default SharePoster