声明:这篇文章属于一个IT小白的我第一次发,技术内容引自网络。我只是一个搬运工和砖瓦工。
如果内容涉及侵权,请告知我可以删除文章。并且本代码属于技术交流无意涉嫌商业行为。
【内容】
实现在线的PDF文件签名,然后把签名的图片手动放大缩小移动。
【图解说明】
打开之后就是这个内容
1点击sign按钮出现签名框。然后在里面签名。
2 点击保存后自动跳出已写的签名图片,然后可以放大缩小关闭。
【代码】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>testFile</title>
<style>
/*ポップアップ*/
.msgDiv{
z-index:2;
padding: 40px;
width: 400px;
height: 400px;
background: white;
border: 1px solid #000;
position: absolute;
left:50%;
top:50px;
margin-left:-225px;
display: none;
}
#box {
top:20px;
left: 20px;
border: 2px dashed #adadad;
width: 200px;
height: 150px;
position: absolute;
display: none;
}
#background{
border: 1px solid #000;
width: 800px;
height: 800px;
background-color: white;
position: relative;
}
img {
width: 100%;
height: 100%;
cursor: move;
}
#canClose_icon{
top:-10px;
right:-10px;
width: 15px;
height: 15px;
position: absolute;
}
#canScale_icon {
width: 10px;
height: 10px;
overflow: hidden;
cursor: se-resize;
position: absolute;
right: 0;
bottom: 0;
background-color: red;
}
#image_png{
}
</style>
<script
src="http://code.jquery.com/jquery-1.12.4.js"
integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
crossorigin="anonymous"></script>
<script>
$(function() {
//