小程序wepy--手写板

Posted 2020-11-25 一只卧沙的雕

跟上一篇一样，因为客户端用的是wepy，所以单独写的一套手写板

参考：https://blog.csdn.net/weixin_33912246/article/details/89621331

 

 直接代码：

<template>
  <view class="wrapper_handwriting">
    <view class="handBtn">
      <button catchtap="clearNow" class="delBtn">重写</button>
      <button catchtap="exportImage" class="subBtn">完成</button>
    </view>
    <view class="handCenter">
      <canvas class="sign" canvas-id="sign" disable-scroll=true bindtouchstart="start" bindtouchmove="move" bindtouchend="end" />
    </view>
    <view class="handRight">
      <view class="handTitle">手写签名</view>
    </view>
    <!-- <block>
      <image src="{{filePathList}}" />
    </block> -->

  </view>

</template>

<script>
  import wepy from ‘wepy‘
  import qiniuUploader from ‘../../utils/qiniuUploader‘
  var ctx = wx.createCanvasContext(‘sign‘)
  ctx.setStrokeStyle("#000");
  //设置线的宽度
  ctx.setLineWidth(3);
  //设置线两端端点样式更加圆润
  ctx.setLineCap(‘round‘);
  //设置两条线连接处更加圆润
  ctx.setLineJoin(‘round‘);
  export default class Fyxz extends wepy.page {
    data = {
      x: 0,
      y: 0,
      ctx: ctx,
      filePath: ‘‘,
      filePathList: ‘‘,
      qiniuUrl: ‘22‘,
      qiniuToken: ‘‘,
    }
    onLoad() {
      this.qiniuUrl = this.$parent.globalData.qiniuUrl
      this.getQiniuToken();
    }
    getQiniuToken() {
      const _this = this
      const param = {
        url: ‘/common/getQiniuToken‘,
        data: {
          path: ‘/wxclient‘
        }
      };

      this.$parent.showLoading();

      this.$parent.request(param).then(res => {
        wx.hideLoading();
        _this.qiniuToken = res.ResultData.data;
        this.$apply();
      }).catch(err => {
        wx.hideLoading();
        this.$parent.log(err);
      })
    }
    methods = {
      start: (e) => {
        this.x = e.touches[0].x
        this.y = e.touches[0].y
      },
      move: (e) => {
        this.ctx.moveTo(this.x, this.y)
        this.x = e.touches[0].x
        this.y = e.touches[0].y
        this.ctx.lineTo(this.x, this.y)
        this.ctx.stroke()
        this.ctx.draw(true)
      },
      end: (e) => {

      },

      exportImage: () => {
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: 300,
          height: 200,
          destWidth: 300,
          destHeight: 200,
          canvasId: ‘sign‘,
          success: (res) => {
            let p = new Promise((resolve, reject) => {
              let fp = res.tempFilePath
              resolve(fp)
            })
            p.then((fp) => {
              this.filePath = fp
              // 将缓存路径保存到列表
              // this.filePathList = fp
              this.methods.uploadImg(fp)
              // 手动更新数据
              this.$apply()
            }).then(() => {
              // this.methods.clearNow();
              console.log(‘提交成功!‘)
            })
          }
        })
      },
      // 清屏
      clearNow: () => {
        this.ctx.clearRect(0, 0, 100, 200)
        this.ctx.draw()
        this.filePathList = ‘‘
      },
      /**
       * 图片上传
       */
      uploadImg: (url) => {
        const _this = this;
        console.log(_this)
        const param = {
          region: ‘NCN‘,
          domain: _this.qiniuUrl,
          shouldUseQiniuFileName: false,
          uploadURL: _this.qiniuUrl,
          uptoken: _this.qiniuToken
        };
        console.log(param)
        qiniuUploader.upload(url, function (info) {
          wx.hideLoading();
          _this.filePathList = info.imageURL
          _this.$apply();
        }, function (error) {
          _this.$parent.log(error);
        }, param);
      },
    }
  }
</script>
<style lang="less">

  .wrapper_handwriting{
    width: 100%;
    height: 100%;
    margin: 30rpx 0;
    overflow: hidden;
    display: flex;
    align-content: center;
    flex-direction: row;
    justify-content: center;
    font-size: 28rpx;
  }
  .info {
    text-align: center;
  }
  .handRight {
    display: inline-flex;
    align-items: center;
  }

  .handCenter {
    border: 4rpx dashed #e9e9e9;
    flex: 5;
    overflow: hidden;
    box-sizing: border-box;
  }

  .handTitle {
    transform: rotate(90deg);
    flex: 1;
      margin-bottom: 10px;
    color: #666;
  }

  .handBtn button {
    font-size: 28rpx;
  }

  .handBtn {
    height: 95vh;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: space-between;
    flex: 1;
  }

  .delBtn,.subBtn {
    position: absolute;
    bottom: 300rpx;
    left: 0rpx;
    transform: rotate(90deg);
    color: #666;
  }
  .subBtn{
      bottom: 100rpx;
  }

  .delBtn image {
    position: absolute;
    top: 13rpx;
    left: 25rpx;
  }
  .sign {
      display: block;
    background: #fff;
    width: 100%;
    height: 100%;
  }
</style>

View Code

一样的，写完点击确定时，将签名传至七牛