微信小程序 使用canva签字并生成图片底色为黑色的解决方法

1.初始化的时候加底色

  //创建绘图对象
    this.ctx = uni.createCanvasContext("mycanvas", this);
    //设置画笔样式
    // this.ctx.lineWidth = 4;
    // this.ctx.lineCap = "round";
    // this.ctx.lineJoin = "round";
    // this.ctx.setFillStyle("#ffffff");
    this.ctx.beginPath();//主要是这
    this.ctx.fillStyle = "white";//主要是这
    this.ctx.fillRect(0, 0, 300, 300);//主要是这
    this.ctx.setStrokeStyle("black");
    //设置线的宽度
    this.ctx.setLineWidth(3);
    //设置线两端端点样式更加圆润
    this.ctx.setLineCap("round");
    //设置两条线连接处更加圆润
    this.ctx.setLineJoin("round");

2.多个的时候，打开弹窗的时候再重新定义底色

 signatureOpen(e: any, item: any, index: number) {
    this.ctx.beginPath();
    this.ctx.fillStyle = "white";
    this.ctx.fillRect(0, 0, 300, 300);
    this.signatureIndex = index;
    this.showAutograph = true;
  }

3.签字

<view class="cu-modal" :class="showAutograph ? 'show' : ''">
      <view class="cu-dialog">
        <view class="flex justify-end padding-xs">
          <button class="cu-btn round line-grey" @click="hideModal">
            取消
          </button>
        </view>
        <canvas
          class="mycanvas"
          canvas-id="mycanvas"
          @touchstart="touchstart"
          @touchmove="touchmove"
          @touchend="touchend"
          disable-scroll="true"
        ></canvas>
        <canvas
          canvas-id="my-canvas"
          style="width: 300px; height: 300px; position: absolute; top: -200%"
        >
        </canvas>
        <view class="flex justify-around padding-xs">
          <button class="cu-btn round bg-gray" @click="cancel">清除</button>
          <button class="cu-btn round bg-olive" @click="confirm">确定</button>
        </view>
      </view>
    </view>

  ctx: any = ""; //绘图图像
  points: any = []; //路径点集合
  signature = "";
    //创建绘图对象
    onLoad(){
    this.ctx = uni.createCanvasContext("mycanvas", this);
    //设置画笔样式
    // this.ctx.lineWidth = 4;
    // this.ctx.lineCap = "round";
    // this.ctx.lineJoin = "round";
    // this.ctx.setFillStyle("#ffffff");
    this.ctx.beginPath();
    this.ctx.fillStyle = "white";
    this.ctx.fillRect(0, 0, 300, 300);
    this.ctx.setStrokeStyle("black");
    //设置线的宽度
    this.ctx.setLineWidth(3);
    //设置线两端端点样式更加圆润
    this.ctx.setLineCap("round");
    //设置两条线连接处更加圆润
    this.ctx.setLineJoin("round");
    }
    //触摸开始，获取到起点
  touchstart(e: any) {
    let startX = e.changedTouches[0].x;
    let startY = e.changedTouches[0].y;
    let startPoint = {
      X: startX,
      Y: startY,
    };
    this.points.push(startPoint);
    //每次触摸开始，开启新的路径
    this.ctx.beginPath();
  }

  //触摸移动，获取到路径点
  touchmove(e: any) {
    let moveX = e.changedTouches[0].x;
    let moveY = e.changedTouches[0].y;
    let movePoint = {
      X: moveX,
      Y: moveY,
    };
    this.points.push(movePoint); //存点
    let len = this.points.length;
    if (len >= 2) {
      this.draw(); //绘制路径
    }
  }
  // 触摸结束，将未绘制的点清空防止对后续路径产生干扰
  touchend() {
    this.points = [];
  }
  /* ***********************************************
					#   绘制笔迹
					#	1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
					#	2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
					#	3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
					************************************************ */
  draw() {
    let point1 = this.points[0];
    let point2 = this.points[1];
    this.points.shift();
    this.ctx.moveTo(point1.X, point1.Y);
    this.ctx.lineTo(point2.X, point2.Y);
    this.ctx.stroke();
    this.ctx.draw(true);
  }
  //清空画布
  clear() {
    let that = this;
    uni.getSystemInfo({
      success: function (res) {
        let canvasw = res.windowWidth;
        let canvash = res.windowHeight;
        that.ctx.clearRect(0, 0, canvasw, canvash);
        that.ctx.draw(true);
      },
    });
  }
  //完成绘画并保存到本地
  confirm() {
    let that = this;
    uni.canvasToTempFilePath({
      canvasId: "mycanvas",
      success: function (res) {
        uni.getImageInfo({
          // 得到图片信息
          // 获取图片的信息
          src: res.tempFilePath,
          success: (res: any) => {
            // 创建canvas对象
            let canvasContext = wx.createCanvasContext("my-canvas", that);

            // 下面按比例写死宽度高度是为了压缩图片提升上传速度，可按实际需求更改
            let rate = res.height / res.width;
            let width = 320;
            let height = 500 * rate;
            //顺时针旋转90度
            canvasContext.translate(width / 2, height / 2); // 设置旋转中心点
            canvasContext.rotate((270 * Math.PI) / 1); // 设置旋转度数
            canvasContext.drawImage(
              // 调用canvas绘制图片
              res.path,
              -width / 2,
              -height / 2,
              width,
              height
            );
            // _this.upload(res.path, type);
            that.uploadSignature(res.path);
          },
        });
        // that.uploadSignature(res.tempFilePath);
      },
    });
  }
   // 上传签字图片
  uploadSignature(filePath: string | undefined) {
    uni.showLoading({
      title: "上传中...",
      mask: true,
    });
    uni.uploadFile({
      url: this.uploadUrl, //仅为示例，非真实的接口地址
      filePath: filePath,
      name: "file",
      header: {
        Authorization:
      },
      success: (uploadFileRes) => {
        
        
          this.showAutograph = false;
          this.clear();
          uni.hideLoading();
        }
      },
    });
  }
  

.mycanvas {
  width: 600rpx;
  height: 620rpx;
  margin: 0 auto;
  border: 2px dashed black;
  background-color: #fff;
}```