canvas 海报

<script>
  import {Qrcode} from 'vux'
  import call from '../../assets/img/index/btn-call.png'
  import poster from '../../assets/img/index/btn-poster.png'
  import shop from '../../assets/img/index/btn-shop.png'
  import wx from '../../assets/img/index/btn-wx.png'
  import PersonalCommonJs from '../../common-js/personal-common-js'
  export default {
    data() {
      return {
        source: this.$route.query.url || '',
        url: '',
        agentRealName: '',
        agentPhone: '',
        headImg: '',
        oldLinkId: this.$route.query.linkId || '',
        mechanism: '',
        downloadUrl: '',
        newLinkId: '',
        productId: this.$route.query.id || ''
 
      }
    },
    mounted() {
      let self = this
      // 获取代理人信息以及二维码url
      this.newLinkId = PersonalCommonJs.uuid();
      // 分享控制
      this.$controlShare('hideOptionMenu');
      if (!!this.oldLinkId) {
        self.getCodeInfo(this.oldLinkId);
      }
      else {
        this.$axios.post('/share-link/share-success', {
          oldLinkId: this.oldLinkId,
          newLinkId: this.newLinkId,
          to: 'poster'
        })
          .then(function (res) {
            if (res.data.errCode == 0) {
              self.getCodeInfo(self.newLinkId);
            }
            else {
              self.$tip.info(res.data.errMsg);
            }
          }).catch(function (err) {
        });
      }
 
 
    },
    methods: {
      _roundedRect(ctx, x, y, width, height, radius) {
        ctx.beginPath();
        ctx.moveTo(x, y + radius);
        ctx.lineTo(x, y + height - radius);
        ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
        ctx.lineTo(x + width - radius, y + height);
        ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
        ctx.lineTo(x + width, y + radius);
        ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
        ctx.lineTo(x + radius, y);
        ctx.quadraticCurveTo(x, y, x, y + radius);
        ctx.stroke();
      },
      drawQrcode() {
        let self = this;
        var nWidth = document.body.clientWidth,//屏幕可视区域 宽度
          nHeight = 600,//屏幕可视区域 高度
          _canvasWidth = document.body.clientWidth * 2,//画布 宽度
          _canvasHeight = nHeight * 2;//画布 高度
        //开始画图，获取上下文；
        var _canvas = document.getElementById("canvas_box");
        _canvas.width = _canvasWidth;
        _canvas.height = _canvasHeight;
        var _context = _canvas.getContext('2d');
        //onload是异步加载，所以要等第一个onload 加载完毕再画第二张图片
        var _imagetext = new Image();
        //解决跨域，如果有跨域错误信息一定要加此属性；
        _imagetext.crossOrigin = "anonymous";
        _imagetext.src = self.source;
        _imagetext.onload = function () {
          _context.save(); // 保存当前_context的状态
          _context.drawImage(_imagetext, 0, 0, nWidth * 2, nHeight * 2);
          _context.stroke();//
          _context.closePath();
 
          //黑色矩形
          _context.moveTo(0, (0.8485 * nHeight) * 2);
          //颜色透明度
          _context.fillStyle = 'rgba(0,0,0,0.5)';
          self._roundedRect(_context, 0, (0.8685 * nHeight) * 2, nWidth * 2, 115 * 2, 0 * 2);
          _context.fill();
          _context.closePath();
          var _imagehead = new Image();//头像
          //如果有跨域问题，请给img对象添加如下属性
          _imagehead.crossOrigin = "anonymous";
          _imagehead.src = self.headImg;
          _imagehead.onload = function () {
            _context.save(); // 保存当前_context的状态
            _context.beginPath();
            _context.lineWidth = "20";
            //画出圆
            //_context.arc(nWidth,70.28/603*nHeight*2,40/375*nWidth*2,0,2*Math.PI,true);
            _context.arc(100, 0.933 * nHeight * 2, 60, 0, 2 * Math.PI, true);
            //圆有个边框
            _context.lineWidth = 10;
            _context.strokeStyle = '#fff';
            _context.fill();
            _context.stroke();
            //裁剪上面的圆形
            _context.clip();
            // 在刚刚裁剪的园上画图
            _context.drawImage(_imagehead, (120 / 2 - 40) * 2, 0.880 * nHeight * 2, 64 * 2, 64 * 2);
            _context.restore();
            _context.stroke();
 
            //头像下面的文字
            _context.beginPath();
            _context.textAlign = "left";
            //设置字体
            _context.font = '30px Arial';
            _context.lineWidth = 1.0;
            _context.fillStyle = '#fff';
            _context.fillText(self.agentRealName, 190, (0.905 * nHeight) * 2);
            _context.fillText(`手机:${self.agentPhone}`, 190, (0.9440 * nHeight) * 2);
            _context.fillText(self.mechanism, 190, (0.9800 * nHeight) * 2);
 
            //头像下面的文字
            _context.beginPath();
            _context.textAlign = "left";
            //设置字体
            _context.font = '22px Arial';
            _context.lineWidth = 1.0;
            _context.fillStyle = '#fff';
            //_context.fillText('长按识别二维码，进入代理人微店', 170, 2 * (0.9745 * nHeight));
 
            //白色矩形部分
            //_context.moveTo(40, 203);
            _context.strokeStyle = 'rgba(255,255,255,1)';
            _context.fillStyle = 'rgba(255,255,255,1)';
            self._roundedRect(_context, (nWidth - 107) * 2, (0.872 * nHeight) * 2, 75 * 2, 75 * 2, 0 * 2);
            _context.fill();
            _context.closePath();
 
var code = new Image();
code.crossOrigin = "anonymous";
            code.src = document.getElementById("myQrcontainer").children[2].children[1].src;
            code.onload = function () {
              _context.save(); // 保存当前_context的状态
              _context.drawImage(code, (nWidth - 105) * 2, (0.8768 * nHeight) * 2, 70 * 2, 70 * 2);
              _context.stroke();//
              _context.closePath();
              //canvas 画完图 一定要生成图片流，作为img 的src属性值，同时隐藏canvas，只展示img 就ok了，在手机上试试长按保存功能吧
              var _imgSrc = _canvas.toDataURL("image/jpeg", 1);
              //_canvas.style.display = "none";
              var imgShow = document.getElementById('imgShow');
              imgShow.setAttribute('src', _imgSrc);
            }
          }
        }
 
 
      },
      // 获取代理人信息以及二维码url
      getCodeInfo(linkId) {
        let self = this;
        let url = '';
        if (!!this.productId) {
          let id = this.productId;
          if (id == 23 || id == 24 || id == 25) {
            id = 25;
          }
          if (id == 21 || id == 22) {
            id = 21;
          }
          if (id == 3) {
            id = 4;
          }
          url = self.$axios.defaults.baseURL + `/static/index.html?path${id}=list&id=${self.productId}&linkId=` + linkId;
        }
        else {
          url = self.$axios.defaults.baseURL + "/static/index.html?path2=list&linkId=" + linkId;
        }
        self.url = url;
        self.$fetch.getAgentInfo('', linkId, 0, 1).then(res => {
          if (res.errCode == 0) {
            self.agentPhone = res.data.agentInfo.phone;
            self.agentRealName = res.data.agentInfo.realName;
            self.headImg = res.data.agentInfo.headImageUrl;
            self.mechanism = res.data.agentInfo.agentOrganName.slice(4);
 
            let host = process.env.NODE_ENV;
            let baseUrl = '';
            if (host == 'dev' || host == 'test' || host == 'pre') {
              baseUrl = 'https://inintest.life.cntaiping.com/';
            }
            else if (host == 'production') {
              baseUrl = 'https://ininprod.life.cntaiping.com/';
            }
            else {
              baseUrl = 'https://ininprod.life.cntaiping.com/';
            }
            let reg = /^http(s)?:\/\/(.*?)\//;
            let url = res.data.agentInfo.headImageUrl;
            if (url.includes('thirdwx.qlogo')) {
              baseUrl += 'thirdwx/';
            }
            else {
              baseUrl += 'wxqlogo/';
            }
            self.headImg = res.data.agentInfo.headImageUrl.replace(reg, baseUrl);
 
            self.$nextTick(() => {
              self.drawQrcode();
            })
          } else {
            self.$vux.toast.show({text: res.errMsg, type: 'text'});
          }
        }).catch(res => {
        });
      }
    },
    components: {
      Qrcode
    }
  }
</script>