miniprogram-doctor/Pages/yishi/signcanvas/index.js

import { API } from './../../../utils/network/api'
import { FileUtil } from './../../../utils/fileutil'
const api = new API()
const app = getApp()
Page({
  data: {
    navbarData: {
      showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
      title: '多点执业认证', //导航栏 中间的标题
    },
    height: app.globalData.height,
    ctx: null,
    canvas: null,
    txt_show: true,
    template:{
      width: '676rpx',
      height: '414rpx',
      views: [
      {}
      ],
    },
  },

  onReady() {
    const query = wx.createSelectorQuery()
    query.select('#sign_panels')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        ctx.lineWidth = 5;
        // const dpr = wx.getSystemInfoSync().pixelRatio

        canvas.width = res[0].width
        canvas.height = res[0].height
        ctx.scale(1, 1)
        console.log(ctx);
        this.setData({ 
          ctx: ctx,
          canvas: canvas
        });

        console.log("onReady onReady start")
        console.log(ctx)
        console.log(canvas)
        console.log("onReady onReady end")
      })
  },
  ontouchmove(e){
    console.log("ontouchmove ontouchmove ontouchmove");
    console.log(e);
    this.data.ctx.lineWidth = 5;
    this.data.ctx.lineCap="round";
    this.data.ctx.lineJoin ="round";
    this.data.ctx.lineTo(e.touches[0].x,e.touches[0].y);
    this.data.ctx.stroke();
  },
  ontouchstart(e){
    console.log("ontouchstart ontouchstart ontouchstart")
    this.setData({
      txt_show: false
    });
    console.log(this.data.ctx);
    this.data.ctx.beginPath();
    this.data.ctx.moveTo(e.touches[0].x,e.touches[0].y);
  },
  toClear() {
    this.setData({
      txt_show: true
    });
    this.data.ctx.clearRect(0,0,this.data.canvas.width,this.data.canvas.height)
  },
  rotate(){
    let ctx = this.data.ctx;
    ctx.rotate(90);
  },
  toSave(event) {
    let _this = this;
    let base64Img = _this.data.canvas.toDataURL();
    console.log("sign: ", base64Img);
    wx.canvasToTempFilePath({
      canvasId: "sign_panels",
      canvas: _this.data.canvas,
      x:0,
      y:0,
      success(res) {
        console.log(res.tempFilePath)
        let filePath = res.tempFilePath;
        console.log(_this.data.canvas)
        console.log(_this.data.canvas.width)
        console.log(_this.data.canvas.height)
        let cs = (_this.data.canvas.height - _this.data.canvas.width)/2;
        _this.setData({
          "template.width": _this.data.canvas.height+"rpx",
          "template.height": _this.data.canvas.width+"rpx",
          "template.views[0].css.width": _this.data.canvas.width+"rpx",
          "template.views[0].css.left": cs+"rpx",
          "template.views[0].css.top": "-"+cs+"rpx",
          "template.views[0].url": filePath,
          "template.views[0].type": "image",
          "template.views[0].css.rotate": "-90",
        })
        // _this.doUploadFile(event, 2, filePath);
      }
    })
  },
  onImgOK(e){
    console.log("onImgOK onImgOK onImgOK onImgOK");
    console.log(e.detail.path);
    let txt_show = this.data.txt_show;
    if(!txt_show){
      this.doUploadFile(e, 2, e.detail.path);
    }
  },
  doUploadFile(event, scene, filePath) {
    console.log("index douploadFIle: ", event);
    console.log("scene: ", scene);
    let _this = this;
    api.getOssSign({user_type:2,scene:scene}).then(response => {
      console.log(response);
      console.log("filePath: ", filePath);
      const filename = FileUtil.UUID()+".png";
      const host = response.data.host;
      const signature = response.data.signature;
      const ossAccessKeyId = response.data.accessid;
      const policy = response.data.policy;
      const key = response.data.dir+filename;
      wx.uploadFile({
        url: host, // 开发者服务器的URL。
        filePath: filePath,
        name: 'file', // 必须填file。
        formData: {
          key,
          policy,
          OSSAccessKeyId: ossAccessKeyId,
          signature,
        },
        success: (res) => {
          console.log("upload: ", res);
          if (res.statusCode === 204) {
            wx.showToast({title: '上传成功'})
            let url = host+"/"+key;
            console.log(url);
            wx.setStorageSync("sign_image", url);
          }
          wx.navigateBack()
        },
        fail: err => {
          console.log(err);
          wx.showToast({
            title: '上传失败',
            icon: "error"
          })
        }
      });
    }).catch(errors => {
      console.error(errors);
    })
  }
})