{"version":3,"sources":["components/sharePoster/index.js"],"names":["SharePoster","props","_this2","Object","_Users_xzh_dnmp_www_mr_julyedu_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_classCallCheck__WEBPACK_IMPORTED_MODULE_2__","this","_Users_xzh_dnmp_www_mr_julyedu_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_4__","_Users_xzh_dnmp_www_mr_julyedu_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_getPrototypeOf__WEBPACK_IMPORTED_MODULE_5__","call","initCanvas","imgList","index","_this","_Users_xzh_dnmp_www_mr_julyedu_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_6__","imgSrc1","poster","avatarPositionX","header_position_x","avatarPositionY","header_position_y","canvas","qr_code_x","qr_code_y","qr_code_width","qr_code_height","concat","getParam","document","getElementById","context","getContext","getBase64","then","img","bgImage","Image","src","qrCodeImg","ua","navigator","userAgent","toLowerCase","indexOf","match","test","setAttribute","onload","drawImage","fillStyle","username_color","font","fillText","name","avatarHeight","restore","state","imgUrl","imgPosition","setState","billSrc","convertCanvasToImage","children","curEle","tagName","nodeList","childNodes","ary","i","length","curNode","nodeType","Array","prototype","slice","k","nodeName","splice","ctx","x","y","r","save","cx","cy","beginPath","arc","Math","PI","clip","getBase64Image","createElement","width","height","ext","substring","lastIndexOf","toDataURL","image","squareClick","smallactive","codeSrc","smallListImg","distPrice","_this3","getCodeWe","http","get","API","home","res","data","code","avatar","list","dist_course","username","antd_mobile_lib_toast__WEBPACK_IMPORTED_MODULE_1___default","a","info","msg","qrCodeLink","Promise","resolve","QRCode","err","url","base64","timeStamp","Date","onerror","_this4","react__WEBPACK_IMPORTED_MODULE_8___default","className","_common__WEBPACK_IMPORTED_MODULE_10__","title","arrow","cart","id","alt","count_type","first_level_tip","first_level_scale","map","item","onClick","bind","key","square","Component"],"mappings":"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","file":"static/js/shareposter.c9eef843.chunk.js","sourcesContent":["import React, {Component} from 'react'\nimport './index.scss'\nimport {HeaderBar} from '../../common'\nimport {http, api, getParam} from '@/utils'\nimport QRCode from 'qrcode'\nimport { Toast} from 'antd-mobile'\n\n\n\nclass SharePoster extends Component {\n    constructor(props) {\n        super(props)\n        this.state = {\n            codeSrc: '',\n            billSrc: '',         // 图片链接\n            imgUrl: '',\n            smallListImg: [],  // 小图片地址\n            smallactive: 0,  // 小图选中标记\n            distPrice: '',  // 分销价格\n            name: '',       // 用户姓名\n            bgImage: []          // 背景图\n        }\n    }\n\n    componentDidMount() {\n        this.getCodeWe()\n        http.get(`${API.home}/m/dist/posters/${getParam('courseId')}/${getParam('uid')}`).then((res) => {\n            if (res.data.code === 200) {\n                this.setState({\n                    imgUrl: res.data.data.avatar,\n                    smallListImg: res.data.data.list,\n                    distPrice: res.data.data.dist_course,\n                    bgImage: res.data.data.list,\n                    name: res.data.data.username\n                })\n                this.initCanvas(this.state.bgImage, 0)\n            } else {\n                Toast.info(res.data.msg, 2)\n            }\n        })\n    }\n\n    // 初始化海报\n    initCanvas = (imgList, index) => {\n        let _this = this;\n        let imgSrc1 = imgList[index].poster;\n        let $width = 450;\n        let $height = 800;\n        let avatarWidth = 50    // imgList[index].poster_width    // 头像宽度\n        let avatarHeight = 50   // imgList[index].poster_height     // 头像高度\n        let avatarPositionX = (imgList[index].header_position_x * $width)  // 头像x轴位置\n        let avatarPositionY = (imgList[index].header_position_y * $height)   // 头像Y轴位置\n\n        let qrCodePositionX = imgList[index].qr_code_x * $width // 二维码x轴位置\n        let qrCodePositionY = imgList[index].qr_code_y * $height  // 二维码y轴位置\n        let qrCodeWidth = (imgList[index].qr_code_width * $width)      // 二维码宽度\n        let qrCodeHeight = (imgList[index].qr_code_height * $height) - avatarHeight / 2     // 二维码高度\n\n        let qrCodeLink = `/detail/${getParam('courseId')}/${getParam('dist_code')}`\n\n        var canvas = document.getElementById(\"canvas\"),\n            context = canvas.getContext(\"2d\");\n\n        _this.getBase64(imgSrc1)\n        // 背景图片合成\n            .then((img) => {\n                let bgImage = new Image();\n                bgImage.src = img;\n                let qrCodeImg = document.getElementById('qrcode');\n                let ua = navigator.userAgent.toLowerCase();\n                // Android终端\n                let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1;\n                // Ios终端\n                let isiOS = !!ua.match(/\\(i[^;]+;( U;)? CPU.+Mac OS X/);\n                if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {\n                    qrCodeImg = document.getElementById('qrcode');\n                } else if (/(Android)/i.test(navigator.userAgent)) {\n                    //Android终端\n                    qrCodeImg = document.getElementById('qrcode');\n\n                }\n\n                bgImage.setAttribute('crossOrigin', 'anonymous');\n                bgImage.onload = function () {\n                    context.drawImage(bgImage, 0, 0, 450, 800);\n                    context.drawImage(qrCodeImg, 320, 685, 100, 100);\n                    context.fillStyle = imgList[index].username_color;\n                    context.font = \"16px serif\";\n                    context.fillText('@' + _this.name, (avatarPositionX + avatarWidth) + 20, (avatarPositionY + avatarHeight / 2));\n                    context.font = \"14px serif\";\n                    context.fillText('正在学习该课程', (avatarPositionX + avatarWidth) + 20, (avatarPositionY + avatarHeight / 2) + 20);\n                    context.restore();\n                }\n\n            })\n            // 头像生成\n            .then(() => {\n                _this.getBase64(_this.state.imgUrl)\n                    .then((img) => {\n                        let bgImage = new Image();\n                        bgImage.src = img;\n                        bgImage.setAttribute('crossOrigin', 'anonymous');\n                        bgImage.setAttribute('border-Radius', '50%');\n                        bgImage.onload = function () {\n                            _this.imgPosition(context, bgImage, avatarPositionX, avatarPositionY, 24);\n                            context.drawImage(bgImage, avatarPositionX, avatarPositionY, 48, 48);\n                            context.restore();\n                            _this.setState({\n                                billSrc: _this.convertCanvasToImage(canvas)\n                            })\n\n                        }\n                    })\n\n            })\n    }\n    children = (curEle, tagName) => {\n        var nodeList = curEle.childNodes;\n        var ary = [];\n        if (/MSIE(6|7|8)/.test(navigator.userAgent)) {\n            for (var i = 0; i < nodeList.length; i++) {\n                var curNode = nodeList[i];\n                if (curNode.nodeType === 1) {\n                    ary[ary.length] = curNode;\n                }\n            }\n        } else {\n            ary = Array.prototype.slice.call(curEle.children);\n        }\n\n        // 获取指定子元素\n        if (typeof tagName === \"string\") {\n            for (var k = 0; k < ary.length; k++) {\n                curEle = ary[k];\n                if (curEle.nodeName.toLowerCase() !== tagName.toLowerCase()) {\n                    ary.splice(k, 1);\n                    k--;\n                }\n            }\n        }\n\n        return ary;\n    }\n\n    // 合成图片位置\n    imgPosition = (ctx, img, x, y, r) => {\n        ctx.save();\n        var d = 2 * r;\n        var cx = x + r;\n        var cy = y + r;\n        ctx.beginPath();\n        ctx.arc(cx, cy, r, 0, 2 * Math.PI);\n        ctx.clip();\n    }\n\n    // 获取二维码\n    getCodeWe() {\n        let _this = this\n        let qrCodeLink = `/detail/${getParam('courseId')}/${getParam('dist_code')}`\n        return new Promise(resolve => {\n            QRCode.toDataURL(qrCodeLink, {}, function (err, url) {\n                _this.setState({\n                    codeSrc: url\n                })\n            })\n            /*\n                        let qrcode = new QRCode(document.getElementById('qrcode'), {\n                            text: qrCodeLink,\n                            width: 160,\n                            height: 160,\n                            colorDark: \"#000000\", // 生成的二维码的深色部分\n                            colorLight: \"#ffffff\", //生成二维码的浅色部分\n                        })\n            */\n            resolve()\n        })\n    }\n\n    // 图片路径转成base64\n    getBase64(img) {\n        let _this = this;\n        return new Promise(resolve => {\n            let base64 = null;\n            let image = new Image();\n            let timeStamp = +new Date();\n            image.setAttribute('crossOrigin', 'anonymous');\n            image.src = img + '?' + timeStamp;\n            image.onload = () => {\n                base64 = _this.getBase64Image(image)\n                resolve(base64)\n            }\n            image.onerror = function () {\n                let timeStamp = +new Date();\n                _this.getBase64(img + '?' + timeStamp);\n            }\n        })\n\n    }\n\n    // 图片路径放入canvas转成base64\n    getBase64Image = (img) => {\n        let canvas = document.createElement(\"canvas\");\n        canvas.width = img.width;\n        canvas.height = img.height;\n\n        let ctx = canvas.getContext(\"2d\");\n        ctx.drawImage(img, 0, 0, img.width, img.height);\n        let ext = img.src.substring(img.src.lastIndexOf(\".\") + 1).toLowerCase();\n        let dataURL = canvas.toDataURL(\"image/\" + ext);\n        return dataURL;\n    }\n\n    // canvas转换成img图片\n    convertCanvasToImage = (canvas) => {\n        let image = new Image();\n        image.src = canvas.toDataURL(\"image/png\");\n        return image;\n    }\n\n    // 小图切换\n    squareClick = (index) => {\n        this.setState({\n            smallactive: index\n        })\n        this.initCanvas(this.state.bgImage, index);\n\n    }\n\n    render() {\n        return (\n            <div className='share-poster'>\n                <HeaderBar title='生成专属海报' arrow={true} cart={false}></HeaderBar>\n                <div className=\"total-container\">\n                    <div className='placard-img-container' id='imgWrapper'>\n                        <img src={this.state.billSrc.src} alt=\"\"/>\n                    </div>\n                    <img src={this.state.codeSrc} alt=\"\" id='qrcode' className='placard-code'/>\n                    <canvas id='canvas' width='450' height='800'\n                            className={this.state.billSrc === '' ? '' : 'hide'}></canvas>\n                </div>\n                <div className='placard-desc'>\n                    <span className='placard-sharetxt'>\n                        长按保存海报分享给好友，每有一人通过您的分享购买该课程，您可以\n                        {\n                            this.state.distPrice.count_type === 0 &&\n                            <span className='placard-price'>获得{this.state.distPrice.first_level_tip}元的佣金奖励。</span>\n                        }\n                        {\n                            this.state.distPrice.count_type === 1 &&\n                            <span\n                                className='placard-price'>获得成交金额的{this.state.distPrice.first_level_scale}%作为佣金奖励。</span>\n                        }\n                    </span>\n                </div>\n\n                <div className='placard-swiper'>\n                    <ul className='placard-list'>\n                        {\n                            this.state.smallListImg && this.state.smallListImg.length > 0 && this.state.smallListImg.map((item, index) => {\n                                return (\n                                    <li onClick={this.squareClick.bind(this, index)} key={index}\n                                        className={this.state.smallactive === index ? 'active' : ''}>\n                                        <img src={item.square} alt=\"\"/>\n                                    </li>\n                                )\n                            })\n                        }\n                    </ul>\n                </div>\n\n            </div>\n        )\n    }\n}\n\nexport default SharePoster\n"],"sourceRoot":""}