nanhuashi_applet/pages/prayers/webview.vue

<template>
  <div>
    <web-view src="https://blog.csdn.net/m0_56104994/article/details/131311656"></web-view>
  </div>
</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() {

      },
      async mounted() {
      },
      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>