import React, {Component} from 'react'
import './index.scss'
import {HeaderBar} from '../../common'
import {http, api, getParam} from '@/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) => {
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) // 头像Y轴位置
let qrCodePositionX = imgList[index].qr_code_x * $width // 二维码x轴位置
let qrCodePositionY = imgList[index].qr_code_y * $height // 二维码y轴位置
let qrCodeWidth = (imgList[index].qr_code_width * $width) // 二维码宽度
let qrCodeHeight = (imgList[index].qr_code_height * $height) - avatarHeight / 2 // 二维码高度
let qrCodeLink = `/detail/${getParam('courseId')}/${getParam('dist_code')}`
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');
let ua = navigator.userAgent.toLowerCase();
// Android终端
let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1;
// Ios终端
let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
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, 320, 685, 100, 100);
context.fillStyle = imgList[index].username_color;
context.font = "16px serif";
context.fillText('@' + _this.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 d = 2 * r;
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 = `/detail/${getParam('courseId')}/${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();
let dataURL = canvas.toDataURL("image/" + ext);
return dataURL;
}
// 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() {
return (
<div className='share-poster'>
<HeaderBar title='生成专属海报' arrow={true} cart={false}></HeaderBar>
<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'}></canvas>
</div>
<div className='placard-desc'>
<span className='placard-sharetxt'>
长按保存海报分享给好友，每有一人通过您的分享购买该课程，您可以
{
this.state.distPrice.count_type === 0 &&
<span className='placard-price'>获得{this.state.distPrice.first_level_tip}元的佣金奖励。</span>
}
{
this.state.distPrice.count_type === 1 &&
<span
className='placard-price'>获得成交金额的{this.state.distPrice.first_level_scale}%作为佣金奖励。</span>
}
</span>
</div>
<div className='placard-swiper'>
<ul className='placard-list'>
{
this.state.smallListImg && this.state.smallListImg.length > 0 && this.state.smallListImg.map((item, index) => {
return (
<li onClick={this.squareClick.bind(this, index)} key={index}
className={this.state.smallactive === index ? 'active' : ''}>
<img src={item.square} alt=""/>
</li>
)
})
}
</ul>
</div>
</div>
)
}
}
export default SharePoster