canvas签名，并将签名保存在合同上vue，合同和签名合成一张图传给后台

最新推荐文章于 2024-07-23 10:04:48 发布
最新推荐文章于 2024-07-23 10:04:48 发布
阅读量978 收藏 5
点赞数
文章标签： canvas vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/peepeeman/article/details/114357937
版权

子组建（将签名做成组建放在页面中）。**这里有一个问题****this.cxt.lineTo();**这个方法要根据合同的高度计算起点否则可能会出现名字写不出来的问题

<template>
  <div>
    <div
      id="canvas"
      ref="canvas"
    >
      <div
        class="layer"
        v-if="disPlay"
      >
      <!--原来这里做了一个功能toucheMove的时候遮罩层消失，需求想一出是一出，最后不要了六个路口以防万一-->
        <!-- <div @click="disPlay=false">请在此区域签名</div> -->
        <div>请在此区域签名</div>
      </div>
      <p
        id="clearCanvas"
        ref="clearCanvas"
      >清除</p>
      <p
        id="saveCanvas"
        ref="saveCanvas"
      >保存</p>
    </div>
    <div
      class="mySign"
      v-show="(isSign = false)"
    >
      <img
        :src="signSrc"
        alt=""
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    imgHeight: {
      type: Number,
      default() {
        return 300;
      },
    },
  },
  data() {
    return {
      isSign: false,
      signSrc: "",
      disPlay: true,
      isDraw: false,
    };
  },
  created() {},
  mounted() {
    // console.log(this.imgHeight);
    this.$refs.canvas.focus();
    this.lineCanvas({
      el: this.$refs.canvas, //绘制canvas的父级div
      clearEl: this.$refs.clearCanvas, //清除按钮
      saveEl: this.$refs.saveCanvas, //保存按钮
    });
    this.$refs.canvas.addEventListener("touchmove", this.getStop);
  },
  methods: {
    getStop() {
      document.body.style.overflow = "hidden";
      // sessionStorage.removeItem('base64')
    },
    lineCanvas(obj) {
      this.linewidth = 2;
      this.color = "#000000";
      this.background = "#fff";
      for (var i in obj) {
        this[i] = obj[i];
      }
      // console.log(this.el)
      this.canvas = document.createElement("canvas");
      this.el.appendChild(this.canvas);
      this.cxt = this.canvas.getContext("2d");
      this.canvas.width = this.el.clientWidth;
      this.canvas.height = this.el.clientHeight;
      this.cxt.fillStyle = this.background;
      this.cxt.fillRect(0, 0, this.canvas.width, this.canvas.width);
      this.cxt.strokeStyle = this.color;
      this.cxt.lineWidth = this.linewidth;
      this.cxt.lineCap = "round";
      //开始绘制
      this.canvas.addEventListener(
        "touchstart",
        function (e) {
          // console.log(e);
          this.cxt.beginPath();
          this.cxt.moveTo(
            e.changedTouches[0].pageX,
            e.changedTouches[0].pageY - this.imgHeight
          );
        }.bind(this),
        false
      );
      //绘制中
      this.canvas.addEventListener(
        "touchmove",
        function (e) {
          // 设置一个变量判断是否进行签名
          this.isDraw = true;
          this.cxt.lineTo(
            e.changedTouches[0].pageX,
            e.changedTouches[0].pageY - this.imgHeight
          );
          this.cxt.stroke();
        }.bind(this),
        false
      );
      //结束绘制
      this.canvas.addEventListener(
        "touchend",
        function () {
          this.cxt.closePath();
          let imgBase64 = this.canvas.toDataURL();
          //console.log(imgBase64);
          this.signSrc = imgBase64;
          this.isSign = true;
        }.bind(this),
        false
      );
      //清除画布
      this.clearEl.addEventListener(
        "click",
        function () {
          // 画布被清除变量修改
          this.isDraw = false;
          this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
        }.bind(this),
        false
      );
      //保存图片，直接转base64
      this.saveEl.addEventListener(
        "click",
        function () {
          if (this.isDraw) {
            document.body.style.overflow = "scroll";
            let imgBase64 = this.canvas.toDataURL();
            // console.log(imgBase64);
            this.signSrc = imgBase64;
            // sessionStorage.setItem("base64", imgBase64);
            this.isSign = true;
            this.addComment();
          } else {
            this.$dialog.alert({ title: "温馨提示", message: "请签名" });
            return;
          }
        }.bind(this),
        false
      );
    },
    addComment() {
    //将base64的data传给父组建进行展示，为合同和签名合成作准备
      this.$emit("addComment", this.signSrc);
    },
  },
  destroyed() {
    document.body.style.overflow = "scroll";
  },
};
</script>
<style scoped>
.layer {
  width: 100%;
  position: absolute;
  bottom: 25%;
  pointer-events: none;
}
.layer > div:nth-of-type(1) {
  width: 95%;
  height: 13rem;
  margin: 0 auto;
  border: 1px dashed rgb(170, 170, 170);
  line-height: 13rem;
  font-size: 1rem;
  font-weight: 500;
  color: #a2a2a2;
}
</style>
<style scoped lang="less">
#canvas {
  width: 100%;
  height: 300px;
  position: relative;
  // canvas {
  //  position: absolute;
  //  z-index: 10;
  // }
  #clearCanvas {
    width: 50%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    border: 1px solid #dedede;
    z-index: 1;
  }
  #saveCanvas {
    width: 50%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    position: absolute;
    bottom: 0;
    right: 0;
    border: 1px solid #dedede;
    z-index: 1;
  }
}
.mySign {
  width: 100%;
  height: 300px;
  img {
    width: 100%;
    height: 300px;
  }
}
.test {
  width: 100%;
  height: 200px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
</style>

父组建

<template>
  <div class="gzs">
    <div
      class="outs"
      ref="table"
    >
    <!--合同图片替换成你自己的-->
      <img
        ref='img'
        src="../assets/img/gzs.png"
      />
      <div
        v-if="ysShow==false"
        class="sigimg"
      >
        <img
          ref='img2'
          :src="imgUrl"
        >
      </div>
    </div>
    <signature
      v-if="ysShow"
      :imgHeight="imgHeight"
      @addComment="addComment"
    ></signature>
    <div
      class="btn"
      v-if="ysShow==false"
    >
      <div @click="submit">提交</div>
    </div>
    <!-- <img
      :src="jietuimg"
      alt=""
    > -->
  </div>
</template>

<script>
import signature from "@/components/signature";
import html2canvas from "html2canvas";
const imageConversion = require("image-conversion");

export default {
  components: { signature },
  data() {
    return {
      imgHeight: 0,
      ysShow: true,
      imgUrl: "",
      jietuimg: "",
    };
  },
  mounted() {
    this.$refs.img.onload = (e) => {
      this.imgHeight = Number(this.$refs.img.height);
    };
    this.$refs.table.addEventListener("touchmove", this.getStart);
  },
  methods: {
    getStart() {
      document.body.style.overflow = "scroll";
    },
    addComment(data) {
      this.imgUrl = data;
      this.ysShow = false;
    },
    submit() {
      this.$toast.loading({
        mask: true,
        duration: 0,
        message: "上传中",
      });
      html2canvas(this.$refs.table, {
        useCORS: true,
        backgroundColor: null,
      }).then((canvas) => {
        const dataUrl = canvas.toDataURL("images/jpg");
        this.jietuimg = dataUrl;
        // console.log(dataUrl)
        // 第一步：将dataUrl转换成Blob
        var fd = new FormData();
        var blob = this.dataURItoBlob(dataUrl);
        //fd.append("file", blob, Date.now() + ".jpg");
        // 第二步：上传分享图
        this.updateImg(blob);
      });
    },
    //上传图片
    updateImg(file) {
      // 若文件为图片则压缩
      let formData = new FormData();
      imageConversion.compressAccurately(file, 500).then((res) => {
        let resFile = new window.File(
          [res],
          "file" + Math.round(Math.random() * 10000) + ".png",
          { type: "image/jpeg" }
        );
        //formData里插入给后台传的参数，根据
        formData.append("MODULE_CODE", 10);
        formData.append("FILE_TYPR", "image");
        formData.append("CUST_ID", this.$route.query.CUST_ID);
        formData.append("CUST_TYPE", this.$route.query.CUST_TYPE);
        formData.append(
          "CUST_NAME",
          encodeURIComponent(this.$route.query.CUST_NAME)
        );
        formData.append("ID_CARD", this.$route.query.ID_CARD);
        let data = this.$base.getSecDataNoEn({
          MODULE_CODE: 10,
          FILE_TYPR: "image",
          CUST_ID: this.$route.query.CUST_ID,
          CUST_TYPE: this.$route.query.CUST_TYPE,
          CUST_NAME: encodeURIComponent(this.$route.query.CUST_NAME),
          ID_CARD: this.$route.query.ID_CARD,
        });
        formData.append("v", data.v);
        formData.append("timestamp", data.timestamp);
        formData.append("app_key", data.app_key);
        formData.append("sign", data.sign);
        formData.append("file", resFile);
        this.$api.getLivenessByFlow(formData).then((res) => {
          this.$toast.clear();
          if (res.data.RESULT_CODE == 0) {
            this.$toast("上传成功,为您跳转下一页面");
              if (this.$route.query.sode == 2) {
                let sode = localStorage.getItem("HT_WAY");
                if (sode == 1) {
                  this.$router.push({
                    name: "kk",
                    query: {
                      CUST_ID: this.$route.query.CUST_ID,
                      CUST_TYPE: this.$route.query.CUST_TYPE,
                      CUST_NAME: this.$route.query.CUST_NAME,
                      ID_CARD: this.$route.query.ID_CARD,
                    },
                  });
                } else if (sode == 2) {
                  this.$router.push({
                    name: "Step",
                    query: {
                      CUST_ID: this.$route.query.CUST_ID,
                      CUST_TYPE: this.$route.query.CUST_TYPE,
                      CUST_NAME: this.$route.query.CUST_NAME,
                      ID_CARD: this.$route.query.ID_CARD,
                      RZ_CODE: res.data.RESULT_OBJECT.RZ_CODE,
                    },
                  });
                } else if (sode == 3) {
                  this.$router.push({
                    name: "Economy",
                    query: {
                      CUST_ID: this.$route.query.CUST_ID,
                      CUST_TYPE: this.$route.query.CUST_TYPE,
                      CUST_NAME: this.$route.query.CUST_NAME,
                      ID_CARD: this.$route.query.ID_CARD,
                    },
                  });
                }
              } else {
                this.$router.push({
                  name: "kk",
                  query: {
                    CUST_ID: this.$route.query.CUST_ID,
                    CUST_TYPE: this.$route.query.CUST_TYPE,
                    CUST_NAME: this.$route.query.CUST_NAME,
                    ID_CARD: this.$route.query.ID_CARD,
                  },
                });
              }
          } else {
            this.$dialog
              .alert({
                title: "温馨提示",
                message: "res.data.RESULT_MESSAGE",
              })
              .then(() => {});
          }
        });
      });
    },
    dataURItoBlob(dataURI) {
      // base64转buffer
      var byteString = atob(dataURI.split(",")[1]);
      var mimeString = dataURI.split(",")[0].split(":")[1].split(";")[0];
      var ab = new ArrayBuffer(byteString.length);
      var ia = new Uint8Array(ab);
      for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      return new Blob([ab], { type: mimeString });
    },
    // createImg() {
    //   var image = new Image();
    //   var canvas = document.getElementById("main");
    //   image.src = canvas.toDataURL("image/png");
    //   console.log("图片内容===>", image.src);
    // },
  },
};
</script>
<style scoped>
.outs {
  position: relative;
}
.outs > img:nth-of-type(1) {
  width: 100%;
}
.sig {
  width: 100%;
  line-height: 3rem;
  font-size: 1rem;
}
.sigimg {
  width: 25%;
  position: absolute;
  bottom: 0;
  right: 0;
}
.sigimg > img {
  width: 100%;
}
.btn {
  width: 100%;
}
.btn > div {
  width: 6.6rem;
  height: 2.8rem;
  line-height: 2.8rem;
  color: #fff;
  background: #eb8f34;
  margin: 0 auto;
  margin-top: 2.3rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  border-radius: 0.7rem;
}
</style>
peepeeman
关注
H5 前端实现签名，写入到合同照片里。（前端实现俩张图片合成）
weixin_42102798的博客
12-20 4740
一、概要： 我实现的需求类似于，现实中的合同签名。这种方式是通过前端生成一个画布，然后用户通过微信进入，浏览到H5页面，写入自己的名字，在把写好的画布与我们预先准备好的合同图片合成一张图片，在上传至服务器。这种方式也可以后端进行合成，随后发现前端合成比较方便，就在前端做了。 二、前端代码 <!DOCTYPE html> <meta charset="UTF-8"&g...
vue+canvas 移动端手写签名，合并图片
xfmuchengxue的博客
07-09 4400
<template> <div class="sign"> <div class="header"> <i class="el-icon-arrow-left backImg" @click="goBack"></i> <span class="title">个人签名</sp...
vue利用canvas实现签名合并合同，图片大小等比例调整
yh_hh的博客
08-23 905
话不多说上代码 页面代码 <template> <div class="signHandle"> <canvas ref="signHandle" class="canvas" /> <div class="btn_container" :style="{ height: height + 'px' }"> <van-button style="margin-left: auto;" round @touchstart=
Vue 实现电子签名并生成签名图片
最新发布
gz_qiulinyong的博客
07-23 1247
前端性能优化是提升用户体验、增加用户留存和提升SEO排名的重要环节。本文将列举出多种提升前端性能的方法，帮助开发者构建更快速、流畅的Web应用。前端性能优化是一个系统性的工作，涉及资源优化、缓存管理、代码优化、网络优化等多个方面。通过合理地应用这些方法，可以显著提升Web应用的加载速度和用户体验。
H5合成图片，合同签名的演示
12-20
这是一个H5合成图片的dome用例，我的使用是，类似合同签名。测试测试测试，提供下载，希望大家都学习一下
前段vue获取客户签字图片转化为base64，传给后端jeecgboot，后端把base64转化为png，jpg并且存入数据库
Java&Develop的博客
11-06 1307
前段获取客户签字图片，传给后端，并且存入数据库 前段获取的是，生成的是base64图片，传到后端是base64，需要转化为jpg，png。 原因是。app，有客户签字图片。从前段传递到后端。后端需要获取保存到本地，并且存入数据库。 前端，线上签字，图片，传到后端 base64图片。后端接收转化为jpg 客户签字图片 @AutoLog(value = "ervice_Contract-合同编辑") @ApiOperation(value="ervice_Contract-合同编辑",
HTML5 canvas实现电子签名
topMan'blog
05-29 1791
1.为什么要用到BASE64编码的图片信息     Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一。Base64 主要不是加密，它主要的用途是把一些二进制数转成普通字符用于网络传输。由于一些二进制字符在传输协议中属于控制字符，不能直接传送需要转换一下。最常见的用途是作为电子邮件或WebService附件的传输编码. 2.base64编码定义 　　目前的internet e-ma...
vue2.0 H5页面实现上上签pdf预览及签名显示(后台接口返回base64格式)
qq_45442879的博客
02-25 5782
通过网上搜索资料，决定使用vue插件vue-pdf实现pdf文件预览，vue-pdf封装了原生pdf.js和pdfjs-dist。安卓和ios都可以预览pdf文件，通过引入CMapReaderFactory可以解决中文异常显示问题，但是发现。安卓和ios本地打包的情况下都可以正常显示，但是代码提交后在线上环境打包会将注释的代码自动还原，npm install vue-pdf@latest（latest表示安装最新版本）npm install vue-pdf@4.1.0（必须使用此版本）
vue 使用 canvas 实现手写电子签名
11-20
在本文中，我们将深入探讨如何使用 Vue.js 集成 Canvas 实现手写电子签名功能。Vue-esign 是一个专门为此目的设计的 Vue 组件，它提供了丰富的特性以满足不同场景的需求。 首先，Vue-esign 支持在 PC 和 Mobile ...
vue使用canvas实现移动端手写签名
10-14
在Vue组件中，我们可以定义一个`save`方法来执行此操作，并将结果保存到Vue实例的属性`url`中，以便显示在`<img>`标签上。 ```javascript save() { const imgData = this.$refs.canvasW.toDataURL('image/png'); ...
vue+canvas实现移动端手写签名
10-15
在本文中，我们将探讨如何使用Vue.js和HTML5的Canvas元素来实现移动端的手写签名功能。Vue.js是一个流行的JavaScript框架，用于构建用户界面，而Canvas则是一个HTML5元素，允许我们进行图形绘制。 首先，我们需要...
vue签名组件-移动
06-13
此组件为单独组件，通过components引入即可使用，根据项目需求自行配置编写样式
canvas电子签名，支持保存签名图片
04-26
本主题聚焦于使用canvas技术实现电子签名并将其保存为图片的功能。Canvas是HTML5提供的一种强大的图形绘制工具，它允许开发者通过JavaScript在网页上进行动态图形编程。以下是对这个知识点的详细阐述： 首先，我们...
基于canvas实现手写签名（vue）
10-15
在本文中，我们将深入探讨如何基于Vue.js和HTML5的Canvas元素实现一个简易的手写签名功能。Canvas是HTML5的一个重要特性，它允许我们在网页上动态绘制图形，非常适合用于创建交互式绘图应用，如手写签名。 首先，...
vue实现上传pdf文件盖章与签名，盖章文件下载
weixin_45291798的博客
11-29 4532
我们使用了
H5移动端项目实现手写签名功能 vue实现手写签名
鹏仔工作室的秘密基地
02-05 5695
vue 移动端实现手写签名效果，功能很完美，保存时保存为base64格式。 base64转file文件格式 vue中将base64转file文件格式 刚好项目用到此功能，就网上找了一下，清理了无用代码，简单方便，因为项目中多个地方需要使用，所以我将它整理为组件，通过ref和传值控制，下面代码我单独整理出来，可自行封装组件（只支持移动端，不支持pc端）。 代码中，css自行修改一下宽高，背景之类即可。 代码如下 <template> <!-- 手写签名组件 --&g...
Photoshop - 正片叠底之合同、签名、日期、盖章拼接
牧码的博客
06-17 3650
首先声明本教程只适用于学习，如果用于非法手段，后果自负。如何将一个合同上的签名和日期，另外合并拼接在合同上？这期选用我们的技术主角——正片叠底。正片叠底，是计算机图形图像软件Adobe photoshop中的一种混合模式，存在于颜色混合模式、通道混合模式、图层混合模式的变暗模式组中，是用户使用频率较高的一种变暗模式。使用“正片叠底” 混合模式时一般不会产生色阶溢出，当调换基色和混合色的位置，结果颜色相同。Ps：由于涉及到隐私问题，就马赛克下~1、选择【签名日期】图层2、选择【正片叠底】3、我们看效果图，奇怪
vue中实现签名画板
weixin_45389051的博客
09-05 915
【代码】vue中实现签名画板。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值