寫(xiě)電子簽名一定要注意的是一切全部按照手機(jī)上的適配來(lái)，為啥這么說(shuō)呢，因?yàn)槟阍谖⑿砰_(kāi)發(fā)者工具中調(diào)試的時(shí)候認(rèn)為是好的，正常的非常nice,當(dāng)你發(fā)布版本的時(shí)候你會(huì)發(fā)現(xiàn)問(wèn)題出來(lái)了。我下邊的寫(xiě)法你可以直接用很簡(jiǎn)單。就是要記住canvas的幾個(gè)屬性和用法。

直接上干貨

1.簽名樣式頁(yè)面

      <!-- 簽名 -->
      <view class="wrapper n-sign">
        <view class="h3">人員簽字</view>
        <view class="handCenter">
          <canvas class="handWriting" :disable-scroll="true" @touchstart="uploadScaleStart" @touchmove="uploadScaleMove"
            canvas-id="handWriting"></canvas>
        </view>
        <view class="footer">
          <view :class="{ button: 1, 'n-sign-disabled': (startX == null && startY == null) }" @tap="retDraw">清除</view>
          <view :class="{ button: 1, 'n-sign-disabled': (startX == null && startY == null) }" @tap="saveCanvasAsImg">提交
          </view>
        </view>
      </view>

2.記得定義

  data() {
    return {
      canvasName: 'handWriting',
      ctx: '',
      startX: null,
      startY: null,
      canvasWidth: 0,
      canvasHeight: 0,
      selectColor: 'black',
      lineColor: '#1A1A1A', // 顏色
      lineSize: 5, // 筆記倍數(shù)
      name: '', //用來(lái)區(qū)分多個(gè)簽字
     
    };
  },

3.事件

  methods: {
// 筆跡開(kāi)始
    uploadScaleStart(e) {
      this.startX = e.changedTouches[0].x
      this.startY = e.changedTouches[0].y
      //設(shè)置畫(huà)筆參數(shù)
      //畫(huà)筆顏色
      this.ctx.setStrokeStyle(this.lineColor)
      //設(shè)置線條粗細(xì)
      this.ctx.setLineWidth(this.lineSize)
      //設(shè)置線條的結(jié)束端點(diǎn)樣式
      this.ctx.setLineCap("round") //'butt'、'round'、'square'
      //開(kāi)始畫(huà)筆
      this.ctx.beginPath()
    },
    // 筆跡移動(dòng)
    uploadScaleMove(e) {
      //取點(diǎn)
      let temX = e.changedTouches[0].x
      let temY = e.changedTouches[0].y
      //畫(huà)線條
      this.ctx.moveTo(this.startX, this.startY)
      this.ctx.lineTo(temX, temY)
      this.ctx.stroke()
      this.startX = temX
      this.startY = temY
      this.ctx.draw(true)
    },
    /**
     * 重寫(xiě)
     */
    retDraw() {
      if (this.startX == null && this.startY == null) {
        return;
      }
      this.ctx.clearRect(0, 0, 700, 730);
      this.ctx.draw();
      //設(shè)置canvas背景
      this.setCanvasBg('#fff');
      this.startX = null;
      this.startY = null;
    },


    //生成圖片
    async saveCanvasAsImg() {
      if (this.startX == null && this.startY == null) {
        return;
      }
      uni.showLoading({
        mask: true
      })
      var res = await uni.canvasToTempFilePath({
        canvasId: 'handWriting',
        fileType: 'png',
        quality: 1, //圖片質(zhì)量

      });
      for (var i = 0; i < res.length; i++) {
        if (res[i] && res[i].tempFilePath) {
          res = await this.nupload(res[i].tempFilePath, 14);
          break;
        }
      }
      // res = await this.nupload(path, 13);
      uni.hideLoading();
      uni.showToast({ title: "已上傳" })
    },

    //設(shè)置canvas背景色  不設(shè)置  導(dǎo)出的canvas的背景為透明
    //@params：字符串  color
    setCanvasBg(color) {

      /* 將canvas背景設(shè)置為 白底，不設(shè)置  導(dǎo)出的canvas的背景為透明 */
      //rect() 參數(shù)說(shuō)明  矩形路徑左上角的橫坐標(biāo)，左上角的縱坐標(biāo), 矩形路徑的寬度, 矩形路徑的高度
      //這里是 canvasHeight - 4 是因?yàn)橄逻吷w住邊框了，所以手動(dòng)減了寫(xiě)
      this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight - 4);
      // ctx.setFillStyle('red')
      this.ctx.setFillStyle(color);
      this.ctx.fill(); //設(shè)置填充
      this.ctx.draw(); //開(kāi)畫(huà)
    },
    // 上傳圖片并返回上傳結(jié)果
    async nupload(filePath, imgType) {
      if (!filePath) return; //如果 filePath 不存在，直接返回

      // 調(diào)用 postWaitWorkImage 方法發(fā)送 POST 請(qǐng)求上傳圖片，并傳遞了文件路徑、參數(shù)等信息。
      // 若上傳成功，將返回結(jié)果解析為 JSON 格式（如果不是JSON格式，則直接使用原始結(jié)果）。



      const res = await postWaitWorkImage({
        filePath,
        name: "file",
        params: { imgType, id: this.merInfo.id, },
      }).catch((e) => (console.log(e), false));
      let res_;
      try {
        res_ = JSON.parse(res);
      } catch {
        res_ = res;
      }

      if (res_.code === 200) {
        return res_;
      } else {
        uni.showToast({ title: "上傳失敗", icon: "error" });
        return false;
      }
    },
  },

4.頁(yè)面觸發(fā)

  onReady() {
    this.$nextTick(() => {
      this.name = 'handWriting1'
      this.ctx = uni.createCanvasContext("handWriting");
      this.$nextTick(() => {
        uni.createSelectorQuery().select('.handCenter').boundingClientRect(rect => {
          this.canvasWidth = rect.width;
          this.canvasHeight = rect.height;
          /* 將canvas背景設(shè)置為 白底，不設(shè)置  導(dǎo)出的canvas的背景為透明 */
          this.setCanvasBg('#fff');
        })
          .exec();
      });
    })
  },

5.樣式

.handWriting {
  background: #fff;
  width: 640rpx;
  height: 783rpx;
  border-radius: 20rpx;
  border: 1px solid #ff791c;
  overflow: hidden;
}

.handCenter {
  margin-bottom: 36rpx;

}

6.需要注意的是

實(shí)現(xiàn)簽名我們用的是畫(huà)布，不可能知道100%完美。所以這里我已經(jīng)很合適的在設(shè)計(jì)了有啥問(wèn)題可以留言。我把我的效果圖看下看下希望對(duì)大家有幫助

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-802053.html

到了這里，關(guān)于uniapp寫(xiě)微信小程序?qū)崿F(xiàn)電子簽名的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！