基于canvas的手写板（vue组件）

最新推荐文章于 2024-07-29 17:09:37 发布

蓝色之恋love

最新推荐文章于 2024-07-29 17:09:37 发布

阅读量1k

点赞数

分类专栏： canvas vue组件文章标签： canvas

本文链接：https://blog.csdn.net/raingrains/article/details/108821448

版权

这是一个基于canvas的Vue组件，专为移动端设计，支持手写签字功能。组件允许自定义画笔颜色和粗细，提供全屏和缩小版模式，并在完成手写后能获取手写内容的图片。使用者可以通过onComplete事件获取base64编码的图片信息。注意在某些移动端浏览器（如QQ浏览器）中可能出现特定问题，但可以通过调整CSS解决。

摘要由CSDN通过智能技术生成

基于canvas的手写板（vue组件）

手写板组件（仅支持touch事件）
此组件主要用于移动端的签字手写功能，可用于简单的绘画，可显示缩小版，全屏板两种类型，可自定义画笔颜色和画笔粗细，手写完成可以获取手写的结果。点击重写可以清空手写班的内容；点击完成后，会将手写板内容生成图片，此时不可再进行手写操作，点击重写可以进行书写；并且点击完成后可以在onComplete方法中获取生成图片的base64信息
点击“横屏/返回”，可以进行手写板缩小版和全屏版的切换

示例：项目链接

按照正常的vue组件的使用方式引入此组件文件即可

使用示例

  <template>
    <div>
      <CanvasWrite @onComplete="handleComplete"></CanvasWrite>
    </div>
  </template>
  <script>
    import CanvasWrite from './components/CanvasWrite'
    export default {
    
      components: {
    
        CanvasWrite
      },
      methods: {
    
	    handleComplete (e) {
    
	      console.log(e) // 获取图片的base64信息
	    }
	  }
    }
  </script>

事件说明

名称	说明
onComplete	点击完成会触发此方法，可以在此方法中拿到生成的图片信息

CanvasWrite组件

<template>
  <div class="canvas-write" :class="mode">
    <div class="operator-box">
      <div class="input-box">
        <label for="pencil-color">颜色：</label>
        <input type="color" v-model="color" class="pencil-color" id="pencil-color">
        <label for="pencil-size">画笔粗细：</label>
        <input type="number" v-model="size" class