1. Plug-in installation:
http://willowsystems.github.io/jSignature/#/about/
2. Vertical screen example
Note: # #signature {} in css corresponds to the initialization jSignature plugin $sigdiv.jSignature({}) in js, this is a trap! There are many people on the Internet who have clarified this pit.
#signature {
border: 2px solid #000;
/* set border */
border-radius: 4px;
/* Set border rounded corners */
height: 500px;
/* Set the height of the signature area */
width: 96%;
/* Set the width of the signature area */
background-color: rgb(255, 255, 255);
color: rgb(255, 0, 0);
margin: 0 auto;
}
// Initialize the jSignature plugin
$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>Signature System</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;
/* set border */
border-radius: 4px;
/* Set border rounded corners */
height: 500px;
/* Set the height of the signature area */
width: 96%;
/* Set the width of the signature area */
background-color: rgb(255, 255, 255);
color: rgb(255, 0, 0);
margin: 0 auto;
}
/* #region ========== search top navigation area ============== */
#box {
overflow: hidden;
}
#search {
width: 100%;
height: 55px;
background-color: #2f63a7;
padding-right: 10px;
}
/* left arrow */
#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;
/* set border */
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
/* Set border rounded corners */
height: 250px;
/* Set the height of the signature area */
width: 95.5%;
/* Set the width of the signature area */
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 top navigation -->
<div id="search">
<div class="left-class" onclick="javascript:history.back(-1);">
<span>
<i class="fa fa-angle-left fa-lg"></i>
</span>
<span>
return
</span>
</div>
</div>
<div class="sign_title">
【Signature area】
</div>
<div id='signature'></div>
<div id="writers">
<button class="bt_1" type="button" id="reset">Clear resigned</button>
<span>  </span>
<button class="bt_1" type="button" id="yes">Confirm submission</button>
</div>
<div id="someelement"><img src="" id="images"></div>
</body>
<script type="text/javascript">
// Get signature area
var $sigdiv = $("#signature");
// Initialize the jSignature plugin
$sigdiv. jSignature({
"decor-color": "transparent",
"height": "100%",
"width": "100%"
});
//Reset the canvas, clear notes
$("#reset"). click(function () {
$("#signature").jSignature("reset"); //Reset the canvas, you can repaint
$("#images").attr('src', '');
});
//Click the close button to hide the signature div and display the signature button
$("#close"). click(function () {
$("#signature"). remove();
$("#writers").hide();
$("#write").show();
});
//Click the OK button to convert the signature into a picture, then put the data into the picture, and finally transfer the data in the picture to the background
$("#yes"). click(function () {
// Convert the canvas content to an image
var $signature = $("#signature")
var datapair = $signature. jSignature("getData", "image");
$("#images").attr('src', 'data:' + datapair[0] + "," + datapair[1]);
var src_data = $("#images").attr('src');//Get the src in the picture, this is the base64 we need
console.info(src_data);
//Write our background operation here
http({
data: {
encode: src_data,
projectId: projectId,
institutionsId: institutionsId
},
url: 'projectFile/save',
type: 'post',
dataType: 'json',
success: function (data) {
}
})
});
</script>
</html>
3. Horizontal screen example
1. This example is found on the Internet. When running, the following files are also required:
2. Operation effect:
3. For the complete code and the third-party files used, please get it from the link below.
https://download.csdn.net/download/dxnn520/87591750
https://download.csdn.net/download/dxnn520/87591750
4. Main page code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Add a handwritten signature</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 forces vertical screen -->
<meta name="screen-orientation" content="portrait">
<!-- QQ forced vertical screen -->
<meta name="x5-orientation" content="portrait">
<!-- UC force full screen -->
<meta name="full-screen" content="yes">
<!-- QQ forced full screen -->
<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">Please use block letters to write your signature</div>
<div class="sign-tip">Ensure that the writing is legible</div>
</div>
</div>
<div class="signTip">
<div class="subSignTip">
<span>Add</span><span>Add</span><span>Hand</span><span>Write</span><span>Sign</span><span>Name</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">Submit</span>
<span class="cz-btn" id="reset">Clear</span>
</div>
</div>
</div>
<!-- <p>Picture Preview:</p>
<div id="imgShow"></div> -->
<div class="shadowBox">
Please rotate the screen to browse
</div>
<script>
var signObj = $('#signature');
var evt = "onorientationchange" in window ? "orientationchange" : "resize";
window. addEventListener(evt, resize, false);
// monitor screen rotation
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]){
// horizontal screen
$('.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'
});
}
// Initialize the canvas
signObj.jSignature({
width: '100vw',
height: '100vh',
'UndoButton': false,
lineWidth: 5,
color: '#000'
});
$("#signature").bind('change', function (e) {
$('.placeholderBox').hide();
})
// clear the canvas
$('#reset'). click(function () {
signObj.jSignature("reset");
$('.placeholderBox').show();
})
// convert to image
$('#changeToImg'). click(function () {
convertToImg();
})
})
/**
* Get device, browser width and height
* @returns
*/
function deviceBrowserWH() {
//Get the inner width and height of the browser window - IE9+, chrome, firefox, Opera, Safari:
var w = window. innerWidth;
var h = window. innerHeight;
// The current width and height of the window where the HTML document is located - IE8.7.6.5
document.documentElement.clientWidth;
document.documentElement.clientHeight;
document.body.clientWidth;
document.body.clientHeight;
var screenW = window.screen.width;//The width of the device
var screenH = document.body.clientHeight;
//The width and height of the visible area of the web page, excluding toolbars and scroll bars (the size of the visible area of the browser window)
var webpageVisibleW = document.documentElement.clientWidth || document.body.clientWidth;
var webpageVisibleH = document.documentElement.clientHeight || document.body.clientHeight;
//Width and height of the full text of the web page (excluding scroll bars)
var webpageW = document.documentElement.scrollWidth || document.body.scrollWidth;
var webpageH = document.documentElement.scrollHeight || document.body.scrollHeight;
//The width and height of the visible area of the web page, including scroll bars and other borders (will change with the display size of the window)
var webpageVisibleW2 = document.documentElement.offsetWidth || document.body.offsetWidth;
var webpageVisibleH2 = document.documentElement.offsetHeight || document.body.offsetHeight;
return [w,h]
//The distance and offset of the page volume
/*
1.scrollLeft: Set or get the distance between the left boundary of the given object and the leftmost end of the currently visible content in the window;
2.scrollTop: Set or get the distance between the topmost of the given object and the leftmost of the currently visible content in the window;
3. offsetLeft: Set or get the calculated left position of the given object relative to the layout or the parent coordinate specified by the offsetParent property;
4. offsetTop: Set or get the calculated top position of the given object relative to the layout or the parent coordinate specified by the offsetParent attribute;
*/
}
/**
* Determine the current device
* @returns
*/
function currDevice() {
var u = navigator. userAgent;
var app = navigator.appVersion;// appVersion can return the platform and version information of the browser. This property is a read-only string.
var browserLang = (navigator.browserLanguage || navigator.language).toLowerCase(); //Get browser language
var deviceBrowser = function () {
return {
trident: u.indexOf('Trident') > -1, //IE core
presto: u.indexOf('Presto') > -1, //opera core
webKit: u.indexOf('AppleWebKit') > -1, //Apple, Google kernel
gecko: u.indexOf('Gecko') > -1 & amp; & amp; u.indexOf('KHTML') == -1, //Firefox core
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //Whether it is a mobile terminal
ios: !!u.match(/\(i[^;] + ;( U;)? CPU.Mac OS X/), //ios terminal
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android terminal or uc browser
iPhone: u.indexOf('iPhone') > -1, //Whether it is iPhone or QQHD browser
iPad: u.indexOf('iPad') > -1, //Whether iPad
webApp: u.indexOf('Safari') == -1, //whether it is a web application, without head and bottom
weixin: u.indexOf('MicroMessenger') > -1, //Whether WeChat or not
qq: u.match(/\sQQ/i) == "qq", //whether QQ
}
}();
console.log(deviceBrowser);
return deviceBrowser;
}
// Get the currently generated image
function convertToImg() {
//Optional formats: 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="suaccess.html";
}
</script>
</body>
</html>
4. For the complete code and the third-party files used, please get it from the link below.
https://download.csdn.net/download/dxnn520/87591750https://download.csdn.net/download/dxnn520/87591750