<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>电子签名生成图片</title>
|
<script src="../../js/jquery-3.5.1.min.js"></script>
|
<script src="./js/jSignature.js"></script>
|
|
<script src="../../js/vue/vue.js"></script>
|
<script src="../../js/vue/axios/dist/axios.min.js"></script>
|
<script src="../../js/vue/element-ui/lib/index.js"></script>
|
<script src="../../js/common.js"></script>
|
<script src="../../js/myelement.js"></script>
|
<script src="../../js/vue/page.js"></script>
|
|
<link href="../../js/vue/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
|
<link href="../../css/myelement.css" rel="stylesheet">
|
<link href="../../css/iconfont.css" rel="stylesheet">
|
<link href="../../css/page.css" rel="stylesheet">
|
<link href="//at.alicdn.com/t/font_2374495_mkoo966o0uo.css" rel="stylesheet">
|
|
</head>
|
<body>
|
<div id="vbody">
|
<div id="page_root">
|
<div ref="popup_body" style="width: 100vw; height: 100vh;">
|
<div class="el-dialog__header">
|
<div class="dialog-title">
|
<span>{{title}}</span>
|
<div style="float: right;">
|
<el-button-group style="margin-left: 3px;">
|
<el-button type="primary" @click="saveImg">保 存</el-button>
|
<el-button type="default" @click="saveAfter">取 消</el-button>
|
</el-button-group>
|
</div>
|
</div>
|
</div>
|
<div class="versionNo" >
|
<div id="writers" >
|
<div id='signature' style='background-color: #d2d2e8;'></div>
|
<!-- <div>
|
<el-image
|
v-if="isSignature"
|
style="height: 300px; width: 100%;"
|
:src="file_img"
|
fit="contain">
|
</el-image>
|
</div> -->
|
<div style="width: 100%; padding: 5px;" align="center">
|
<el-button @click="rewrite">重 写</el-button>
|
<el-button @click="confirm">预 览</el-button>
|
</div>
|
<div id="someelement" ><img :src="file_img" id="images"></div>
|
|
</div>
|
</div>
|
|
</div>
|
</div>
|
<div id="page_loading" style="position: absolute; top:0px; width: 100vw; height: 100vh;">
|
<div class="spinner">
|
<div class="cube1"></div>
|
<div class="cube2"></div>
|
</div>
|
</div>
|
</div>
|
|
<script>
|
new Vue({
|
el: "#vbody",
|
data: {
|
title: localStorage.getItem("emp_name") + "签名",
|
popupParames: {},
|
conversions: null,
|
isSignature:false,
|
file_img:"",
|
},
|
created() {
|
this.popupParames = clone(Root.popupParames);
|
this.initData();
|
},
|
mounted() {
|
this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
|
document.getElementById('page_root').style.display = "block";
|
document.getElementById('page_loading').style.display = "none";
|
this.initJSignature();
|
//重新设置弹窗宽高
|
this.$nextTick(function() {
|
let w_ = this.$refs.popup_body.offsetWidth + "px";
|
let h_ = this.$refs.popup_body.offsetHeight + "px";
|
Root.setPopupWH(w_, h_);
|
})
|
});
|
},
|
|
methods: {
|
closeDialog() {
|
if (this.popupParames.totab){
|
Root.tab.removeItem(Root.tab.selected);
|
Root.tab.open(me.popupParames.parentOption, false);
|
}
|
else {
|
Root.hidePopup();
|
}
|
},
|
initData() {
|
var param_ = {
|
isClientMode: false,
|
dataname:"user",
|
filter:"id = '" + localStorage.getItem("id") + "'"
|
};
|
let me = this;
|
Server.call("root/data/getEntity", param_, function(result) {
|
if (result && result.success) {
|
if (result.data.entity.signature) {
|
me.isSignature = true;
|
me.getPDF(result.data.entity.signature);
|
} else{
|
me.isSignature = false;
|
}
|
} else{
|
Root.message({
|
type:"warning",
|
message:"查询签名信息失败"
|
})
|
}
|
});
|
},
|
getPDF(fileid) {
|
var me =this;
|
getDownloadFileUrl(fileid, true, function(result_) {
|
|
if (result_.data && result_.data.path) {
|
var file_img_ = "";
|
var path_ = result_.data.path;
|
if (path_.substring(0, 5) == "root/") {
|
file_img_ = window.top.RootSetting.url_file + path_.substring(5);
|
}
|
me.file_img = file_img_;
|
}
|
});
|
|
},
|
saveAfter() {
|
var me = this;
|
if(this.popupParames.callback) {
|
let obj = {
|
signature: this.isSignature
|
}
|
this.popupParames.callback(obj, function() {
|
if (me.popupParames.totab){
|
Root.tab.removeItem(Root.tab.selected);
|
Root.tab.open(me.popupParames.parentOption, false);
|
}
|
else {
|
Root.hidePopup();
|
}
|
});
|
}
|
else {
|
alert("该按键事件缺失！")
|
}
|
},
|
|
saveImg() {
|
var me = this;
|
|
this.confirm();
|
|
var formData = new FormData();
|
formData.append("upfile", this.conversions,"image.png");
|
me.uploadFile(me, formData, result_ => {
|
var ids = result_.data.data.ids;
|
var paramObj = {};
|
paramObj.id = localStorage.getItem("id");
|
|
paramObj.signature = ids[0];
|
var param_ = paramObj;
|
Server.call("root/data/updateEntity/" + "user", param_, function(result) {
|
console.log(result);
|
Root.message({
|
type: 'success',
|
message: '已保存'
|
});
|
me.isSignature = true;
|
me.saveAfter();
|
});
|
|
|
})
|
},
|
uploadFile(vue, formData, callback, error_callback) {
|
var user_id = localStorage.getItem("id");
|
uploadAxios.post(baseUrl +'file/exec?userId=' + user_id, formData).then(data_ => {
|
vue.$message({
|
showClose: true,
|
message: '上传成功！',
|
type: 'success'
|
});
|
if (callback) {
|
callback(data_);
|
}
|
}).catch(error => {
|
vue.$message({
|
showClose: true,
|
message: ':请求出现错误:' + error,
|
type: 'error'
|
});
|
console.error(error);
|
if (error_callback) {
|
error_callback(error);
|
}
|
});
|
},
|
//初始化插件
|
initJSignature() {
|
var arguments = {
|
width: '100%',
|
signatureLine: false,//去除默认画布上那条横线
|
lineWidth: '5'
|
};
|
|
$("#signature").jSignature(arguments);
|
},
|
|
//重置画布，可以进行重新作画
|
rewrite() {
|
this.file_img = ""
|
$("#signature").jSignature("reset");
|
$("#images").attr('src','');
|
|
},
|
|
//点击确定按钮,把签名的转成图片,然后把数据放进图片中,最后把图片中的数据传到后台
|
confirm() {
|
//将画布内容转换为图片
|
var $signature = $("#signature")
|
var datapair = $signature.jSignature("getData", "image");
|
$("#images").attr('src','data:' + datapair[0] + "," + datapair[1]);
|
var file = $("#images").attr('src');//拿到图片中的src，这就是我们需要的base64
|
console.info(file);
|
|
//let file = img.src; // 把整个base64给file
|
var filename = localStorage.getItem("emp_name") + "签名";
|
let name = filename + ".png"; // 定义文件名字（例如：cober.png）
|
var type = "image/png"; // 定义图片类型（canvas转的图片一般都是png，也可以指定其他类型）
|
this.conversions = this.base64ToBlob(file, type); // 调用base64转图片方法
|
},
|
// conversions 就是转化之后的图片文件，
|
base64ToBlob(urlData, type) {
|
let arr = urlData.split(',');
|
let mime = arr[0].match(/:(.*?);/)[1] || type;
|
// 去掉url的头，并转化为byte
|
let bytes = window.atob(arr[1]);
|
// 处理异常,将ascii码小于0的转换为大于0
|
let ab = new ArrayBuffer(bytes.length);
|
// 生成视图（直接针对内存）：8位无符号整数，长度1个字节
|
let ia = new Uint8Array(ab);
|
for (let i = 0; i < bytes.length; i++) {
|
ia[i] = bytes.charCodeAt(i);
|
}
|
return new Blob([ab], {
|
type: mime
|
});
|
},
|
|
|
|
}
|
});
|
|
</script>
|
|
</body>
|
</html>
|
