微信小程序 输入文字用canvas生成公章并转为图片

<input type="text" placeholder="请输入公司名称" bindinput="bindInputCompany" value="{{company}}" />
<canvas type="2d" id="circleBar" style="width: 400rpx;height:400rpx;margin: 30rpx auto;"></canvas>
<button type="primary" bindtap="comCreateSeal">生成公章</button>

Page({
  data: {
    company: "",
    //name: "专用章"
  },
  onShow() {},
  // 请输入公司名
  bindInputCompany(e) {
    this.setData({
      company: e.detail.value.trim()
    })
  },
  // 生成公章
  comCreateSeal() {
    if (!this.data.company) {
      wx.showToast({
        title: '请输入公司名称',
        icon: 'none',
      })
      return
    }
    var context1 = wx.createCanvasContext('circleBar');
    console.log(context1);
    const opts = {
      company: this.data.company, // 机构名称
      companyTight: false, // 公司名称是否紧凑(//false 散开型   true紧凑)
      //name: this.data.name
    }
    this.createSelectorQuery()
      .select('#circleBar')
      .fields({
        node: true,
        size: true,
      }).exec((res) => {
        console.log(res)
        const canvas = res[0].node;
        const context = canvas.getContext('2d');
        context.fillStyle = 'rgba(255, 255, 255, 0)';
        // 绘制印章边框
        canvas.width = res[0].width
        canvas.height = res[0].height
        const width = canvas.width / 2;
        const height = canvas.height / 2;
        context.lineWidth = 3;
        context.strokeStyle = "#f00";
        context.beginPath();
        context.arc(width, height, 78, 0, Math.PI * 2);
        context.stroke();
        context.save();
        //画五角星
        context.save();
        context.fillStyle = "#f00";
        context.translate(width, height); //移动坐标原点
        context.rotate(Math.PI + 0); //旋转
        context.beginPath(); //创建路径
        var x = Math.sin(0);
        var y = Math.cos(0);
        var dig = Math.PI / 5 * 4;
        for (var i = 0; i < 5; i++) { //画五角星的五条边
          var x = Math.sin(i * dig);
          var y = Math.cos(i * dig);
          context.lineTo(x * 25, y * 25);
        }
        context.closePath();
        context.stroke();
        context.fill();
        context.restore();

        // 绘制印章名称
        context.font = '18px Helvetica';
        context.textBaseline = 'middle'; //设置文本的垂直对齐方式
        context.textAlign = 'center'; //设置文本的水平对对齐方式
        context.lineWidth = 1;
        context.fillStyle = '#f00';
        // context.fillText(opts.name,width,height+53);

        // 绘制印章单位
        context.translate(width, height); // 平移到此位置,
        var count = opts.company.length; // 字数
        if (count > 14) {
          var maxCount = 18;
          context.font = '16px Helvetica'
          if (opts.companyTight) {
            var angle = 4 * Math.PI / 51; // 字间角度
          } else {
            var angle = 4 * Math.PI / (3 * (count - 1)); // 字间角度
          }
        } else {
          var maxCount = 14;
          context.font = '20px Helvetica'
          if (opts.companyTight) {
            var angle = 4 * Math.PI / 39; // 字间角度
          } else {
            var angle = 4 * Math.PI / (3 * (count - 1)); // 字间角度
          }
        }
        var chars = opts.company.split("");
        var c;
        for (var i = 0; i < count; i++) {
          c = chars[i]; // 需要绘制的字符
          if (i == 0) {
            if (opts.companyTight) {
              context.rotate(5 * Math.PI / 6 + angle * ((maxCount - count) / 2));
            } else {
              context.rotate(5 * Math.PI / 6);
            }
          } else {
            context.rotate(angle);
          }
          context.save();
          context.translate(64, 0); // 平移到此位置,此时字和x轴垂直
          context.rotate(Math.PI / 2); // 旋转90度,让字平行于x轴
          context.fillText(c, 0, 5); // 此点为字的中心点
          context.restore();
        }
        wx.canvasToTempFilePath({
          canvasId: 'circleBar',
          canvas: canvas,
          x: 0,
          y: 0,
          width: 260,
          height: 260,
          destWidth: 260,
          destHeight: 260,
          success(res) {
            console.log('图片临时路径：', res.tempFilePath)
          },
          fail(res) {
            console.error(res)
          }
        })
      })
  },
});