{"version":3,"sources":["components/sharePoster/index.js"],"names":["SharePoster","props","initCanvas","imgList","index","_this","imgSrc1","poster","avatarPositionX","header_position_x","avatarPositionY","header_position_y","qrCodePositionX","qr_code_x","qrCodePositionY","qr_code_y","canvas","document","getElementById","context","getContext","getBase64","then","img","bgImage","Image","src","qrCodeImg","test","navigator","userAgent","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","call","k","nodeName","toLowerCase","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","this","getCodeWe","http","get","API","home","getParam","res","data","code","avatar","list","dist_course","username","info","msg","qrCodeLink","Promise","resolve","QRCode","err","url","base64","timeStamp","Date","onerror","className","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":"mrstaticjs/shareposter.8f58f005.chunk.js","sourcesContent":["import React, { Component } from \"react\"\nimport \"./index.scss\"\nimport { HeaderBar } from \"src/common\"\nimport { http, getParam } from \"src/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\n .get(\n `${API.home}/m/dist/posters/${getParam(\"courseId\")}/${getParam(\"uid\")}`\n )\n .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\n var canvas = document.getElementById(\"canvas\"),\n context = canvas.getContext(\"2d\")\n _this\n .getBase64(imgSrc1)\n // 背景图片合成\n .then((img) => {\n let bgImage = new Image()\n bgImage.src = img\n let qrCodeImg = document.getElementById(\"qrcode\")\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 bgImage.setAttribute(\"crossOrigin\", \"anonymous\")\n bgImage.onload = function () {\n context.drawImage(bgImage, 0, 0, 450, 800)\n context.drawImage(\n qrCodeImg,\n qrCodePositionX,\n qrCodePositionY,\n 100,\n 100\n )\n context.fillStyle = imgList[index].username_color\n context.font = \"16px serif\"\n context.fillText(\n \"@\" + _this.state.name,\n avatarPositionX + avatarWidth + 20,\n avatarPositionY + avatarHeight / 2\n )\n context.font = \"14px serif\"\n context.fillText(\n \"正在学习该课程\",\n avatarPositionX + avatarWidth + 20,\n avatarPositionY + avatarHeight / 2 + 20\n )\n context.restore()\n }\n })\n // 头像生成\n .then(() => {\n _this.getBase64(_this.state.imgUrl).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(\n context,\n bgImage,\n avatarPositionX,\n avatarPositionY,\n 24\n )\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 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 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(\n \"courseId\"\n )}&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 // 图片路径放入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 return canvas.toDataURL(\"image/\" + ext)\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 title=\"生成专属海报\" arrow={true} cart={false} />\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 {distPrice.count_type === 0 && (\n <span className=\"placard-price\">\n 获得{distPrice.first_level_tip}元的佣金奖励。\n </span>\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 {smallListImg.length > 0 &&\n 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 </ul>\n </div>\n </div>\n )\n }\n}\n\nexport default SharePoster\n"],"sourceRoot":""}
