canvas电子签名例子，移动端PC端都可以用

已于 2024-06-04 10:18:14 修改
阅读量146 收藏
点赞数
分类专栏： 笔记部分 文章标签： 前端 javascript vue.js
于 2022-12-02 13:46:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sisuiban/article/details/128146658
版权

@touchstart=“touchStart”：这是一个触摸事件，当用户在移动设备上触摸屏幕并开始触摸 canvas 元素时触发
@touchmove=“touchMove”：这是一个触摸后滑动事件，当用户在移动设备上触摸屏幕并在 canvas 元素上滑动时触发
@touchend=“touchEnd”：这是一个触摸=结束事件，当用户在移动设备上触摸屏幕并结束触摸 canvas 元素时触发
@mousedown=“mouseDown”：这是一个鼠标点击事件，当用户在桌面设备上点击鼠标按钮时触发
@mousemove=“mouseMove”：这是一个鼠标滑动事件，当用户在桌面设备上移动鼠标时触发
@mouseup=“mouseUp”：这是一个鼠标离开事件，当用户在桌面设备上释放鼠标按钮时触发

第一种 这个移动端PC端都可以

<template>
  <div class="homes">
    <div class="head_div imgClass">
      <img style="width: 100%;height: 100%;" :src="resultImg" alt="">
    </div>
    <div ref="canvasHW" class="body_div">
      <canvas ref="canvasF" style="width: 100%;height: 100%;" @touchstart="touchStart" @touchmove="touchMove"
        @touchend="touchEnd" @mousedown="mouseDown" @mousemove="mouseMove" @mouseup="mouseUp">
      </canvas>
    </div>
    <div class="font_div">
      <div style="margin-right: 20px;">
        背景颜色：<input type="color" v-model="canvasBGC" @change="BGC_color" />
      </div>
      <div style="margin-right: 20px;">
        文字颜色：<input type="color" v-model="strokeStyle" @change="Text_color" />
      </div>
      <el-button type="danger" @click.native.prevent="handleOverwrite()" size="mini">重签</el-button>
      <el-button type="danger" @click.native.prevent="handleSave()" size="mini">确定</el-button>

    </div>
  </div>
</template>
<style scoped>
.homes {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.homes .head_div {
  width: 100%;
  height: 80px;
  background-color: aquamarine;
}

.homes .font_div {
  width: 100%;
  height: 50px;
  background-color: aquamarine;
  display: flex;

}

.homes .imgClass {
  width: 100%;
  height: 200px;
}

.homes .body_div {
  flex: 1;
  box-sizing: border-box;
  padding: 10px;
  background-color: burlywood;
}

.body_div canvas {
  border: 1px solid #00a8ff;
}
</style>

<script>
export default {
  data() {
    return {
      resultImg: null,
      points: [],
      canvasTxt: null,
      stage_info: [],
      startX: 0,
      startY: 0,
      moveY: 0,
      moveX: 0,
      isDown: false,
      strokeStyle: '#CA6363',
      canvasBGC: '#8688D0',
      lineWidth: 5,

      config: {
        width: 0, // 宽度
        height: 0, // 高度
        can_width: 0,
        can_height: 0,

      }
    }
  },
  created() {


  },
  mounted() {
    // this.canvasBGC = '#36d'
    // this.strokeStyle = '#000'

    this.initCanvas()

  },
  methods: {
    // 初始化Canvas
    initCanvas() {
      const {
        width, height,
      } = document.querySelector('.body_div');

      this.config.width = width;
      this.config.height = height;



      let canvas = this.$refs.canvasF
      // 获取画布的宽度
      canvas.width = this.$refs.canvasHW.offsetWidth - 20
      this.config.can_width = canvas.width;

      // 获取画布的高度
      canvas.height = this.$refs.canvasHW.offsetHeight
      this.config.height = canvas.height;
      // 创建 context 对象
      this.canvasTxt = canvas.getContext('2d')
      this.stage_info = canvas.getBoundingClientRect()
      // 设置canvas背景色
      this.canvasTxt.fillStyle = this.canvasBGC;
      this.canvasTxt.fillRect(0, 0, canvas.width, canvas.height);
    },
    BGC_color(event) {
      console.log('选择的颜色', event.target.value);
      this.canvasBGC = event.target.value
      this.initCanvas()
    },
    Text_color(event) {
      this.strokeStyle = event.target.value
    },
    // 鼠标按下事件 - 准备绘画
    mouseDown(ev) {
      ev = ev || event
      ev.preventDefault()
      if (ev) {
        let obj = {
          x: ev.offsetX,
          y: ev.offsetY
        }
        this.startX = obj.x
        this.startY = obj.y
        this.canvasTxt.beginPath()
        this.canvasTxt.moveTo(this.startX, this.startY)
        this.canvasTxt.lineTo(obj.x, obj.y)
        this.canvasTxt.stroke()
        this.canvasTxt.closePath()
        this.points.push(obj)
        this.isDown = true
      }
    },
    // 触摸开始事件 - 准备绘画
    touchStart(ev) {
      ev = ev || event
      ev.preventDefault()
      if (ev.touches.length == 1) {
        let obj = {
          x: ev.targetTouches[0].clientX - this.stage_info.left,
          y: ev.targetTouches[0].clientY - this.stage_info.top
        }
        this.startX = obj.x
        this.startY = obj.y
        this.canvasTxt.beginPath()
        this.canvasTxt.moveTo(this.startX, this.startY)
        this.canvasTxt.lineTo(obj.x, obj.y)
        this.canvasTxt.stroke()
        this.canvasTxt.closePath()
        this.points.push(obj)
      }
    },
    // 鼠标移动事件 - 开始绘画
    mouseMove(ev) {
      ev = ev || event
      ev.preventDefault()
      if (this.isDown) {
        let obj = {
          x: ev.offsetX,
          y: ev.offsetY
        }
        this.moveY = obj.y
        this.moveX = obj.x
        this.canvasTxt.strokeStyle = this.strokeStyle
        this.canvasTxt.lineWidth = this.lineWidth
        this.canvasTxt.beginPath()
        this.canvasTxt.moveTo(this.startX, this.startY)
        this.canvasTxt.lineTo(obj.x, obj.y)
        this.canvasTxt.stroke()
        this.canvasTxt.closePath()
        this.startY = obj.y
        this.startX = obj.x
        this.points.push(obj)
      }
    },
    // 触摸移动事件 - 开始绘画
    touchMove(ev) {
      ev = ev || event
      ev.preventDefault()
      if (ev.touches.length == 1) {
        let obj = {
          x: ev.targetTouches[0].clientX - this.stage_info.left,
          y: ev.targetTouches[0].clientY - this.stage_info.top
        }
        this.moveY = obj.y
        this.moveX = obj.x
        // 设置线条颜色
        this.canvasTxt.strokeStyle = this.strokeStyle
        // 设置线条宽度
        this.canvasTxt.lineWidth = this.lineWidth
        // 绘制开始路径
        this.canvasTxt.beginPath()
        // 定义线条开始坐标
        this.canvasTxt.moveTo(this.startX, this.startY)
        // 定义线条结束坐标
        this.canvasTxt.lineTo(obj.x, obj.y)
        // 绘制线条
        this.canvasTxt.stroke()
        this.canvasTxt.closePath()
        this.startY = obj.y
        this.startX = obj.x
        this.points.push(obj)
      }
    },
    // 松开鼠标事件 - 停止绘画
    mouseUp(ev) {
      ev = ev || event
      ev.preventDefault()
      if (ev) {
        let obj = {
          x: ev.offsetX,
          y: ev.offsetY
        }
        this.canvasTxt.beginPath()
        this.canvasTxt.moveTo(this.startX, this.startY)
        this.canvasTxt.lineTo(obj.x, obj.y)
        this.canvasTxt.stroke()
        this.canvasTxt.closePath()
        this.points.push(obj)
        this.points.push({ x: -1, y: -1 })
        this.isDown = false
      }
    },
    // 触摸结束事件 - 停止绘画
    touchEnd(ev) {
      ev = ev || event
      ev.preventDefault()
      if (ev.touches.length == 1) {
        let obj = {
          x: ev.targetTouches[0].clientX - this.stage_info.left,
          y: ev.targetTouches[0].clientY - this.stage_info.top
        }
        this.canvasTxt.beginPath()
        this.canvasTxt.moveTo(this.startX, this.startY)
        this.canvasTxt.lineTo(obj.x, obj.y)
        this.canvasTxt.stroke()
        this.canvasTxt.closePath()
        this.points.push(obj)
        this.points.push({ x: -1, y: -1 })
      }
    },
    // 重写
    handleOverwrite() {
      this.canvasTxt.clearRect(0, 0, this.$refs.canvasF.width, this.$refs.canvasF.height)
      this.points = []
      this.resultImg = null
    },
    handleSave() {

      return new Promise((resolve, reject) => {
        if (!this.isCanvasBlank(this.$refs.canvasF)) {
          // this.rotateBase64(this.$refs.canvasF.toDataURL('image/png')).then((img) => {
          //   const imgBase64 = img;
          //   console.log(imgBase64, 'imgBase64-->>'); // base64编码
          //   this.resultImg = imgBase64
          // });
          this.resultImg = this.$refs.canvasF.toDataURL('image/png')
          console.log(this.resultImg, 'imgBase64-->>'); // base64编码
        } else {
          const err = '请签名';
          reject(err);
        }
      });
    },
    // 判断canvas对象是否空
    isCanvasBlank(canvas) {
      const blank = document.createElement('canvas'); // 系统获取一个空canvas对象
      blank.width = this.config.width;
      blank.height = this.config.height;
      return canvas.toDataURL() === blank.toDataURL(); // 比较值相等则为空
    },
    // 将base64图片旋转90度以后上传
    rotateBase64(imgBase64) {
      return new Promise((resolve) => {
        const imgView = new Image();
        imgView.src = imgBase64;
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        const cutCoor = {
          sx: 0,
          sy: 0,
          ex: 0,
          ey: 0,
        };
        // 裁剪坐标
        imgView.onload = () => {
          const imgW = imgView.width;
          const imgH = imgView.height;
          const size = imgH;
          canvas.width = size * 2;
          canvas.height = size * 2;
          cutCoor.sx = size;
          cutCoor.sy = size - imgW;
          cutCoor.ex = size + imgH;
          cutCoor.ey = size + imgW;
          context.translate(size, size);
          context.rotate((Math.PI / 2) * 3);
          context.drawImage(imgView, 0, 0);
          const imgData = context.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey);
          canvas.width = imgH;
          canvas.height = imgW;
          context.putImageData(imgData, 0, 0);
          resolve(canvas.toDataURL('image/png'));
        };
      });
    },
  }
}
</script>

在这里插入图片描述

第二种 这个只能移动端上

<template>
  <div class="homes">
    <div class="head_div imgClass">
      <img style="width: 100%;height: 100%;" :src="resultImg" alt="">
    </div>
    <div class="body_div">
      <canvas class="handWriting" :disable-scroll="true" @touchstart="touchStart" @touchmove="touchMove"
        @touchend="touchEnd" id="canvas" ref="canvas"></canvas>
    </div>
    <div class="head_div">
      <el-button type="danger" @click.native.prevent="handleOverwrite()" size="mini">重签</el-button>
      <el-button type="danger" @click.native.prevent="handleSave()" size="mini">确定</el-button>

    </div>

  </div>
</template>

<script>
const $ = (name) => document.querySelector(name);
// 配置内容
const config = {
  width: 0, // 宽度
  height: 0, // 高度
  lineWidth: 5, // 线宽
  strokeStyle: '#000000', // 线条颜色
  lineCap: 'round', // 设置线条两端圆角
  lineJoin: 'round', // 线条交汇处圆角
};
// 偏移量
const client = {
  offsetX: 0,
  offsetY: 0,
};

let canvas;
let ctx;
export default {
  data() {
    return {
      resultImg: null
    }
  },
  created() {

  },
  mounted() {
    this.init();
  },
  methods: {
    // 初始化画板
    init() {
      const {
        width, height, left, top,
      } = $('.body_div').getBoundingClientRect();
      config.width = width;
      config.height = height;
      client.offsetX = left;
      client.offsetY = top;
      // canvas 实例
      canvas = $('#canvas');
      // 设置宽高
      canvas.width = config.width;
      canvas.height = config.height;
      // 设置边框
      //   canvas.style.border = '1px solid #000';
      // 创建上下文
      ctx = canvas.getContext('2d');
      // 设置填充背景色
      ctx.fillStyle = 'transparent';
      // 绘制填充矩形
      ctx.fillRect(
        0, // x 轴起始绘制位置
        0, // y 轴起始绘制位置
        config.width, // 宽度
        config.height, // 高度
      );

    },
    // 触摸开始
    touchStart(event) {
      if (event.type != 'touchstart') return false;
      event.preventDefault();
      // 获取偏移量及坐标
      const { clientX, clientY } = event.changedTouches[0];
      // 清除以上一次 beginPath 之后的所有路径，进行绘制
      ctx.beginPath();
      // 根据配置文件设置相应配置
      ctx.lineWidth = config.lineWidth;
      ctx.strokeStyle = config.strokeStyle;
      ctx.lineCap = config.lineCap;
      ctx.lineJoin = config.lineJoin;
      // 设置画线起始点位（减去 左边、上方的偏移量很关键）
      ctx.moveTo(clientX - client.offsetX, clientY - client.offsetY);
      // console.log('触摸开始', e);
    },
    // 滑动开始
    touchMove(ev) {
      if (ev.type != 'touchmove') return false;
      ev.preventDefault();
      // 获取当前坐标点位
      const { clientX, clientY } = ev.changedTouches[0];
      // 根据坐标点位移动添加线条（减去 左边、上方的偏移量很关键）
      ctx.lineTo(clientX - client.offsetX, clientY - client.offsetY);
      // 绘制
      ctx.stroke();
    },
    // 离开屏幕开始
    touchEnd(ev) {
      if (ev.type != 'touchend') return 0;
      ev.preventDefault()
      ctx.closePath();
      // 移除鼠标移动或手势移动监听器
      window.removeEventListener('mousemove', this.draw);
    },
    // 重写
    handleOverwrite() {
      ctx.clearRect(0, 0, config.width, config.height);
      this.resultImg = ''
    },
    // 确定
    handleSave() {
      return new Promise((resolve, reject) => {
        if (!this.isCanvasBlank(canvas)) {
          // this.rotateBase64(canvas.toDataURL('image/png')).then((img) => {
          //   const imgBase64 = img;
          //   console.log(imgBase64, 'imgBase64-->>'); // base64编码
          //   resolve(imgBase64);
          // });
          this.resultImg = canvas.toDataURL('image/png')

        } else {
          const err = '请签名';
          reject(err);
        }
      });
    },
    // 判断canvas对象是否空
    isCanvasBlank(canvas) {
      const blank = document.createElement('canvas'); // 系统获取一个空canvas对象
      blank.width = config.width;
      blank.height = config.height;
      return canvas.toDataURL() === blank.toDataURL(); // 比较值相等则为空
    },
    // 将base64图片旋转90度以后上传
    rotateBase64(imgBase64) {
      return new Promise((resolve) => {
        const imgView = new Image();
        imgView.src = imgBase64;
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        const cutCoor = {
          sx: 0,
          sy: 0,
          ex: 0,
          ey: 0,
        };
        // 裁剪坐标
        imgView.onload = () => {
          const imgW = imgView.width;
          const imgH = imgView.height;
          const size = imgH;
          //   常量大小 = imgH;
          canvas.width = size * 2;
          canvas.height = size * 2;
          cutCoor.sx = size;
          cutCoor.sy = size - imgW;
          cutCoor.ex = size + imgH;
          cutCoor.ey = size + imgW;
          context.translate(size, size);
          context.rotate((Math.PI / 2) * 3);
          context.drawImage(imgView, 0, 0);
          const imgData = context.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey);
          canvas.width = imgH;
          canvas.height = imgW;
          context.putImageData(imgData, 0, 0);
          resolve(canvas.toDataURL('image/png'));
        };
      });
    },
  }
}
</script>
<style scoped>
.homes {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.homes .head_div {
  width: 100%;
  height: 50px;
  background-color: aquamarine;
}

.homes .imgClass {
  width: 100%;
  height: 200px;
}

.homes .body_div {
  flex: 1;
  background-color: burlywood;
}
</style>

在这里插入图片描述

曾不错吖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML5 canvas实现电子签名
04-06
NULL 博文链接：https://topmanopensource.iteye.com/blog/1544126
JS案例：支持PC端和Mobile端的Canvas电子签名功能
05-13 1632
前言： 这段时间项目迭代时遇到了一个新需求，基于react实现一个Pc版电子签名功能，并生成图片上传。于是我想到了signature_pad，并且在项目使用了这个插件 不得不说，用别人造的轮子是真的香，出于好奇，想用原生实现一下电子签名的功能 以下是实现过程 HTML和css可以参照源码，这里不过多介绍 首先引入eventBus，方便代码解耦 然后实现Base基类存放公共方法和属性，后续有啥共用属性或方法可以往这加 //基类：公共方法和属性 import event from './eventBu
canvas 电子签名
最新发布
weixin_45664416的博客
06-13 271
重绘，保存，移出，移入，点击。
canvas 实现电子签名
weixin_39703839的博客
02-24 292
canvas 实现电子签名，web 和 h5 通用方法
canvas实现电子签名
青春流年的博客
12-13 4808
canvas实现电子签名
jQuery实现移动端笔触canvas电子签名
10-15
在本文中，我们将深入探讨如何使用jQuery来实现移动端的canvas电子签名功能。jQuery与HTML5的canvas元素结合，可以提供一种交互式的签名体验，适用于移动设备。以下是对关键知识点的详细解释： 1. **jQuery**: ...
uniapp的移动端h5的横屏电子签名
06-01
自定义一个h5页面，实现可以横屏手写电子签名的功能，且支持回显（图片可以转化为签字版的canvas，且支持在此基础上继续进行手写签名）由于uniapp微信小程序支持横竖屏切换配置，但是移动端h5不支持。自定义一个h5...
vue+canvas实现移动端手写签名
10-15
在本文中，我们将探讨如何使用Vue.js和HTML5的Canvas元素来实现移动端的手写签名功能。Vue.js是一个流行的JavaScript框架，用于构建用户界面，而Canvas则是一个HTML5元素，允许我们进行图形绘制。 首先，我们需要...
canvas签名板支持pc和移动端，可自行调节样式
02-07
canvas签名板支持pc和移动端，可自行调节样式
Canvas 实现电子签名
BI的博客
08-12 218
Canvas 实现电子签名
canvasSignature是基于canvas实现手写签名电子签名功能
08-11
canvasSignature是基于html5 canvas及jquery实现手写签名（电子签名）功能的js组件
Vue—使用canvas实现电子签名
weixin_45313351的博客
12-15 2165
实现签名的功能听着很复杂，其实很简单。使用canvas辅助的API和监听鼠标相关事件即可实现。思考：1、如何使用canvas画线？2、如何判断在提交签名时判断是否有签名？3、如何将canvas 转成的base64转成File文件对象传给后端？1.绘制直线ctx.strokeStyle = "#000" // 设置线条颜色ctx.lineWidth = 2 // 设置线条宽度ctx.beginPath() // 开始绘图路径ctx.moveTo(x, y) // 将输入的坐标移动至直线起点。
小程序 canvas 实现电子签名
weixin_34174132的博客
10-23 2266
其实随意搜索一下还是有很多先例的，只是有些比较坑得自己筛选。https://blog.csdn.net/qq_36875339/article/details/81086205这篇文章真是好，以至于我想给赞赏&lt;canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouch...
使用Canvas实现一个电子签名功能
Danche_1的博客
07-13 301
strokeColor` | 线段颜色 | string | - | `default` | green。`width` | canvas 宽度 | number | - | `default` | 320。`height` | canvas 高度 | number | - | `default` | 160。`lineWidth` | 线宽 | number | - | `default` | 4。参数 | 说明 | 类型 | 可选值 | 默认值 | 是否必填。
canvas实现电子签字功能
发果叁
12-31 1961
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
画布canvas实现电子签名
2302_76741306的博客
07-12 607
画布canvas实现电子签名
JS的canvas简易功能:电子签名
qq_53593647的博客
01-10 231
分享canvas简易电子签名!刚学习到!
【JavaScript】------- Canvas 实现电子签名实例代码
皮皮冰要做大神
08-04 867
1. 这个例子只是实现电子签名 如何让他符合业务 看你们的了 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta content="width=device-width,initial-scale=1,maximum-scale=1" name="viewport" /> <title>签到</title> &...
canvas电子签名
09-06
canvas电子签名是一种在移动端使用canvas元素实现的电子签名功能。通过手指或触控笔在画布上绘制，可以模拟真实的签名效果。具体实现的代码可以参考使用jQuery库实现移动端笔触canvas电子签名的示例代码。 实现...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

曾不错吖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值