项目实训七，拍照签名并提取

微信通过拍照，提取签名信息，通过上景减下景得到纯白底色

js

const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    TabList: [
      {name: '1. 拍照'},
      {name: '2. 预览上传'}
    ],
    TabCur: 0,
    Snap: false,
    Preview: false,
    img: '',
    sourceKey: '',
    calImg: '',
    weight:50,
    imgList: [],
  },
  onLoad: function () {
    
  },
  upImg:function () {
      var that = this;
      if (that.data.imgList.length != 0) {
        that.setData({
          imgList: that.data.imgList.concat(that.data.calImg)
        })
      } else {
        that.setData({
          imgList: that.data.calImg
        })
      }
    
    let base64 = wx.getFileSystemManager().readFileSync(that.data.imgList, "base64");
    let img = `data:base64,${base64}`;
    console.log(base64);
    wx.request({
      url: app.globalData.globalReqUrl +'/api/sign/base64',
      data:{
        photo:base64,
      },
      method:'POST',
      header:{
        'content-type':'application/x-www-form-urlencoded',
        'token':app.globalData.token
      },
      success:function(res){
        console.log(res);
        let error = null;
        if(res.data.status!="200"){

          error = "系统错误 请稍后尝试"
         
      }
      if(res.data.status=="200"){

      
       
    }
        if(error !== null){
          wx.showToast({
            title: error,
            icon:'none',
            duration:2000
          })
         
        }else{
          
            wx.showToast({
            title:'上传成功',
            icon:'success',
            duration:1000,
            success:function(){
              setTimeout(function(){
                wx.navigateBack({
                  delta: 2,
                })
            },1000);
            }
          })    
       
        }
        
      },
      fail:function(res){
        console.log(res);
      
      }
    })
  
    
    
  }
  ,
  NumSteps() {
    this.setData({
      TabCur: this.data.TabCur == this.data.TabList.length - 1 ? 0 : this.data.TabCur + 1
    })
  },
  Navigate(e) {
    var target = e.currentTarget.dataset.index;
    if (target < this.data.TabCur){
      this.setData({
        TabCur: target
      })
    }
  },
  OpenCamera() {
    this.setData({
      Snap: true
    })
  },

  Cancel() {
    this.setData({ 
      Preview: false 
    })
  },
  SaveImg() {
    this.setData({
      Snap: false,
      Preview: false
    })
    this.RemoveBackground();
    this.NumSteps();
  },
  TakePhoto() {
    const ctx = wx.createCameraContext()
    const listener = ctx.onCameraFrame((frame) => {
      console.log(frame)
    })
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        console.log(res)
        this.setData({
          img: res.tempImagePath,
          Preview: true
        })
        listener.stop({
          success: (res) => {
            console.log(res)
          },
          fail: (err) => {
            console.log(err)
          }
        })
      },
      fail: (err) => {
        console.log(err)
      }
    })
  },

  TextChange(e) {
    this.setData({
      sourceKey: e.detail.value
    })
  },
  WeightChange(e) {
    this.setData({
      calImg: '',
      weight: e.detail.value
    })
    this.RemoveBackground();
  },
  WeightChanging(e) {

  },
  

  RemoveBackground(){
    const ctx = wx.createCanvasContext("myCanvas");
    var that = this;
    wx.getImageInfo({ 
      src: this.data.img, 
      success: function (res) { 
        console.log(res)
        ctx.drawImage(that.data.img, 0, 0, res.width, (res.width / 1080) * 960, 0, 0, 1080, 960);
        ctx.draw(false, () => {
          wx.canvasGetImageData({
            canvasId: "myCanvas",
            x: 240,
            y: 221,
            width: 600,
            height: 600,
            success: (res) => {
              console.log(res)
              var length = 600 * 300 * 4;
              var calData = new Uint8ClampedArray(length)
              var weight = that.data.weight / 50
              for(var i = 0; i < length; i++){
                calData[i] = (i % 4 === 3 ? 255 : (255 - (res.data[i + length] - res.data[i])) * 2 - (188 * weight));
              }
              wx.canvasPutImageData({
                canvasId: "myCanvas2",
                data: calData,
                x: 0,
                y: 0,
                width: 600,
                height: 300,
                success: (res) => {
                  console.log(res)
                  wx.canvasToTempFilePath({
                    width: 600,
                    height: 300,
                    canvasId: "myCanvas2",
                    success: function(res) {
                      console.log(res)
                      that.setData({
                        calImg: res.tempFilePath,
                      })
                    }
                  });
                },
                fail: res => {
                  console.log(res)
                },
              })
            },
            fail: res => {
              console.log(res)
            },
          })
        })
      } 
    })  
  }
})

wxml

<view class="bg-white padding">
  <view class="cu-steps">
    <view class="cu-item {{index > TabCur?'':'text-red'}}" bindtap="Navigate" data-index="{{index}}" wx:for="{{TabList}}" wx:key="index">
      <text class="cuIcon-{{index > TabCur ? 'title' : 'roundcheckfill'}}" data-index="{{index + 1}}"></text> {{item.name}}
    </view>
  </view>
</view>

<block wx:if="{{TabCur==0}}">
  <block wx:if="{{!Snap}}">
    <view class="bg-white margin-top padding">
      <view class="margin-bottom">
        <text>Step 1. 拍照</text>
      </view>
      <view class="image flex justify-center">
        <image src="/images/upload_signature/lead2-1.png" mode="widthFix" style="width:70%"></image>
      </view>
      <view class="margin-top">
        <text>将签名居中置于上半绿色方框中，文字底线需要和红色基准线对齐；</text>
      </view>
      <view class="margin-top">
        <text>为保证最佳的识别效果，</text>
        <text style="font-weight: bold">绿色方框内不能含有阴影；下半绿色方框是对照区，光线需和上半保持一致。</text>
      </view>
    </view>
    <view class="padding flex flex-direction">
      <button bindtap="OpenCamera" class="lg" style="width:100%">开始拍照</button>
    </view>
  </block>
  <block wx:if="{{Snap}}">
    <view class="camera_box">
      <camera class="camera" wx:if="{{!Preview}}" device-position="back" flash="off" binderror="error">
        <cover-view>
          <cover-image src="/images/upload_signature/cover.png"></cover-image>
        </cover-view>
      </camera>
      <image class="camera_preview" src="/images/upload_signature/cover.png" wx:if="{{Preview}}" mode="widthFix"></image>
      <image class="camera_img" src="{{img}}" wx:if="{{Preview}}" mode="widthFix"></image>
      <view class="action">
        <view class="photo_btn" bindtap="TakePhoto" wx:if="{{!Preview}}">
          <image src="/images/camera/snap.png" class="photo_btn"></image>
        </view>
        <view class="photo_btn" bindtap="Cancel" wx:if="{{Preview}}">
          <image src="/images/camera/cancel.png" class="photo_btn"></image>
        </view>
        <view class="photo_btn" bindtap="SaveImg" wx:if="{{Preview}}">
          <image src="/images/camera/confirm.png" class="photo_btn"></image>
        </view>
      </view>
    </view>
  </block>
</block>

<block wx:if="{{TabCur==1}}">
  <form>
    <view class="bg-white margin-top padding">
      <text>Step 2. 预览上传</text>
    </view>

    <view class="bg-white padding">
      <view class="flex justify-center">
        <text>拖动滑条，直到清晰为止</text>
      </view>
      <view class="flex justify-center">
        <slider style="width:100%" value="{{weight}}" bindchange="WeightChange" bindchanging="WeightChanging" min="0" max="100" activeColor='#0081FF' backgroundColor='#CCCCCC' block-size='12' block-color='#A10606' step="1"/>
      </view>
      <view class="image flex margin-bottom justify-center">
        <image src="{{calImg}}" mode="widthFix" wx:if="{{calImg}}" style="width:70%; max-height: 300px"></image>
        <view class="padding margin" wx:if="{{!calImg}}">
          <text>正在生成签名，请稍等...</text>
        </view>
      </view>
      <view class="flex justify-center">
        <text>您拍摄的签名</text>
      </view>
    </view>
    <view class="padding flex flex-direction">
      <button class="cu-btn bg-green lg" bindtap="upImg" style="width:100%">提交</button>
    </view>
  </form>
</block>

<view style='width:0px; height:0px; overflow:hidden; transform:scale(0,0)'>
  <canvas class="canvas" canvas-id="myCanvas"></canvas>
  <canvas class="canvas2" canvas-id="myCanvas2"></canvas>
</view>