shareposter.8f58f005.chunk.js.map 14.6 KB
Newer Older
wangshuo committed
1
{"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":""}