适应jquery原生html，实现签名功能

一意估行

已于 2024-04-17 09:03:45 修改

阅读量59

点赞数

文章标签： jquery html 前端

于 2024-01-18 15:49:30 首次发布

原文链接：https://www.cnblogs.com/langmohua/p/15078976.html

版权

先看效果图

引入资源

https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js

https://cdn.bootcdn.net/ajax/libs/jSignature/2.1.3/flashcanvas.js

https://cdn.bootcdn.net/ajax/libs/jSignature/2.1.3/jSignature.min.js

css部分

<style type="text/css">
    a {
        text-decoration: none;
    }
    a:hover {
        text-decoration: none;
    }
    #box {
        width: 100%;
        height: 400px;
        border: 1px solid #eaeaea;
    }
    canvas {
        height: 400px !important;
    }
    .abspan {
        color: #ffffff;
        display: block;
        width: 100px;
        font-size: 16px;
        text-align: center;
        line-height: 40px;
        background: dodgerblue;
        margin-bottom: 10px;
    }
</style>

body部分

<body>
    <div style="margin: 12px;">
        <div class="form-group">
            <label class="col-sm-3 control-label">本人姓名确认</label>
            <div class="col-sm-8">
                <div id="box">
                </div>
                <span class="abspan" id="su">确认</span>
                <span class="abspan" id="re">重置</span>
                <img src="" alt="" id="image">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-8 col-sm-offset-3">
                <a id="save" class="btn btn-primary" οnclick="javascript:save()">提交</a>    
            </div>
        </div>
        </form>
    </div>
</body>

js部分

<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jSignature/2.1.3/flashcanvas.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jSignature/2.1.3/jSignature.min.js"></script>
<script>
    $(function () {
        $("#box").jSignature(); //初始化画板，初始化之后就可以进行操作
    });

    function save() {
        //先将图片保存到服务器，在把其他表单数据提交到服务器（具体如何关联取决业务）
        saveImage();
        saveForm();
    }
    //点击事件为获取base64数据，生成图片
    document.getElementById("su").onclick = function () {
        //getData:获取数据
        //reset：复位/重置
        // 获取签名的“base64”数据对
        var datapair = $("#box").jSignature("getData", "image");
        //此处打印的是完整的base64转码，可以复制后去在线转码测试一下是否正常
        console.log('data:' + datapair[0] + "," + datapair[1])
        //将图片展示出来
        $("#image").attr('src', 'data:' + datapair[0] + "," + datapair[1]);
    }
    //生成图片之后我们就可以进行相应的操作

    //点击事件为重置画板
    document.getElementById("re").onclick = function () {
        $("#box").jSignature("reset");
        $("#image").attr('src', '');
    }
    var url = ''; //设置你们的url
    //保存整个表单在此之前已经将图片上传到服务器了
    function saveForm() {
        $.ajax({
            cache: true,
            type: "POST",
            url: url,
            data: $('#form').serialize(), // 你的formid
            async: false,
            error: function (request) {
                alert("网络超时");
            },
            success: function (data) {
                console.log(data)
            }
        });
    }
    //重点来了，该方法将Base64格式转换成流格式
    function base64toFile(dataurl, filename) {
        let arr = dataurl.split(',')
        let mime = arr[0].match(/:(.*?);/)[1]
        let suffix = mime.split('/')[1]
        let bstr = atob(arr[1])
        let n = bstr.length
        let u8arr = new Uint8Array(n)
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
        }
        return new File([u8arr], `${filename}.${suffix}`, {
            type: mime
        })
    }

    function saveImage() {
        var url = ''; //设置你们的url
        var datapair = $("#box").jSignature("getData", "image"); //将canvas里面的数据转换成base64数组
        var imgBase64 = 'data:' + datapair[0] + "," + datapair[1]; //封装成正确的base64
        var file = base64toFile(imgBase64, 'file'); //base64转换成流文件，可以打印出来看下
        let formData = new FormData() //封装成formData格式
        formData.append('type', 97);
        formData.append('file', file)
        $.ajax({
            contentType: false, //不可少
            processData: false, //不可少
            type: "POST",
            url: url,
            data: formData,
            async: false,
            error: function (request) {
                alert("网络超时");
            },
            success: function (data) {
                console.log(data)
            }
        });
    }
</script>

全部代码

<template>
	<view class="kefu-info">
		<u-navbar :placeholder="true" leftIconColor="#F48B15" @leftClick="goBack()">
			<view class="" slot="center">
				我的客服
			</view>
		</u-navbar>
		<view class="box-one">
			<view class="tit">客服热线</view>
			<view class="rong">
				<view class="item" @click="bd(hotline1)">
					<image mode="widthFix" src="/static/svg/dianhua.svg"></image>
					<view class="hm">{{ hotline1 }}</view>
				</view>
				<view class="item" @click="bd(hotline2)">
					<image mode="widthFix" src="/static/svg/dianhua.svg"></image>
					<view class="hm">{{ hotline2 }}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			hotline1: '17633565891',
			hotline2: '17633565891',
		}
	},
	methods: {
		goBack() {
			uni.navigateBack({
				delta: 1,
			})
		},
		bd(num) {
			uni.makePhoneCall({
				phoneNumber: num,
			});
		}
	}
}
</script>
<style scoped  lang="scss">
.box-one {
	padding: 0 16px;

	.tit {
		font-size: 36rpx;
		color: #333;
		font-weight: 600;
	}

	.rong {
		display: flex;

		.item {
			width: 50%;
			padding: 4vh 0 2vh 0;

			image {
				width: 18%;
				margin-left: 41%;
			}

			.hm {
				text-align: center;
				color: #666;
				font-size: 32rpx;
			}
		}
	}
}</style>

主要内容来源：博客园 https://www.cnblogs.com/langmohua/p/15078976.html