签字

<template>
  <div>
    <!-- <div class="contract_box" v-show="!showPromise">
      <div class="contract_name">自我承诺</div>
      <div class="contract_con">
        为认真履行《食品安全法》赋予食品经营者第一责任人的责任，切实保证食品安全，本店向社会和广大消费者郑重承诺：<br/>
　　一、依法取得食品经营许可证、照，严格按照证照许可的经营范围亮证、照经营。<br/>
　　二、严格落实进货检查验收制度、索证索票制度、进销货台账制度、重点食品协议准入制度，所经营的食品来源一律做到有合法资质证明、有产品质量检验合格报告。对批发销售的食品有完整的台账记录，做到流向清楚、溯源可查。<br/>
　　三、经营中发现问题产品，做到不藏匿、不销售，及时清查上缴，并主动向当地工商部门报告。<br/>
　　四、坚持依法、诚信经营，不销售过期、变质等不合格的食品，对保质期处于临界期的食品，按规定下架退市处理。<br/>
　　五、接到食品安全预警，对问题食品迅速组织下架退市，按监管部门要求主动配合处理。<br/>
　　六、每年对食品从业人员组织参加培训，学习食品安全法律、法规、规章、标准和其他食品安全常识，强化守法诚信经营意识，提高食品安全管理能力和水平。<br/>
　　七、每年对食品从业人员进行健康检查，防止次生食品安全事故的发生。 以上承诺，如有违反，愿意接受处罚并承担相应的法律责任，请广大消费者予以监督。<br/>
我对销售的食用农产品作出如下承诺：<br/>
      1、不使用禁用农业兽药,停用兽药和非法添加物；<br/>
      2、常规农药兽药残留不超标；<br/>
      3、对承诺的真实性负责。<br/>
      </div>
      <div class="contract_end">
        <van-button type="warning" @click="goBack">返回</van-button>
        <van-button type="primary" @click="qianzi">签字</van-button>
      </div>
    </div> -->



    <div class="promise_view" v-show="!showPromise">
      <div class="promise_box" v-show="promShow" :style="{  height: cHeight + 'px' }" @touchmove.prevent>
        <div class="boardBox" ref="boardBox">
          <canvas
            ref="board"
            :width="cWidth"
            :height="cHeight"
            id="canvas"
            @touchstart="mStart"
            @touchmove="mMove"
            @touchend="mEnd"
          ></canvas>
        </div>
        <div class="bar_box" :style="{ width: '50px', height: cHeight + 'px' }">
          <div>
            <div class="item_zimu" @click="getcanvas">
              <div>完</div> <div>成</div>
            </div>
            <div class="item_zimu again_zimu" @click="clearcanvas">
              <div>重</div><div>签</div>
            </div>
          </div>
          <div class="item_zimu again_zimu" @click="goBack">
            <div>返</div><div>回</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { Toast } from "vant";

import { upLoadImg } from "@/request/UploadFile.js";
import { useRouter } from "vue-router";
export default {
  name: "CanvasSign",
  data() {
    return {
      promShow: true,
      familysignatureurl: "",
      basedata: "",
      ctx: null,
      point: {
        x: 0,
        y: 0,
      },
      moving: false, // 是否正在绘制中且移动
      cWidth: null,
      cHeight: null,
      noRotate: null,
      showPromise: false,
    };
  },

  mounted() {
    let board = this.$refs.board; // 获取DOM
    board.width = this.$refs.boardBox.offsetWidth; // 设置画布宽
    board.height = this.$refs.boardBox.offsetHeight; // 设置画布高
    this.ctx = board.getContext("2d"); // 二维绘图
    this.ctx.strokeStyle = "#000"; // 颜色
    this.cWidth = document.documentElement.clientWidth;
    this.cHeight = document.documentElement.clientHeight;
    window.addEventListener(
      "onorientationchange" in window ? "orientationchange" : "resize",
      this.hengshuping,
      false
    );
    this.hengshuping();
  },
  methods: {
     goBack(){
      this.$emit('fatherMethod',false,'');
    },
    productDataFun() {
      console.log("来自父级")
      this.showPromise =false;
      this.clearcanvas()
    },
    qianzi() {
      this.showPromise = true;
    },
    // 判断横屏竖屏
    hengshuping() {
      //横屏
      this.noRotate = true;
      this.cWidth = document.documentElement.clientWidth - 40;
      this.cHeight = document.documentElement.clientHeight;
      this.$forceUpdate();
    },
    // 触摸(开始)
    mStart(e) {
      let x = e.touches[0].clientX - e.target.offsetLeft,
        y = e.touches[0].clientY - e.target.offsetTop; // 获取触摸点在画板（canvas）的坐标
      this.point.x = x;
      this.point.y = y;
      this.ctx.beginPath();
      this.ctx.lineWidth = 7; // 线条宽度
      this.moving = true;
    },
    // 滑动中...
    mMove(e) {
      if (this.moving) {
        let x = e.touches[0].clientX - e.target.offsetLeft,
          y = e.touches[0].clientY - e.target.offsetTop; // 获取触摸点在画板（canvas）的坐标
        this.ctx.moveTo(this.point.x, this.point.y); // 把路径移动到画布中的指定点，不创建线条(起始点)
        this.ctx.lineTo(x, y); // 添加一个新点，然后创建从该点到画布中最后指定点的线条，不创建线条
        this.ctx.stroke(); // 绘制
        (this.point.x = x), (this.point.y = y); // 重置点坐标为上一个坐标
      }
    },
    // 滑动结束
    mEnd() {
      if (this.moving) {
        this.ctx.closePath(); // 停止绘制
        this.moving = false; // 关闭绘制开关
      }
    },

    // 判断为空
    isCanvasEmpty(canvas) {
      var blank = document.createElement("canvas"); //系统获取一个空canvas对象
      blank.width = canvas.width;
      blank.height = canvas.height;
      return canvas.toDataURL() == blank.toDataURL(); //比较值相等则为空
    },

    //获取绘画图片
    getcanvas() {
      //绘画转图片
      // let canvas =  document.getElementById("canvas").toDataURL("image/png");
      let canvas = document.getElementById("canvas");
      if (this.isCanvasEmpty(canvas)) {
        Toast.fail("请绘制签名后再上传！");
        return;
      }

      document.getElementById("canvas").toBlob(async (blobObj) => {
        var file1 = new File([blobObj], "pic.png", {
          type: blobObj.type,
          lastModified: Date.now(),
        });
        this.convertImg(file1);
      });
    },
    //旋转图片
    convertImg(file) {
      let _this = this;
      var canvas1 = document.createElement("canvas");
      var context1 = canvas1.getContext("2d");
      var oReader = new FileReader();
      oReader.readAsDataURL(file);
      oReader.onload = function (e) {
        var img = new Image();
        img.src = e.target.result;
        img.onload = function () {
          // 图片原始尺寸
          var originWidth = this.width;
          var originHeight = this.height;
          // 最大尺寸限制
          var maxWidth = 1080,
              maxHeight = 1080;
          // 目标尺寸
          var targetWidth = originWidth,
            targetHeight = originHeight;
          // 图片尺寸超过300x300的限制
          if (originWidth > maxWidth || originHeight > maxHeight) {
            if (originWidth / originHeight > maxWidth / maxHeight) {
              targetWidth = maxWidth;
              targetHeight = Math.round(
                maxWidth * (originHeight / originWidth)
              );
            } else {
              targetHeight = maxHeight;
              targetWidth = Math.round(
                maxHeight * (originWidth / originHeight)
              );
            }
          }
          var type = "image/png";
          // canvas对图片进行缩放
          canvas1.width = targetHeight;
          canvas1.height = targetWidth;
          //白色背景
          var imageData = context1.getImageData( 0,0,targetHeight,targetWidth);
          for (var i = 0; i < imageData.data.length; i += 4) {
              // 当该像素是透明的，则设置成白色
              if (imageData.data[i + 3] == 0) {
                  imageData.data[i] = 255;
                  imageData.data[i + 1] = 255;
                  imageData.data[i + 2] = 255;
                  imageData.data[i + 3] = 255;
              }
          }
          context1.putImageData(imageData, 0, 0);

          // 旋转90度
          // context1.translate(0, 0);
          context1.rotate(Math.PI / 2);
          // (0,-imgHeight) 从旋转原理图那里获得的起始点
          // context.clearRect(0,  -targetHeight, targetWidth, targetHeight);
          context1.drawImage(img, 0, -targetHeight, targetWidth, targetHeight);

          var dataurl = canvas1.toDataURL(type);
          _this.basedata = dataurl;
          //   console.log(dataurl);
          _this.updatavue();
        };
      };
    },
    //base64转Blob
    base64ToBlob(base64Data) {
      let arr = base64Data.split(","),
        fileType = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        l = bstr.length,
        u8Arr = new Uint8Array(l);

      while (l--) {
        u8Arr[l] = bstr.charCodeAt(l);
      }
      return new Blob([u8Arr], {
        type: fileType,
      });
    },
    //上传图片
    async updatavue() {
      //转成file文件
      let blobObj = this.base64ToBlob(this.basedata);
      var file = new File([blobObj], "pic.png", {
        type: blobObj.type,
        lastModified: Date.now(),
      });
      //此处为发送请求给后台获取图片路径
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
        forbidClick: false,
      });
      const formData = new FormData();
      formData.append("image", file);
      upLoadImg(formData)
        .then((res) => {
          Toast.success("签名成功");
          this.$emit('fatherMethod' ,true,res.data.imageUrl);
        })
        .catch((error) => {
          console.log(error);
        })
        .finally((end) => {
          Toast.clear();
        });
    },
    //清除画布
    clearcanvas() {
      var ctx = document.getElementById("canvas").getContext("2d");
      //  c.getContext("2d");
      ctx.setTransform(1, 0, 0, 1, 0, 0);
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
      // this.$myMsg.notify({
      //   content: "画板已清空，请重新签名",
      //   type: "success",
      // });
    },
  },
};
</script>
    


  <style scoped lang="less">
.contract_box {
  display: block;
  box-sizing: border-box;
  padding: 16px;

}
.contract_name {
  width: 100%;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  padding: 8px 0px;
}

.contract_con {
  line-height: 25px;
  text-indent: 15px;
  text-align: justify;
  font-size: 14px;
}
.contract_end {
  display: flex;
  justify-content: space-around;
}
.again_zimu {
  color: black !important;
  background: white !important;
}
.item_zimu {
  // -webkit-transform: rotate(-90deg);

  color: white;
  font-size: 14px;
  background: #20a0ff;

  width: 100px;
  height: 35px;
  line-height: 35px;
  box-shadow: 8px 0 8px rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: space-around;
  font-size: 16px;
  transform: rotate(270deg);
  padding: 3px 4px;
  border-radius: 4px;
  margin: 120px 0px 0px 0px
}
#canvas {
  // border: 1px solid #f6fafd;
  // background-color: #fff;
  background-color: #f6fafd;
}

.text {
  text-align: center;
  color: #fff;
  direction: ltr;
}

.boardBox {
  width: 100vw;
  height: 90vh;
  background: #f9f9f9;
}

.bar_box {
  box-sizing: border-box;
  padding: 0rem 1rem;
  //   position: fixed;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  //   bottom: 0;
  //   width: 100vw;
  // height: 15vh;
  // background-color: #ffffff;
  // background-color: #f6fafd;
  //   justify-content: space-around;
  align-items: center;
  z-index: 9999;
  position: fixed;
  right: 0px;
  top: 0px;
  background: white;
}
// .shade {
//   width: 100vw;
//   height: 100vh;
//   position: fixed;
//   top: 0;
//   background-color: #333333;
//   z-index: 66666;
//   opacity: 0.9;
//   .minishade {
//     width: 100%;
//     height: 100%;
//     display: flex;
//     align-items: center;
//     justify-content: center;
//   }
// }

.contract_box {
  display: block;
  box-sizing: border-box;
  padding: 16px;
}
.contract_name {
  width: 100%;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  padding: 8px 0px;
}


.contract_end {
  padding-top: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.promise_view {
  overflow: hidden;
}
</style>