nanhuashi_applet/pages/prayers/save.vue

<template>
  <view class="canvas-box">
      <!-- 导航栏 -->
      <view class="nav-box">
          <view class="title-top" :style="'padding-top:' + statusBarHeight + 'rpx'">
              <u-icon class="title-icon" name="arrow-left" color="#ffffff" size="36" @click="getBack"></u-icon>
              <text>海报分享</text>
          </view>
      </view>
      
      <!-- 开发完成之前，取消 fixed;opacity: 0;-->
      <canvas style="width: 352px;height: 800px;position: fixed;" class="canvas" canvas-id="canvasID"></canvas>
      <!-- 完成海报制作后，需要把canvas移到看不见的地方，或者隐藏，把image显示出来 -->
      <!-- <image :src="imgUrl" mode=""></image> -->

      <view class="footer">
          <view class="download" @click="saveImage">
              <!-- 小于符号图标 -->
              <u-icon name="download" color="#ffffff" size="34"></u-icon>
              <text>保存到相册</text>
          </view>
      </view>
  </view>
</template>

<script>
import wxcode from 'uniapp-qrcode';
  export default {
      data() {
          return {
              imgUrl: '',
              statusBarHeight: 0,
              bgimg: '',
              textX: 10, //文字x轴坐标
              avatar: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower_colorful@2x.png', //头像地址
              hello: 'https://4dscene.4dage.com/new4dkk/deng/static/img/img_label@2x.png', // hello图标
              mony: 'https://4dscene.4dage.com/new4dkk/deng/static/img/flower_pink@2x.png' //圆的钱图标
          }
      },
      async created() {
        wxcode.qrcode('qrcode', '1234567890123456789', 420, 420);
          // this.$tool.getSystemInfo().then(res => {
          //     this.statusBarHeight = res
          // })
      },
      async mounted() {
          let list = ["知识的殿堂中闪耀属于你的光芒。阿斯顿撒大大大大大大啊啊啊啊", "愿你学业精进，成绩辉煌，"]
          let imgData = await uni.getImageInfo({src: this.hello})
          this.bgimg = imgData[1].path
          let ctx = uni.createCanvasContext('canvasID', this);
          // ctx.setFillStyle("transparent"); //设置canvas背景颜色
          // ctx.fillRect(0, 0, 346, 500) //设置canvas画布大小
          this.fillRoundRect(ctx, 0, 0, 352, 1400, 15, 'transparent'); //绘制一个圆角矩形
          // this.fillRoundRect(ctx, 0, 0, 346, 182, 15, '#333231'); //绘制一个圆角矩形
          console.log('imgUrlbgimg', this.bgimg)
          this.drawrectcular(ctx, this.bgimg, 86, 0, 180, 700) //绘制圆形头像
          this.listdrawText(ctx, list)
          // this.drawTextVertical(ctx, '绘制武将姓名：陆逊', x, y);
          // // 绘制势力汉字：吴
          // that.drawInfluence(ctx, that.data.hero.HERO.INFLUENCE);
          // // 绘制武将姓名：陆逊
          // that.drawName(ctx, that.data.hero.HERO.NAME);
          // // 绘制武将称号：江陵侯
          // that.drawHorner(ctx, that.data.hero.HERO.HORNER);

          // ctx.setFontSize(18)
          // ctx.setFillStyle("#ffffff")
          // ctx.fillText('明天依然是晴天11', 98, 65)
          // ctx.drawImage(this.hello, 240, 10, 86, 86) //二维码
          // ctx.font = '20px normal'
          // ctx.setFillStyle("#09CFB1")
          // ctx.fillText('我为“贤马”带盐', 30, 122)
          // ctx.font = '16px normal'
          // ctx.setFillStyle("#ffffff")
          // ctx.fillText('“闲么？上贤马做兼职”', 20, 152)

          // // 绘制职位标题，多余文字自动换行
          // ctx.setFontSize(28)
          // ctx.setFillStyle("#333333")

          // let str = '店铺实习生ZAra重庆龙湖时代'
          // // 字符串总长度
          // let _strLength = str.length
          // // 总结截取次数
          // let _strNum = Math.ceil(_strLength / 9)

          // // 每次开始截取字符串的索引
          // let _strHeight = 0
          // // 绘制的字体 x,y的初始位置
          // let _strX = 27,
          //     _strY = 223
          // let strIndex = 223
          // // 开始截取
          // for (let i = 0; i < _strNum; i++) {
          //     strIndex = _strY + i * 40
          //     ctx.fillText(str.substr(_strHeight + i * 9, 9), _strX, _strY + i * 40)
          // }
          // strIndex += 30
          // ctx.setFontSize(14)
          // ctx.setFillStyle("#1BB99A")
          // let strtitle = '环境好/结算快/时间短'
          // ctx.fillText(strtitle, _strX, strIndex)

          // ctx.setFontSize(20)
          // ctx.setFillStyle("#333231")
          // ctx.fillText('16元/小时', _strX, 418)

          // this.drawCircular(ctx, this.mony, _strX, 429, 14, 14) //绘制圆形头像
          // ctx.setFontSize(12)
          // ctx.setFillStyle("#F7BA65")
          // ctx.fillText('已预付', _strX + 20, 440)

          // 绘制微信二维码
          ctx.drawImage(this.hello, 208, 370, 120, 120) //二维码

          ctx.draw(false, () => {
              // 返回canvas图片信息
              uni.canvasToTempFilePath({
                  canvasId: 'canvasID',
                  success: (res) => {
                      this.imgUrl = res.tempFilePath
                      // console.log(res.tempFilePath)
                  },
                  fail: function(err) {
                      console.log(err)
                  }
              })
          })
      },
      methods: {
          getBack() {
              uni.navigateBack({
                  delta: 1
              });
          },
          listdrawText(ctx, list){
            let mylist = []
            list.map(ele => {
              if(ele && ele.length > 21){
                mylist.push(ele.substring(21, ele.length))
                mylist.push(ele.substring(0, 21))
              }else {
                mylist.push(ele)
              }
              // mylist.push(ele)
            })
            this.textX = 200 - (mylist.length/2)* 40;
            console.log('mylist', mylist, this.textX)
            mylist.map(ele => {
              this.drawTextVertical(ctx, ele, this.textX, 160);
              this.textX += 30;
            })
          },
          drawTextVertical(context, text, xx, y) {
            let x = xx || 0;
            var arrText = text.split('');
            var arrWidth = arrText.map(function (letter) {
              return 18;
            });
            
            var align = context.textAlign;
            var baseline = context.textBaseline;
            if (align == 'left') {
              x = x + Math.max.apply(null, arrWidth) / 2;
            } else if (align == 'right') {
              x = x - Math.max.apply(null, arrWidth) / 2;
            }
            if (baseline == 'bottom' || baseline == 'alphabetic' || baseline == 'ideographic') {
              y = y - arrWidth[0] / 2;
            } else if (baseline == 'top' || baseline == 'hanging') {
              y = y + arrWidth[0] / 2;
            }

            context.textAlign = 'center';
            context.textBaseline = 'middle';
            context.font = '18px normal'
            context.setFillStyle("#303030")
            // 开始逐字绘制
            arrText.forEach(function (letter, index) {
              // 确定下一个字符的纵坐标位置
              var letterWidth = arrWidth[index];
              // 是否需要旋转判断
              var code = letter.charCodeAt(0);
              console.log('arrWidth', arrWidth, align, index, letter)

              if (code <= 256) {
                context.translate(x, y);
                // 英文字符，旋转90°
                context.rotate(90 * Math.PI / 180);
                context.translate(-x, -y);
              } else if (index > 0 && text.charCodeAt(index - 1) < 256) {
                // y修正
                y = y + arrWidth[index - 1] / 2;
              }
              context.fillText(letter, x, y);
              // 旋转坐标系还原成初始态
              context.setTransform(1, 0, 0, 1, 0, 0);
              // 确定下一个字符的纵坐标位置
              var letterWidth = arrWidth[index];
              y = y + letterWidth;
            });
            // 水平垂直对齐方式还原
            context.textAlign = align;
            context.textBaseline = baseline;
          },
          saveImage() { //点击保存
              var _this = this;
              uni.saveImageToPhotosAlbum({
                  filePath: _this.imgUrl,
                  success() {
                      uni.showModal({
                          title: "保存成功",
                          content: "图片已成功保存到相册，快去分享到您的圈子吧",
                          showCancel: false
                      })
                  }
              })
          },
          // 将网络图片转为临时图片地址
          async getImageInfo({imgSrc}) {
              return new Promise((resolve, errs) => {
                  uni.downloadFile({
                      src: imgSrc,
                      success: function(image) {
                          resolve(image);
                      },
                      fail(err) {
                          errs(err);
                      }
                  });
              });
          },
          // 绘制圆形头像
          drawCircular(ctx, url, x, y, width, height) {
              //画圆形头像
              var avatarurl_width = width;
              var avatarurl_heigth = height;
              var avatarurl_x = x;
              var avatarurl_y = y;
              ctx.save(); //先保存状态，已便于画完园再用
              ctx.beginPath(); //开始绘制
              ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math
                  .PI * 2, false);
              ctx.setFillStyle("#FFFFFF")
              ctx.fill() //保证图片无bug填充
              ctx.clip(); //剪切
              ctx.drawImage(url, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); //推进去图片
              ctx.restore();
          },
          
          // 绘制矩形图片
          drawrectcular(ctx, url, x, y, width, height) {
              //画圆形头像
              var avatarurl_width = width;
              var avatarurl_heigth = height;
              var avatarurl_x = x;
              var avatarurl_y = y;
              ctx.save(); //先保存状态，已便于画完园再用
              ctx.beginPath(); //开始绘制
              ctx.rect(x, y, width, height);
              // ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math
              //     .PI * 2, false);
              ctx.setFillStyle("#FFFFFF")
              ctx.fill() //保证图片无bug填充
              ctx.clip(); //剪切
              ctx.drawImage(url, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); //推进去图片
              ctx.restore();
          },
          // 绘制带圆角的矩形方法
          fillRoundRect(cxt, x, y, width, height, radius,  fillColor) {
              //圆的直径必然要小于矩形的宽高
              if (2 * radius > width || 2 * radius > height) {
                  return false;
              }

              cxt.save();
              cxt.translate(x, y);
              //绘制圆角矩形的各个边
              this.drawRoundRectPath(cxt, width, height, radius);
              cxt.fillStyle = fillColor || '#fff'; //若是给定了值就用给定的值否则给予默认值
              cxt.fill();
              cxt.restore();
          },
          drawRoundRectPath(cxt, width, height, radius) {
              cxt.beginPath(0);
              //从右下角顺时针绘制，弧度从0到1/2PI
              cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);

              //矩形下边线
              cxt.lineTo(radius, height);

              //左下角圆弧，弧度从1/2PI到PI
              cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);

              //矩形左边线
              cxt.lineTo(0, radius);

              //左上角圆弧，弧度从PI到3/2PI
              cxt.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2);

              //上边线
              cxt.lineTo(width - radius, 0);

              //右上角圆弧
              cxt.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2);

              //右边线
              cxt.lineTo(width, height - radius);
              cxt.closePath();
          }
      }
  }
</script>

<style lang="scss" scoped>
  .canvas-box {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #1ABC9C;

      /deep/.nav-box {
          width: 100%;
          padding: 0 20rpx;
          position: absolute;
          z-index: 9999;
          top: 0;
          left: 0;

          .title-top {
              font-size: 36rpx;
              font-weight: 550;
              color: #FFFFFF;
              display: flex;
              justify-content: center;
              align-items: center;
              position: relative;
              margin-bottom: 30rpx;

              .title-icon {
                  position: absolute;
                  left: 0;
              }
          }
      }

      image {
          width: 335px;
          height: 500px;
      }

      .footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: absolute;
          justify-content: center;
          padding: 0 40rpx;
          width: 100%;
          left: 0;
          bottom: 10%;

          .download {
              border: 1rpx solid #ffffff;
              color: #ffffff;
              display: flex;
              align-items: center;
          }

          view {
              padding: 0 20rpx;
              height: 78rpx;
              text-align: center;
              line-height: 78rpx;
              font-size: 30rpx;
              border-radius: 36rpx;
          }
      }
  }
</style>