{"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_7__","imgSrc1","poster","avatarPositionX","header_position_x","avatarPositionY","header_position_y","qrCodePositionX","qr_code_x","qrCodePositionY","qr_code_y","canvas","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","state","name","avatarHeight","restore","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","_this$state","_this$state$distPrice","_this$state$smallList","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":"mrstatic/js/shareposter.4a46fd9a.chunk.js","sourcesContent":["import React, {Component} from 'react';\nimport './index.scss';\nimport {HeaderBar} from '@/common';\nimport {http, getParam} from '@/utils';\nimport QRCode from 'qrcode';\nimport { Toast} from 'antd-mobile';\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 // console.log(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)- 18 // 头像Y轴位置\n\n let qrCodePositionX = imgList[index].qr_code_x * $width // 二维码x轴位置\n let qrCodePositionY = imgList[index].qr_code_y * $height + 7 // 二维码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 = `https://m.julyedu.com/detail?id=${getParam('courseId')}&dist_code${getParam('dist_code')}`\n\n var canvas = document.getElementById(\"canvas\"),\n context = canvas.getContext(\"2d\");\n // console.log(_this);\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, qrCodePositionX, qrCodePositionY, 100, 100);\n context.fillStyle = imgList[index].username_color;\n context.font = \"16px serif\";\n context.fillText('@' + _this.state.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 = `https://m.julyedu.com/detail?id=${getParam('courseId')}&dist_code=${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 render() {\n const { distPrice={}, smallListImg=[], smallactive } = this.state;\n return (\n <div className='share-poster'>\n <HeaderBar\n title='生成专属海报'\n arrow={true}\n cart={false}\n />\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\n src={this.state.codeSrc}\n alt=\"\"\n id='qrcode'\n className='placard-code'\n />\n <canvas\n id='canvas'\n width='450'\n height='800'\n className={this.state.billSrc === '' ? '' : 'hide'}\n />\n </div>\n <div className='placard-desc'>\n <span className='placard-sharetxt'>\n 长按保存海报分享给好友，每有一人通过您的分享购买该课程，您可以\n {\n distPrice.count_type === 0 &&\n <span className='placard-price'>\n 获得{distPrice.first_level_tip}元的佣金奖励。\n </span>\n }\n {\n distPrice.count_type === 1 &&\n <span className='placard-price'>\n 获得成交金额的{distPrice.first_level_scale}%作为佣金奖励。\n </span>\n }\n </span>\n </div>\n <div className='placard-swiper'>\n <ul className='placard-list'>\n {\n smallListImg.length > 0 && smallListImg.map((item, index) => {\n return (\n <li\n onClick={this.squareClick.bind(this, index)}\n key={index}\n className={smallactive === index ? 'active' : ''}\n >\n <img src={item.square} alt=\"\" />\n </li>\n );\n })\n }\n </ul>\n </div>\n </div>\n );\n }\n}\n\nexport default SharePoster;\n"],"sourceRoot":""}
