Html里canvas签名板签名，签字内容还可以手动放大缩小移动
声明：这篇文章属于一个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() {
//signボタンの動作
$("button").click(function () {
//canvasが出る
$(".msgDiv").css("display","block");
//描画コンテキストを真っ白にする
ct.fillStyle="rgb(255,255,255)";
ct.fillRect(0,0,can.getBoundingClientRect().width,can.getBoundingClientRect().height);
//出来上がった画像を表さない
$("#image_png").css("display","none");
$("#box").css("display","none");
});
//閉じるボタンの動作
$(".msgShut").click(function (){
//描画コンテキストを真っ白にする
ct.fillStyle="rgb(255,255,255)";
ct.fillRect(0,0,can.getBoundingClientRect().width,can.getBoundingClientRect().height);
//canvasが出ない
$(".msgDiv").css("display","none");
})
//保存ボタンの動作
$(".canRemove").click(function () {
//canvasが消え、出来上がった画像を表す
$(".msgDiv").css("display","none");
$("#image_png").css("display","block");
$("#box").css("display","block");
})
//canClose_iconにより、サイン拡縮動作を閉じる
$("#canClose_icon").click(function () {
$("#box").css("display","none");
})
});
//canvasのJS
var can;
var ct;
var ox=0,oy=0,x=0,y=0;
var mf=false;
function mam_draw_init(){
//初期設定
can=document.getElementById("can");
can.addEventListener("touchstart",onDown,false);
can.addEventListener("touchmove",onMove,false);
can.addEventListener("touchend",onUp,false);
can.addEventListener("mousedown",onMouseDown,false);
can.addEventListener("mousemove",onMouseMove,false);
can.addEventListener("mouseup",onMouseUp,false);
ct=can.getContext("2d");
ct.strokeStyle="#000000";
ct.lineWidth=5;
ct.lineJoin="round";
ct.lineCap="round";
clearCan();
}
function onDown(event){
mf=true;
ox=event.touches[0].pageX-event.target.getBoundingClientRect().left;
oy=event.touches[0].pageY-event.target.getBoundingClientRect().top;
event.stopPropagation();
}
function onMove(event){
if(mf){
x=event.touches[0].pageX-event.target.getBoundingClientRect().left;
y=event.touches[0].pageY-event.target.getBoundingClientRect().top;
drawLine();
ox=x;
oy=y;
event.preventDefault();
event.stopPropagation();
}
}
function onUp(event){
mf=false;
event.stopPropagation();
}
function onMouseDown(event){
ox=event.clientX-event.target.getBoundingClientRect().left;
oy=event.clientY-event.target.getBoundingClientRect().top ;
mf=true;
}
function onMouseMove(event){
if(mf){
x=event.clientX-event.target.getBoundingClientRect().left;
y=event.clientY-event.target.getBoundingClientRect().top ;
drawLine();
ox=x;
oy=y;
}
}
function onMouseUp(){
mf=false;
}
function drawLine(){
ct.beginPath();
ct.moveTo(ox,oy);
ct.lineTo(x,y);
ct.stroke();
}
//絵を画像にする
function copyimage() {
var img_png_src = can.toDataURL("image/png");
document.getElementById("image_png").src = img_png_src;
}
function clearCan(){
ct.fillStyle="rgb(255,255,255)";
ct.fillRect(0,0,can.getBoundingClientRect().width,can.getBoundingClientRect().height);
}
</script>
</head>
<body "mam_draw_init();">
<button style="margin-bottom:3px;">Sign</button>
<div class="msgDiv" >
<div class="msgShut" style="width: 50px; float:right">閉じる</div>
<h3>下の枠に署名してください。</h3>
<div style="border:1px dashed #000000;width:400px;" id="candiv">
<canvas id="can" width="400px" height="300px" ></canvas>
</div>
<div style="float: right;margin-top:10px;">
<input type="button" onClick="clearCan();" value="クリア" style="width:100px;height:30px;" data-inline="true" />
<input class="canRemove" type="button" onClick="copyimage();" value="保存" style="width:100px;height:30px;" data-inline="true" />
</div>
</div>
<div>
</div>
<div id="background">
<iframe src="images/入退室記録シート事例001.pdf" width="800" height="800" scroll="no"></iframe>
<div id="box" >
<img id="image_png" style="display:none" width="400px" height="300px">
<div id="canClose_icon">
<img src="images/canClose_icon.jpg">
</div>
<div id="canScale_icon"></div>
</div>
</div>
<!--<embed src="images/入退室記録シート事例001.pdf" width=840px; height=800px; align=center >-->
<!---->
<script type="text/javascript">
// box是装图片的容器,bg是图片移动缩放的范围,scale是控制缩放的小图标
var box = document.getElementById("box");
var bg = document.getElementById("background");
var scale = document.getElementById("canScale_icon");
//-------------- 画像移動制御 star--------------//
box.function(ev) {
var oEvent = ev;
// 浏览器有一些图片的默认事件,这里要阻止
oEvent.preventDefault();
var disX = oEvent.clientX - box.offsetLeft;
var disY = oEvent.clientY - box.offsetTop;
bg.function (ev) {
oEvent = ev;
oEvent.preventDefault();
var x = oEvent.clientX -disX;
var y = oEvent.clientY -disY;
// 图形移动的边界判断
x = x <= 0 ? 0 : x;
x = x >= bg.offsetWidth-box.offsetWidth ? bg.offsetWidth-box.offsetWidth : x;
y = y <= 0 ? 0 : y;
y = y >= bg.offsetHeight-box.offsetHeight ? bg.offsetHeight-box.offsetHeight : y;
box.style.left = x + 'px';
box.style.top = y + 'px';
}
// 图形移出父盒子取消移动事件,防止移动过快触发鼠标移出事件,导致鼠标弹起事件失效
bg.onmouseleave = function () {
bg.null;
bg.null;
}
// 鼠标弹起后停止移动
bg.function() {
bg.null;
bg.null;
}
}
//-------------- 画像移動制御 end--------------//
//-------------- 画像拡大と縮小効果 star--------------//
scale.onmousedown = function (e) {
// 阻止冒泡,避免缩放时触发移动事件
e.stopPropagation();
e.preventDefault();
var pos = {
'w': box.offsetWidth,
'h': box.offsetHeight,
'x': e.clientX,
'y': e.clientY
};
bg.onmousemove = function (ev) {
ev.preventDefault();
// 设置图片的最小缩放为30*30
var w = Math.max(30, ev.clientX - pos.x + pos.w)
var h = Math.max(30,ev.clientY - pos.y + pos.h)
// console.log(w,h)
// 设置图片的最大宽高
w = w >= bg.offsetWidth-box.offsetLeft ? bg.offsetWidth-box.offsetLeft : w
h = h >= bg.offsetHeight-box.offsetTop ? bg.offsetHeight-box.offsetTop : h
box.style.width = w + 'px';
box.style.height = h + 'px';
// console.log(box.offsetWidth,box.offsetHeight)
}
bg.onmouseleave = function () {
bg.null;
bg.null;
}
bg.function() {
bg.null;
bg.null;
}
}
//-------------- 画像拡大と縮小効果 end--------------//
</script>
</body>
</html>
外链引用注释：
- 感谢 【潇湘羽西】 原生JS实现图片拖拽移动与缩放 （没打招呼就用了成果不好意思）
http://www.cnblogs.com/steamed-twisted-roll/p/9253077.html - HTML5のcanvasに手書きやマウスのドラッグで絵を書く
https://mam-mam.net/javascript/draw_js.html - Sign PDF
https://lightpdf.com/sign-pdf
【素材】
背景的PDF文件无法上传。。。大家随意拿什么当背景吧…https://img-blog.****img.cn/20190419101715729.jpg