【Vue/Js】通过jSignature插件实现h5签名的完整可运行实例，横屏、竖屏两个实例（代码完整，直接运行）
敦厚的曹操
已于 2023-03-19 16:45:24 修改
阅读量1.9k
收藏
1
点赞数
已于 2023-03-19 16:45:24 修改
阅读量1.9k
收藏
1
点赞数
于 2023-03-18 12:00:31 首次发布
一、插件安装：
http://willowsystems.github.io/jSignature/#/about/
二、竖屏实例
注意：css中的# #signature {}与js中的初始化jSignature插件 $sigdiv.jSignature({})相呼应，这块是个坑呀！网上很有人说清这个坑。
#signature {
border: 2px solid #000;
/* 设置边框 */
border-radius: 4px;
/* 设置边框圆角 */
height: 500px;
/* 设置签名区域的高度 */
width: 96%;
/* 设置签名区域的宽度 */
background-color: rgb(255, 255, 255);
color: rgb(255, 0, 0);
margin: 0 auto;
}
// 初始化jSignature插件
$sigdiv.jSignature({
"decor-color": "transparent",
"height": "100%",
"width": "100%"
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>签名系统</title>
</head>
<script type="text/javascript" src="js/vue/vue.js"></script>
<script type="text/javascript" src="js/jquery/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="js/jSignature/jSignature.min.js"></script>
<link rel="stylesheet" href="css/body.css">
<link href="js/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<style>
body {
background-color: rgb(243, 243, 243);
}
#box {
width: 100%;
height: 100%;
background-color: rgb(225, 225, 225);
}
#signature {
border: 2px solid #000;
/* 设置边框 */
border-radius: 4px;
/* 设置边框圆角 */
height: 500px;
/* 设置签名区域的高度 */
width: 96%;
/* 设置签名区域的宽度 */
background-color: rgb(255, 255, 255);
color: rgb(255, 0, 0);
margin: 0 auto;
}
/* #region ========== search顶部导航区 ============= */
#box {
overflow: hidden;
}
#search {
width: 100%;
height: 55px;
background-color: #2f63a7;
padding-right: 10px;
}
/* 左箭头 */
#search .left-class {
padding-left: 15px;
padding-top: 10px;
font-size: 18px;
color: white;
overflow: hidden;
}
#search .left-class span {
display: block;
float: left;
line-height: 28px;
margin-right: 10px;
}
#search .left-class span:nth-child(2) {
line-height: 32px;
}
/* #endregion */
.sign_title {
width: 94%;
height: 55px;
background-color: #000000;
padding-right: 10px;
margin: 0 auto;
margin-top: 20px;
text-align: center;
font-size: 18px;
font-weight: bold;
line-height: 55px;
color: white;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#signature {
border: 2px solid #000;
/* 设置边框 */
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
/* 设置边框圆角 */
height: 250px;
/* 设置签名区域的高度 */
width: 95.5%;
/* 设置签名区域的宽度 */
background-color: rgb(255, 255, 255);
color: rgb(255, 0, 0);
margin-top: -2px;
}
#writers {
width: 100%;
height: 60px;
text-align: center;
margin-top: 30px;
/* background-color: rgb(232, 167, 167); */
}
.bt_1 {
width: 40%;
height: 50px;
background-color: rgb(47, 99, 167);
color: white;
font-size: 20px;
border: 0px;
border-radius: 5px;
}
</style>
<body>
<!-- search顶部导航 -->
<div id="search">
<div class="left-class" onclick="javascript:history.back(-1);">
<span>
<i class="fa fa-angle-left fa-lg"></i>
</span>
<span>
返回
</span>
</div>
</div>
<div class="sign_title">
【签名区】
</div>
<div id='signature'></div>
<div id="writers">
<button class="bt_1" type="button" id="reset">清除重签</button>
<span> </span>
<button class="bt_1" type="button" id="yes">确认提交</button>
</div>
<div id="someelement"><img src="" id="images"></div>
</body>
<script type="text/javascript">
// 获取签名区域
var $sigdiv = $("#signature");
// 初始化jSignature插件
$sigdiv.jSignature({
"decor-color": "transparent",
"height": "100%",
"width": "100%"
});
//重置画布，清楚笔记
$("#reset").click(function () {
$("#signature").jSignature("reset"); //重置画布，可以进行重新作画
$("#images").attr('src', '');
});
//点击关闭按钮，让签名div隐藏，签名按钮显示出来
$("#close").click(function () {
$("#signature").remove();
$("#writers").hide();
$("#write").show();
});
//点击确定按钮,把签名的转成图片,然后把数据放进图片中,最后把图片中的数据传到后台
$("#yes").click(function () {
//将画布内容转换为图片
var $signature = $("#signature")
var datapair = $signature.jSignature("getData", "image");
$("#images").attr('src', 'data:' + datapair[0] + "," + datapair[1]);
var src_data = $("#images").attr('src');//拿到图片中的src，这就是我们需要的base64
console.info(src_data);
//在这里就写我们的后台操作
http({
data: {
encode: src_data,
projectId: projectId,
institutionsId: institutionsId
},
url: 'projectFile/save',
type: 'post',
dataType: 'json',
success: function (data) {
}
})
});
</script>
</html>三、横屏实例
1、这个实例是在网上找的，运行时，还需要以下文件：
2、运行效果：
3、完整代码及用到的第三方文件，请在下面的链接获取。
4、主页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加手写签名</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- <meta name="viewport" content="initial-scale=1.0, target-densitydpi=device-dpi" /> -->
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jSignature.min.js"></script>
<link rel="stylesheet" href="css/index.css">
</head>
<style type="text/css">
.buttonWrap {
justify-content: flex-end;
}
</style>
<body>
<div class="signature_wrap" id="signature_wrap">
<div class="placeholderBox">
<div v-if="isSignaturePadEmpty" class="sign-tips">
<div class="sign-tip">请使用正楷书写签名</div>
<div class="sign-tip">保证字迹清晰可辨</div>
</div>
</div>
<div class="signTip">
<div class="subSignTip">
<span>添</span><span>加</span><span>手</span><span>写</span><span>签</span><span>名</span>
</div>
</div>
<div id="signature"></div>
<div class="buttonWrap">
<style type="text/css">
.cz-btn{
width: 50px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: #1EAFE9;
border-radius: 3px;
margin-right: 10px;
color:#FFFFFF;
}
.cz-btn-box{
width: 130px;
transform: rotate(90deg);
margin-bottom: 50px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<div class="cz-btn-box">
<span class="cz-btn" id="changeToImg">提交</span>
<span class="cz-btn" id="reset">清空</span>
</div>
</div>
</div>
<!-- <p>图片预览：</p>
<div id="imgShow"></div> -->
<div class="shadowBox">
请旋转屏幕再浏览
</div>
<script>
var signObj = $('#signature');
var evt = "onorientationchange" in window ? "orientationchange" : "resize";
window.addEventListener(evt, resize, false);
// 监听屏幕旋转
function resize(fals) {
var currDeviceObj = currDevice();
if (window.orientation == 0 || window.orientation == 180) {
if ($('.shadowBox').hasClass('active')) {
window.location.reload()
}
} else {
if (currDeviceObj.mobile) {
if (!currDevice.iPad) {
$('.shadowBox').addClass('active')
} else {
$('.shadowBox').removeClass('active')
}
}
}
}
resize(true);
$(function () {
var currDeviceObj = currDevice();
var whArr = deviceBrowserWH();
if(whArr[0]>whArr[1]){
// 横屏
$('.signTip').css({
width: '100vw'
});
if(currDeviceObj.mobile){
if (!currDevice.iPad) {
$('.shadowBox').addClass('active')
}else{
$('.shadowBox').removeClass('active')
}
}
} else {
$('.subSignTip span,.buttonWrap img').css({
transform: 'rotate(90deg)',
display: 'inline-block'
});
}
// 初始化画布
signObj.jSignature({
width: '100vw',
height: '100vh',
'UndoButton': false,
lineWidth: 5,
color: '#000'
});
$("#signature").bind('change', function (e) {
$('.placeholderBox').hide();
})
// 清空画布
$('#reset').click(function () {
signObj.jSignature("reset");
$('.placeholderBox').show();
})
// 转换成图片
$('#changeToImg').click(function () {
convertToImg();
})
})
/**
* 获取设备、浏览器的宽度和高度
* @returns
*/
function deviceBrowserWH() {
//获取浏览器窗口的内部宽高 - IE9+、chrome、firefox、Opera、Safari：
var w = window.innerWidth;
var h = window.innerHeight;
// HTML文档所在窗口的当前宽高 - IE8.7.6.5
document.documentElement.clientWidth;
document.documentElement.clientHeight;
document.body.clientWidth;
document.body.clientHeight;
var screenW = window.screen.width;//设备的宽度
var screenH = document.body.clientHeight;
//网页可见区域宽高，不包括工具栏和滚动条（浏览器窗口可视区域大小）
var webpageVisibleW = document.documentElement.clientWidth || document.body.clientWidth;
var webpageVisibleH = document.documentElement.clientHeight || document.body.clientHeight;
//网页正文全文宽高(不包括滚动条)
var webpageW = document.documentElement.scrollWidth || document.body.scrollWidth;
var webpageH = document.documentElement.scrollHeight || document.body.scrollHeight;
//网页可见区域宽高，包括滚动条等边线（会随窗口的显示大小改变）
var webpageVisibleW2 = document.documentElement.offsetWidth || document.body.offsetWidth;
var webpageVisibleH2 = document.documentElement.offsetHeight || document.body.offsetHeight;
return [w,h]
//网页卷去的距离与偏移量
/*
1.scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离；
2.scrollTop:设置或获取位于给定对象最顶端与窗口中目前可见内容的最左端之间的距离；
3.offsetLeft:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置；
4.offsetTop:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置；
*/
}
/**
* 判断当前设备
* @returns
*/
function currDevice() {
var u = navigator.userAgent;
var app = navigator.appVersion;// appVersion 可返回浏览器的平台和版本信息。该属性是一个只读的字符串。
var browserLang = (navigator.browserLanguage || navigator.language).toLowerCase(); //获取浏览器语言
var deviceBrowser = function () {
return {
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1, //是否web应用程序，没有头部和底部
weixin: u.indexOf('MicroMessenger') > -1, //是否微信
qq: u.match(/\sQQ/i) == " qq", //是否QQ
}
}();
console.log(deviceBrowser);
return deviceBrowser;
}
// 获取当前生成的图片
function convertToImg() {
//可选格式：native,image,base30,image/jsignature;base30,svg,image/svg+xml,svgbase64,image/svg+xml;base64
// var dataStr = "data:" + $("#signature").jSignature('getData', "image");
var dataStr = "data:" + $("#signature").jSignature('getData', "svgbase64");
localStorage.setItem('userImg',dataStr);
console.log(dataStr);
// location.href="sueccess.html";
}
</script>
</body>
</html>4、完整代码及用到的第三方文件，请在下面的链接获取。
https://download.csdn.net/download/dxnn520/87591750
https://download.csdn.net/download/dxnn520/87591750
1775
邯郸市云虫网络科技有限责任公司
到【灌水乐园】发言
qq_24873801: 不行，有的小程序根本不显示在这个列表里面，很流氓
社稷瑰宝: 大佬如何默认选中一个
awmooo1: 早取消了，不让公众号复用认证了
CSDN-Ada助手: 哇, 你的文章质量真不错，值得学习！不过这么高质量的文章, 还值得进一步提升, 以下的改进点你可以参考下: (1)起一个更符合文章内容的标题；(2)提升标题与正文的相关性；(3)使用更多的站内链接。
2301_77529681: 我想问一下，在哪里写