vue2中signature_pad签名组件

已于 2024-03-14 16:25:31 修改
阅读量645 收藏 11
点赞数 10
文章标签： javascript node.js
于 2024-03-08 10:25:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_42262603/article/details/136554604
版权

在项目中下载安装npm install signature_pad。

Sign.vue组件代码：


<template>
    <div class="sign">
        <div class="sign-cont" :class="isLandscape ? 'landscape' : ''">
            <div ref="canvasBox" class="canvasBox">
                <canvas class="canvasId" id="canvasId" />
            </div>
            <div class="btns">
                <div class="btn-tips">
                    请在上方空白处书写您的姓名～
                </div>
                <van-button plain round type="primary" @click="$emit('back')">
                    取消
                </van-button>
                <van-button round type="primary" @click="seaveImages" :loading="isLoading">
                    确定并保存
                </van-button>
            </div>
            <div class="top-btns">
                <div class="btn-tips">
                    <van-icon name="edit" size="24" color="#323232" />
                    <div class="btn-color red" @click="changeColor('#D9001B')"></div>
                    <div class="btn-color blue" @click="changeColor('#0000FF')"></div>
                    <div class="btn-color black" @click="changeColor('#323232')"></div>
                </div>
                <div class="btn-text-clean" @click="overwrite">一键清除</div>
            </div>
        </div>

        <!-- <van-popup v-model="showTip">内容</van-popup> -->
    </div>
</template>
  
  
<script>
import { fileUpload } from "@/api/mine";
import SignaturePad from 'signature_pad';
import { Toast } from "vant";
// import { Toast } from 'vant'
export default {
    name: "sign",
    props: [],
    components: {},
    data() {
        return {
            SignaturePad: null,
            config: {
                penColor: "#000000",   //笔刷颜色
                minWidth: 3,       //最小宽度
            },
            isLoading: false,
            showTip: false,
            isLandscape: false,
            canvas: null,
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.isLoading = false;
            this.canvas = document.getElementById('canvasId');
            this.signaturePad = new SignaturePad(this.canvas, this.config);

            this.landscapeEvent();
            this.showTip = true;
            this.winResize();
        },
        changeColor(color) {
            if (this.signaturePad) {
                this.signaturePad.penColor = color;
                this.signaturePad.clear();
            }
        },

        winResize() {
            const evt
                = 'onorientationchange' in window ? 'orientationchange' : 'resize'

            window.addEventListener(evt, () => {
                setTimeout(() => {
                    this.landscapeEvent();
                }, 10)
            })
        },
        // 旋转操作
        landscapeEvent() {
            this.isLandscape = document.documentElement.clientWidth > document.documentElement.clientHeight;
            this.$nextTick(() => {
                this.canvas.height = this.$refs.canvasBox.clientHeight;;
                this.canvas.width = this.$refs.canvasBox.clientWidth;
            })
            console.log(this.isLandscape)
        },
        overwrite() {
            this.signaturePad && this.signaturePad.clear();
        },
        seaveImages() {
            if (this.signaturePad.isEmpty()) {
                // Toast('签名不能为空');
                Toast({ message: "签名不能为空", duration: 2000, className: this.isLandscape ? "" : "sign-toast" })
            } else {

                this.rotateBase64Img(this.signaturePad.toDataURL(), this.isLandscape ? 0 : -90, async (dataBase64) => {
                    let file = this.dataURLtoFile(dataBase64, new Date().getTime() + ".png");
                    console.log(file, "file");
                    let formData = new FormData();
                    formData.append("file", file);
                    this.isLoading = true;
                    fileUpload(formData)
                        .then(res => {
                            if (res) this.$emit("sign", res.imageUrl)
                            this.isLoading = true;
                        })
                        .catch(err => {
                            this.isLoading = false;
                            console.log(err);
                        });
                })
            }
        },
        //将base64转换为文件..
        dataURLtoFile(dataurl, filename) {
            let arr = dataurl.split(","),
                mime = arr[0].match(/:(.*?);/)[1],
                // eslint-disable-next-line no-undef
                bstr = window.atob(arr[1]),
                n = bstr.length,
                // eslint-disable-next-line no-undef
                u8arr = new Uint8Array(n);
            while (n--) {
                // eslint-disable-next-line no-undef
                u8arr[n] = bstr.charCodeAt(n);
            }
            // eslint-disable-next-line no-undef
            return new File([u8arr], filename, { type: mime });
        },
        // 签完名的图片旋转处理
        rotateBase64Img(src, edg, callback) {
            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')
            let imgW // 图片宽度
            let imgH // 图片高度
            let size // canvas初始大小
            if (edg % 90 !== 0) {
                console.error('旋转角度必须是90的倍数!')
                return
            }
            edg < 0 && (edg = (edg % 360) + 360)
            const quadrant = (edg / 90) % 4 // 旋转象限
            const cutCoor = { sx: 0, sy: 0, ex: 0, ey: 0 } // 裁剪坐标
            const image = new Image()
            image.crossOrigin = 'anonymous'
            image.src = src
            image.onload = function () {
                console.log('加载了')

                imgW = image.width
                imgH = image.height
                size = imgW > imgH ? imgW : imgH
                canvas.width = size * 2
                canvas.height = size * 2
                switch (quadrant) {
                    case 0:
                        cutCoor.sx = size
                        cutCoor.sy = size
                        cutCoor.ex = size + imgW
                        cutCoor.ey = size + imgH
                        break
                    case 1:
                        cutCoor.sx = size - imgH
                        cutCoor.sy = size
                        cutCoor.ex = size
                        cutCoor.ey = size + imgW
                        break
                    case 2:
                        cutCoor.sx = size - imgW
                        cutCoor.sy = size - imgH
                        cutCoor.ex = size
                        cutCoor.ey = size
                        break
                    case 3:
                        cutCoor.sx = size
                        cutCoor.sy = size - imgW
                        cutCoor.ex = size + imgH
                        cutCoor.ey = size + imgW
                        break
                }
                ctx?.translate(size, size)
                ctx?.rotate((edg * Math.PI) / 180)
                // drawImage向画布上绘制图片
                ctx?.drawImage(image, 0, 0)
                // getImageData() 复制画布上指定矩形的像素数据
                const imgData = ctx?.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey)
                if (quadrant % 2 === 0) {
                    canvas.width = imgW
                    canvas.height = imgH
                }
                else {
                    canvas.width = imgH
                    canvas.height = imgW
                }
                // putImageData() 将图像数据放回画布
                ctx?.putImageData(imgData, 0, 0)
                callback(canvas.toDataURL('image/png'))
            }
        }

    },
};
</script>
  
  
<style lang="less" scoped>
* {
    box-sizing: border-box;
}

.sign {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    padding: 12px;

    .sign-cont {
        position: relative;
        border-radius: 4px;
        border: 1px solid #D7D9E7;
        width: calc(100vw - 24px);
        height: calc(100vh - 24px);

        .canvasBox {
            width: calc(100vw - 24px - 60px -40px);
            height: calc(100vh - 24px);
            margin-left: 58px;
            margin-right: 38px;
        }

        .top-btns {
            position: absolute;
            left: 312px;
            top: 0;
            width: calc(100vh - 6.4vw);
            transform: rotate(90deg) translateY(-100%);
            transform-origin: 0 0;
            display: flex;
            align-items: center;
            padding: 11px 0px 11px 11px;
            border-bottom: 1Px solid #D7D9E7;
            flex-shrink: 0;
            height: 40Px;
            flex-wrap: wrap;
            font-size: 14px;

            .btn-text-clean {
                font-size: 14Px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #4F80FF;
                line-height: 20Px;
                text-align: left;
                margin-right: 16px;
                text-decoration-line: underline;
            }

            .btn-tips {
                font-size: 14Px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                line-height: 20Px;
                display: flex;
                align-items: center;
                flex: 2;
            }

            .btn-color {
                width: 12px;
                height: 12px;
                box-shadow: 0px 2px 4px 0px rgba(185, 185, 185, 0.5);
                border-radius: 50%;
                margin-left: 16px;
            }

            .red {
                background: #D9001B;
            }

            .blue {
                background: #0000FF;
            }

            .black {
                background: #323232;
            }
        }

        .btns {
            // border: 1px solid red;
            position: absolute;
            left: 0;
            top: 0;
            width: calc(100vh - 6.4vw);
            transform: rotate(90deg) translateY(-100%);
            transform-origin: 0 0;
            display: flex;
            align-items: center;
            padding: 11Px 0 11Px 11Px;
            border-top: 1Px solid #D7D9E7;
            flex-shrink: 0;
            height: 60Px;
            flex-wrap: wrap;

            .btn-tips {
                font-size: 14Px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #363A44;
                line-height: 20Px;
                text-align: left;
                margin-right: 20px;
                flex: 1;
            }

            .van-button {
                height: 36Px;
                width: 183Px;
                // flex: 1;
                margin-right: 12Px;
                font-size: 12Px;
            }

            .van-button--plain.van-button--primary {
                color: #4F80FF;
                border-color: #4F80FF;
                background-color: #fff;
            }

            .van-button--primary {
                background-color: #4F80FF;
                border-color: #4F80FF;
            }

        }

        &.landscape {
            position: relative;

            .canvasBox {
                width: calc(100vw - 24px);
                height: calc(100vh - 24px - 30px -30px);
                margin-left: 0;
                margin-right: 0;
            }

            .btns {
                position: absolute;
                left: 0;
                height: 30px;
                top: calc(100vh - 24px - 30px);
                width: calc(100vw - 24px);
                transform: rotate(0deg) translateY(0);
            }

            .top-btns {
                position: absolute;
                right: 0;
                height: 30px;
                top: calc(100vh - 24px - 30px);
                width: calc(100vw - 24px);
                transform: rotate(0deg) translateY(0);
            }

            // .btn-tips {
            //     flex: none;
            // }
            // .van-button {
            //     flex:1;
            // }
        }
    }
}
</style>

<style lang="less">
.sign-toast {
    transform-origin: 50% 0;
    transform: rotate(90deg);
}
</style>

引入

<!-- 签名 -->
<sign v-if="isShowSign" class="sign-cont" @sign="signEvent" @back="backEvent" />

import Sign from "./components/Sign.vue";
    components: {
        Sign
    },

方法：

        signEvent(url) {
            console.log(url)
            this.isShowSign = false;
            this.$nextTick(() => {
                document.getElementsByClassName("sign-box")[0].scrollIntoView();
            })
        },
        backEvent() {
            this.isShowSign = false;
            this.$nextTick(() => {
                document.getElementsByClassName("sign-box")[0].scrollIntoView();
            })
        },

css：

.sign-cont {
    position: fixed;
    top: 0;
    left: 0;
    transform-origin: center center;
    // .safe-area(16px);
    width: 100vw;
    height: 100vh;

    // z-index: 9999;
}

效果：

bug制造者in
关注
vue2实现手写签批
weixin_46252229的博客
12-28 787
【代码】vue2实现手写签批。
vue项目 signature_pad实现签名手写板功能 ，base64转Blob
cczz66的博客
03-04 1791
安装 signature_pad 插件 npm install --save signature_pad 根据api文档封装一个Sign组件 <template> <div v-safeHeaderTop class="page"> <Header :isBack="false" title="手写签名"> </Header> <canvas ref="signaturePadCanvas" class="canvas".
手写签名插件（PC端和移动端可用）
12-20
jQuery手写签名插件jSignature，jSignature是一个jQuery插件，它简化了创建签名捕获场的浏览器窗口，允许用户使用鼠标，笔，或手指画一个签名。jSignature捕捉签名矢量轮廓的笔触。虽然jSignature可以导出大位图（PNG）也一样，提取签名的高度可扩展的行程运动坐标（又名向量图）允许签名呈现更大的灵活性。支持主要的台式机，平板电脑和手机浏览器的支持。HTML5 Canvas元素默认情况下使用。我们依傍基于Flash的Canvas元素模拟器（FlashCanvas）时，不支持浏览器的实际画布（ie8 以下）
vue-signature-pad:ature签名板组件视图
04-28
Vue签名板 Vue组件包装，用于 演示版 安装 $ yarn add vue-signature-pad 用法 import Vue from 'vue' ; import VueSignaturePad from 'vue-signature-pad' ; Vue . use ( VueSignaturePad ) ; < template> < div xss=removed> < VueSignaturePad xss=removed xss=removed xss=removed> < div> < button @ click = " save " >Save</ button > < button @ click = " undo " >Undo</ button >
Vue Signature Pad 使用教程
最新发布
gitblog_01016的博客
08-21 407
Vue Signature Pad 使用教程 项目地址:https://gitcode.com/gh_mirrors/vu/vue-signature-pad 项目介绍 Vue Signature Pad 是一个基于 Vue.js 的签名板组件，它允许用户在网页上进行手写签名。这个项目是基于开源库 signature_pad 开发的，提供了 Vue 组件的封装，使得在 Vue 项目中集成签名功能变...
vue-signature-pad实现电子签名
weixin_62950011的博客
01-18 963
此插件还有两个内置的方法比较有用，就是 “锁定目标签名板” 和“打开目标签名板”，其实就是禁用签名和启用签名。项目中有些审批是需要走流程的，到某个节点的时候，某个人可能没有没有权限签名，只能查看签名，这时候这两个方法就排上用场了。或者package.json直接引入下载，安装更新node包命令。
Vue2实现手写电子签名
io_123io_123的博客
12-14 913
使用vue-esign实现电子签名
vue2签名版、画板 组件
sdgjah2的博客
06-03 451
【代码】vue2签名版、画板 组件。
vue3-signature-pad:vue3签名板的实现
03-20
Vue3签名板是一种在Vue3应用中实现用户签名功能的组件。它利用HTML5的Canvas元素，提供了一个平滑、直观的签名绘制界面。Vue3-signature-pad的实现旨在为开发者提供一个简单易用的工具，使用户能够在前端界面上进行...
HandwritingBoard:基于signature_pad.js的uni-app实现手写签名板
04-21
2. **signature_pad.js库**：深入学习signature_pad.js的API，理解其主要功能，如开始绘制、结束绘制、清除签名、保存签名图片等操作，以及如何在JavaScript代码中调用这些功能。 3. **HTML5 Canvas**：signature_...
vue 移动端 手写签名组件(引用signature_pad)
qq_39099766的博客
07-29 6703
最近业务上需要用到移动端手写签名, 找了几个组件都不太如意, 遂自己封装一个组件 设计图如下: 本组件基于Signature Pad库, 在Signature Pad库的基础上完成上方设计图中的手写签名组件, 所以需要先引入Signature Pad npm包 --------- 点我跳转查看(Signature Pad) npm install --save signature_pad 创建手写签名组件 components/autograph/index.vue <template&g.
web 前端签名插件_signature_pad插件实现电子签名功能
weixin_36053926的博客
01-14 2781
其实针对普通电子签名的话，直接下载这个插件打开里面的docs文件引入js，css和index直接运行就是一个电子签名面板了，很实用，功能和性能都是比较好的，插件地址szimek/signature_pad还有其中有个app.js文件也需要引入，如果不引入里面的功能都用不了，主要是几个按钮的方法，如果不需要的可以删除。css样式中 .signature-pad这个类名的flex-direction值...
Vue2 移动端H5 签名功能
qq_45371174的博客
07-03 651
本人在项目中使用Vant组件库，使用van-popup进行签名区域展示（弹窗部分参考代码如下）。1、使用npm 安装 smooth-signature。
vue 签名组件
weixin_45936275的博客
01-13 345
[github地址](https://github.com/JaimeCheng/vue-esign) yarn add vue-esign
vue2移动端电子手签封装
weixin_48198130的博客
01-09 106
【代码】vue2移动端电子手签封装。
vue-signature-pad在vue中实现电子签名
m0_56175362的博客
11-18 3633
首页需要下载依赖包 npm install --save vue-signature-pad 这里使用的是全局引用组件在main.js中 import Vue from "vue"; <--引入--> import VueSignaturePad from "vue-signature-pad"; <--注册组件-> Vue.use(VueSignaturePad); 在页面中使用组件 <vue-signature-pad id="signature" width=
电子签名组件Vue
weixin_55846296的博客
06-24 738
<template> <div class="signatureBox"> <div class="canvasBox" ref="canvasHW"> <div class="closeBox"> <span>请签名</span> <p @click="close">X</p> </div> <canvas
vue2和vue3setup（写字）签名
weixin_54645059的博客
10-28 800
签名签名
vue实现鼠标电子签名（集合）
weixin_60886885的博客
04-19 1201
一、01.在main.js中引入02.在页面中引用03.说明04.返回数据为base64 具体看你返回的数据05.清除二、vue实现手写签名并生成图片(vue2)实现PC端，用鼠标签名，并生成图片。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值