|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta charset="UTF-8">
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>手写签名版</title>
|
|
|
<script src="../Scripts/jquery-1.11.0.min.js"></script>
|
|
|
<script type="text/javascript" src="../Scripts/bootstrap/js/jquery.min.js"></script>
|
|
|
<script type="text/javascript" src="../Scripts/bootstrap/js/bootstrap.min.js"></script>
|
|
|
<script type="text/javascript" src="../Scripts/QueryString.js"></script>
|
|
|
<script type="text/javascript" src="../Scripts/config.js"></script>
|
|
|
<script type="text/javascript" src="../Comm/Gener.js"></script>
|
|
|
<script src="../Scripts/jq-signature.min.js" type="text/javascript"></script>
|
|
|
<script src="../Scripts/jq-signature.js" type="text/javascript"></script>
|
|
|
<style>
|
|
|
* {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
}
|
|
|
|
|
|
.clearfix:after {
|
|
|
visibility: hidden;
|
|
|
display: block;
|
|
|
font-size: 0;
|
|
|
content: " ";
|
|
|
clear: both;
|
|
|
height: 0;
|
|
|
}
|
|
|
|
|
|
.clearfix {
|
|
|
*zoom: 1;
|
|
|
}
|
|
|
|
|
|
.wapr_nav {
|
|
|
border-bottom: 2px solid #ccc;
|
|
|
}
|
|
|
|
|
|
.wapr_nav_left {
|
|
|
margin: 10px 0;
|
|
|
padding: 0 20px;
|
|
|
float: left;
|
|
|
font-size: 15px;
|
|
|
color: #333;
|
|
|
text-align: center;
|
|
|
line-height: 30px;
|
|
|
border-right: 1px solid #ccc;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.wapr_nav_right {
|
|
|
float: right;
|
|
|
margin: 10px 0;
|
|
|
padding: 0 20px;
|
|
|
font-size: 15px;
|
|
|
color: #333;
|
|
|
text-align: center;
|
|
|
line-height: 30px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.wapr_nav_left_img1 {
|
|
|
display: block;
|
|
|
width: 15px;
|
|
|
height: 15px;
|
|
|
background: url(Img/1.png) no-repeat;
|
|
|
margin-left: 7px;
|
|
|
}
|
|
|
|
|
|
.wapr_nav_left_img2 {
|
|
|
display: block;
|
|
|
width: 15px;
|
|
|
height: 15px;
|
|
|
background: url(Img/2.png) no-repeat;
|
|
|
margin-left: 7px;
|
|
|
}
|
|
|
|
|
|
.wapr_nav_left_img3 {
|
|
|
display: block;
|
|
|
width: 15px;
|
|
|
height: 15px;
|
|
|
background: url(Img/3.png) no-repeat;
|
|
|
margin-left: 7px;
|
|
|
}
|
|
|
|
|
|
.wapr_nav_left_img4 {
|
|
|
display: block;
|
|
|
width: 15px;
|
|
|
height: 15px;
|
|
|
background: url(Img/4.png) no-repeat;
|
|
|
margin-left: 7px;
|
|
|
}
|
|
|
|
|
|
.qudiao {
|
|
|
border-right: none;
|
|
|
}
|
|
|
|
|
|
.qianziban {
|
|
|
}
|
|
|
|
|
|
#addImg input {
|
|
|
position: absolute;
|
|
|
top: 5px;
|
|
|
right: 6px;
|
|
|
width: 60px;
|
|
|
/* color: #fff; */
|
|
|
height: 50px;
|
|
|
/* 重点代码让input隐藏 */
|
|
|
opacity: 0;
|
|
|
}
|
|
|
|
|
|
#addImg {
|
|
|
position: relative;
|
|
|
height: 40px;
|
|
|
width: 35px;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="wapr" id="sxb" style="height: 100%">
|
|
|
<div class="wapr_nav clearfix" id="button">
|
|
|
<div id="saveBtn" onclick="saveSignature();" class="wapr_nav_left"><span class="wapr_nav_left_img1"></span>保存</div>
|
|
|
<div id="addImg" onclick="AddImg()" class="wapr_nav_left"><span class="wapr_nav_left_img2"></span>插入<input id="inputImg" type="file" /></div>
|
|
|
|
|
|
<div id="clearBtn" onclick="clearCanvas()" class="wapr_nav_left qudiao"><span class="wapr_nav_left_img3"></span>重置</div>
|
|
|
<!-- <div class="wapr_nav_right"><span class="wapr_nav_left_img4"></span>取消</div>-->
|
|
|
</div>
|
|
|
<div id="signature" class="js-signature" data-border="0px solid black" data-line-color="#bc0000"
|
|
|
data-auto-fit="true">
|
|
|
</div>
|
|
|
</div>
|
|
|
<script type="text/javascript">
|
|
|
$(window).resize(function () {
|
|
|
Auto();
|
|
|
|
|
|
//ctx.restore();
|
|
|
});
|
|
|
function Auto() {
|
|
|
// 变化后需要做的事
|
|
|
var canvawidth = document.getElementById("signature").offsetWidth;
|
|
|
var canvaheight = document.getElementById("signature").offsetHeight;
|
|
|
var iframe = window.parent.document.getElementById("eudlgframe");
|
|
|
//console.log( )
|
|
|
document.body.style.height = iframe.offsetHeight + "px";
|
|
|
document.getElementById("signature").style.height = document.getElementById("sxb").offsetHeight - document.getElementById("button").offsetHeight + 'px';
|
|
|
document.getElementById("signature").style.width = document.getElementById("sxb").offsetWidth + 'px';
|
|
|
|
|
|
var canvas = $('#signature').children()[0];
|
|
|
var png = canvas.toDataURL("image/png")
|
|
|
var width = document.getElementById("signature").offsetWidth;
|
|
|
var height = document.getElementById("signature").offsetHeight;
|
|
|
canvas.width = width;
|
|
|
canvas.height = height;
|
|
|
canvas.style.width = width + 'px';
|
|
|
canvas.style.height = height + 'px';
|
|
|
//SavePC = pic;
|
|
|
//创建image对象
|
|
|
var imgObj = new Image();
|
|
|
imgObj.src = png;
|
|
|
var ctx = canvas.getContext("2d");
|
|
|
//待图片加载完后，将其显示在canvas上
|
|
|
imgObj.onload = function () {
|
|
|
// console.log(width+"========"+canvawidth);
|
|
|
ctx.strokeStyle = "#000";
|
|
|
ctx.drawImage(this, (width - canvawidth) / 2, (height - canvaheight) / 2);//this即是imgObj,保持图片的原始大小：470*480
|
|
|
//ctx.drawImage(this, 0, 0,1024,768);//改变图片的大小到1024*768
|
|
|
ctx.restore();
|
|
|
ctx.save();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
<script type="text/javascript">
|
|
|
var imagePath = "";
|
|
|
var SavePC = ""
|
|
|
$(document).on('ready', function () {
|
|
|
|
|
|
//alert('还未实现.');
|
|
|
//if ($('.js-signature').length) {
|
|
|
$('.js-signature').jqSignature();
|
|
|
document.getElementById("signature").style.width = document.getElementById("sxb").offsetWidth + 'px';
|
|
|
var canvas = $('#signature').children()[0];
|
|
|
//canvas.width = img.width;
|
|
|
canvas.height = 159;
|
|
|
canvas.style.height = "159px";
|
|
|
var ctx = canvas.getContext("2d");
|
|
|
ctx.strokeStyle = "#000";
|
|
|
ctx.restore();
|
|
|
//从缓存取出除父页面图片的二进制流
|
|
|
InsertImg("");
|
|
|
// }
|
|
|
Auto();
|
|
|
});
|
|
|
|
|
|
|
|
|
//插入
|
|
|
//在input file内容改变的时候触发事件
|
|
|
$('#inputImg').change(function () {
|
|
|
//获取input file的files文件数组;
|
|
|
//$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
|
|
|
//这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
|
|
|
var file = $('#inputImg').get(0).files[0];
|
|
|
//创建用来读取此文件的对象
|
|
|
var reader = new FileReader();
|
|
|
//使用该对象读取file文件
|
|
|
reader.readAsDataURL(file);
|
|
|
//读取文件成功后执行的方法函数
|
|
|
reader.onload = function (e) {
|
|
|
//读取成功后返回的一个参数e，整个的一个进度事件
|
|
|
console.log(e);
|
|
|
//选择所要显示图片的img，要赋值给img的src就是e中target下result里面
|
|
|
//转为base64编码格式的地址并加载到画布
|
|
|
InsertImg(e.target.result);
|
|
|
//是否是插入的图片
|
|
|
window.localStorage.setItem("InsertTmg", "true");
|
|
|
|
|
|
}
|
|
|
})
|
|
|
|
|
|
//加载保存的签名
|
|
|
function InsertImg(SavePC) {
|
|
|
if (SavePC == "")
|
|
|
SavePC = localStorage.getItem("writeImg");
|
|
|
var img = new Image();
|
|
|
var user = new WebUser();
|
|
|
var canvas = $('#signature').children()[0];
|
|
|
var ctx = canvas.getContext("2d");
|
|
|
if (!SavePC) {
|
|
|
img.src = "../../DataUser/Siganture/" + user.Name + ".png";
|
|
|
} else {
|
|
|
img.src = SavePC;
|
|
|
}
|
|
|
console.log(SavePC);
|
|
|
img.onload = function () {
|
|
|
//img.width="50px";
|
|
|
//img.height="100px";
|
|
|
|
|
|
ctx.strokeStyle = "#000";
|
|
|
ctx.drawImage(img, 0, 0, 340, 150);
|
|
|
if (!SavePC) {
|
|
|
var data = new Date();
|
|
|
var day = data.getDate();
|
|
|
var day1 = data.getMonth() + 1;
|
|
|
ctx.restore();
|
|
|
ctx.beginPath();
|
|
|
ctx.textBaseline = "middle";
|
|
|
ctx.textAlign = "center";
|
|
|
ctx.font = "bold 20px 宋体";
|
|
|
ctx.fillText(day1 + "." + day, 315, 150);
|
|
|
}
|
|
|
ctx.restore();
|
|
|
ctx.save();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function clearCanvas() {
|
|
|
//$('#signature').html('<p><em></em></p>');
|
|
|
$('.js-signature').eq(0).jqSignature('clearCanvas');
|
|
|
var canvas = $('#signature').children()[0]
|
|
|
var ctx = canvas.getContext("2d");
|
|
|
ctx.strokeStyle = "#000";
|
|
|
ctx.restore();
|
|
|
}
|
|
|
function isCanvasBlank(canvas) {
|
|
|
var blank = document.createElement('canvas');//系统获取一个空canvas对象
|
|
|
blank.width = canvas.width;
|
|
|
blank.height = canvas.height;
|
|
|
return canvas.toDataURL() == blank.toDataURL();//比较值相等则为空
|
|
|
}
|
|
|
function saveSignature() {
|
|
|
var canvas = $('#signature').children()[0];
|
|
|
if (isCanvasBlank(canvas)) {
|
|
|
SavePC = '';
|
|
|
} else {
|
|
|
$('#signature').empty();
|
|
|
var pic = $('.js-signature').jqSignature('getDataURL');
|
|
|
//var pic = $('.js-signature').eq(0).jSignature("getData", "svgbase64")
|
|
|
SavePC = pic;
|
|
|
}
|
|
|
//图片二进制流存入到缓存中
|
|
|
window.localStorage.setItem("writeImg", SavePC);
|
|
|
//console.log(SavePC+"pic=========");
|
|
|
var writType = GetQueryString("WritType");
|
|
|
// console.log(writType);
|
|
|
if (writType != null && writType != undefined && writType == "WorkCheck") {
|
|
|
//console.log("=============");
|
|
|
parent.setHandWriteSrc("WorkCheck", SavePC, 1);
|
|
|
return;
|
|
|
}
|
|
|
var newpic = pic.replace(/^data:image\/(png|jpg);base64,/, "");
|
|
|
var handler = new HttpHandler("BP.WF.HttpHandler.WF_CCForm");
|
|
|
handler.AddPara("FK_Node", GetQueryString("FK_Node"));
|
|
|
handler.AddPara("WorkID", GetQueryString("WorkID"));
|
|
|
handler.AddPara("FK_Flow", GetQueryString("FK_Flow"));
|
|
|
handler.AddPara("KeyOfEn", GetQueryString("KeyOfEn"));
|
|
|
handler.AddPara("imageData", newpic);
|
|
|
var data = handler.DoMethodReturnString("HandWriting_Save");
|
|
|
if (data.indexOf('err@') == 0) {
|
|
|
alert(data);
|
|
|
imagePath = "";
|
|
|
return;
|
|
|
}
|
|
|
if (data.indexOf('info@') == 0) {
|
|
|
imagePath = data.replace('info@', '');
|
|
|
parent.setHandWriteSrc(GetQueryString("KeyOfEn"), imagePath, 0);
|
|
|
}
|
|
|
|
|
|
alert("图片上传成功.");
|
|
|
}
|
|
|
|
|
|
$('.js-signature').eq(0).on('jq.signature.changed', function () {
|
|
|
window.localStorage.setItem("InsertTmg", "false");
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |