用户点击截图的按钮时，要单独展示当前点击页面的pdf，然后截图框自适应当前pdf的大小，用户进行选区截图，截图选框最大不能超过当前展示pdf的大小，不能小于30px，前端只负责选区，把当前pdf的缩放比和选区的四个顶点的参数发给后端，后端截图存数据库。话不多说直接上代码。
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.coverBox{
height: 100vh;
width: 100%;
position: absolute;
top: 0;
left: 0;
/*display: none;*/
}
#fatherBox {
width: 600px;
height: 500px;
background-color: rgb(226, 117, 184);
position: absolute;
/*top: 100px;*/
/*z-index: 100000;*/
/*margin: 0 auto;*/
}
#boxBox {
width: 100px;
height: 100px;
background-color: aquamarine;
position: absolute;
box-shadow: 0px 0px 100px 1000px rgba(0, 0, 0, 0.2);
-moz-transform-origin: top right;
-webkit-transform-origin: top right;
-o-transform-origin: top right;
}
img {
width: 100%;
height: 100%;
cursor: move;
}
#topLeft {
width: 4px;
height: 4px;
overflow: hidden;
cursor: se-resize;
position: absolute;
top: 0;
left: 0;
background-color: rgb(122, 191, 238);
}
#topRight {
width: 4px;
height: 4px;
overflow: hidden;
cursor: sw-resize;
position: absolute;
top: 0;
right: 0;
background-color: rgb(122, 191, 238);
}
#scaleBox {
width: 4px;
height: 4px;
overflow: hidden;
cursor: se-resize;
position: absolute;
right: 0;
bottom: 0;
background-color: rgb(122, 191, 238);
}
#leftBottom {
width: 4px;
height: 4px;
overflow: hidden;
cursor: sw-resize;
position: absolute;
left: 0;
bottom: 0;
background-color: rgb(122, 191, 238);
}
#topBtn {
width: 6px;
height: 2px;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
cursor: n-resize;
background-color: rgb(122, 191, 238);
}
#rightBtn {
width: 2px;
height: 6px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto 0;
cursor: e-resize;
background-color: rgb(122, 191, 238);
}
#bottomBtn {
width: 6px;
height: 2px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
cursor: n-resize;
background-color: rgb(122, 191, 238);
}
#leftBtn {
width: 2px;
height: 6px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto 0;
cursor: e-resize;
background-color: rgb(122, 191, 238);
}
</style>
</head>
<body>
<div class="coverBox">
<div id="fatherBox">
<div id="boxBox">
<div id="topLeft"></div>
<div id="topRight"></div>
<div id="scaleBox"></div>
<div id="leftBottom"></div>
<div id="topBtn"></div>
<div id="rightBtn"></div>
<div id="bottomBtn"></div>
<div id="leftBtn"></div>
</div>
</div>
</div>
<script type="text/javascript">
let BTN = document.getElementById('screenshot_Btn')
// box是装图片的容器,fa是图片移动缩放的范围,scale是控制缩放的小图标
let box = document.getElementById("boxBox");
let fa = document.getElementById("fatherBox");
let faOffsetLeft = fa.offsetLeft;
let faOffsetTop = fa.offsetTop;
let rB = document.getElementById("scaleBox");
let tL = document.getElementById("topLeft");
let tR = document.getElementById("topRight");
let lB = document.getElementById("leftBottom");
let topTop = document.getElementById("topBtn");
let rigRig = document.getElementById("rightBtn");
let botBot = document.getElementById("bottomBtn");
let lefLef = document.getElementById("leftBtn");
// 图片移动效果
box.onmousedown = function (ev) {
let oEvent = ev;
// 浏览器有一些图片的默认事件,这里要阻止
oEvent.preventDefault();
let disX = oEvent.clientX - box.offsetLeft;
let disY = oEvent.clientY - box.offsetTop;
fa.onmousemove = function (ev) {
oEvent = ev;
oEvent.preventDefault();
let x = oEvent.clientX - disX;
let y = oEvent.clientY - disY;
// 图形移动的边界判断
x = x <= 0 ? 0 : x;
x =
x >= fa.offsetWidth - box.offsetWidth
? fa.offsetWidth - box.offsetWidth
: x;
y = y <= 0 ? 0 : y;
y =
y >= fa.offsetHeight - box.offsetHeight
? fa.offsetHeight - box.offsetHeight
: y;
box.style.left = x + "px";
box.style.top = y + "px";
};
// 图形移出父盒子取消移动事件,防止移动过快触发鼠标移出事件,导致鼠标弹起事件失效
fa.onmouseleave = function () {
fa.onmousemove = null;
fa.onmouseup = null;
};
// 鼠标弹起后停止移动
fa.onmouseup = function () {
fa.onmousemove = null;
fa.onmouseup = null;
};
};
// 左上拖拽
tL.onmousedown = function (e) {
// 阻止冒泡,避免缩放时触发移动事件
e.stopPropagation();
e.preventDefault();
let pos = {
w: box.offsetWidth,
h: box.offsetHeight,
x: e.clientX,
y: e.clientY,
};
const rect = box.getBoundingClientRect();
fa.onmousemove = function (ev) {
ev.preventDefault();
e.stopPropagation();
// 设置图片的最小缩放为30*30
let w = Math.max(30, pos.w - ev.clientX + pos.x);
let h = Math.max(30, pos.h - ev.clientY + pos.y);
// 设置图片的最大宽高
w =
w >= fa.offsetWidth - box.offsetLeft
? fa.offsetWidth - box.offsetLeft
: w;
h =
h >= fa.offsetHeight - box.offsetTop
? fa.offsetHeight - box.offsetTop
: h;
let left, top;
left = box.offsetWidth>30?ev.clientX - faOffsetLeft:''
top = box.offsetHeight>30?ev.clientY - faOffsetTop:'';
box.style.width = w + "px";
box.style.height = h + "px";
box.style.left = left + "px";
box.style.top = top + "px";
};
fa.onmouseleave = function () {
fa.onmousemove = null;
fa.onmouseup = null;
};
fa.onmouseup = function () {
fa.onmousemove = null;
fa.onmouseup = null;
};
};
// 右上拖拽
tR.onmousedown = function (e) {
// 阻止冒泡,避免缩放时触发移动事件
e.stopPropagation();
e.preventDefault();
let pos = {
w: box.offsetWidth,
h: box.offsetHeight,
x: e.clientX,
y: e.clientY,
};
const rect = box.getBoundingClientRect();
fa.onmousemove = function (ev) {
ev.preventDefault();
e.stopPropagation();
// 设置图片的最小缩放为30*30
let w = Math.max(30, ev.clientX - pos.x + pos.w);
let h = Math.max(30, pos.h - ev.clientY + pos.y);
// 设置图片的最大宽高
w =
w >= fa.offsetWidth - box.offsetLeft
? fa.offsetWidth - box.offsetLeft
: w;
h =
h >= fa.offsetHeight - box.offsetTop
? fa.offsetHeight - box.offsetTop
: h;
let top;
top = box.offsetHeight>30?ev.clientY - faOffsetTop:'';
box.style.width = w + "px";
box.style.height = h + "px";
box.style.top = top + "px";
};
fa.onmouseleave = function () {
fa.onmousemove = null;
fa.onmouseup = null;
};
fa.onmouseup = function () {
fa.onmousemove = null;
fa.onmouseup = null;
};
};
// 右下拖拽
rB.onmousedown = function (e) {
// 阻止冒泡,避免缩放时触发移动事件
e.stopPropagation();
e.preventDefault();
let pos = {
w: box.offsetWidth,
h: box.offsetHeight,
x: e.clientX,
y: e.clientY,
};
fa.onmousemove = function (ev) {
ev.preventDefault();
// 设置图片的最小缩放为30*30
let w = Math.max(30, ev.clientX - pos.x + pos.w);
let h = Math.max(30, ev.clientY - pos.y + pos.h);
// 设置图片的最大宽高
w =
w >= fa.offsetWidth - box.offsetLeft
? fa.offsetWidth - box.offsetLeft
: w;
h =
h >= fa.offsetHeight - box.offsetTop
? fa.offsetHeight - box.offsetTop
: h;
box.style.width = w + "px";
box.style.height = h + "px";
};
fa.onmouseleave = function () {
fa.onmousemove = null;
fa.onmouseup = null;
};
fa.onmouseup = function () {
fa.onmousemove = null;
fa.onmouseup = null;
};
};
// 左下拖拽
lB.onmousedown = function (e) {
// 阻止冒泡,避免缩放时触发移动事件
e.stopPropagation();
e.preventDefault();
let pos = {
w: box.offsetWidth,
h: box.offsetHeight,
x: e.clientX,
y: e.clientY,
};
const rect = box.getBoundingClientRect();
fa.onmousemove = function (ev) {
ev.preventDefault();
e.stopPropagation();
// 设置图片的最小缩放为30*30
let w = Math.max(30, pos.w - ev.clientX + pos.x);
let h = Math.max(30, ev.clientY - pos.y + pos.h);
// 设置图片的最大宽高
w =
w >= fa.offsetWidth - box.offsetLeft
? fa.offsetWidth - box.offsetLeft
: w;
h =
h >= fa.offsetHeight - box.offsetTop
? fa.offsetHeight - box.offsetTop
: h;
let left;
left = box.offsetWidth>30?ev.clientX - faOffsetLeft:''
box.style.width = w + "px";
box.style.height = h + "px";
box.style.left = left + "px";
};
fa.onmouseleave = function () {
fa.onmousemove = null;
fa.onmouseup = null;
};
fa.onmouseup = function () {
fa.onmousemove = null;
fa.onmouseup = null;
};
}
// 左边拖拽
lefLef.onmousedown = function (e) {
// 阻止冒泡,避免缩放时触发移动事件
e.stopPropagation();
e.preventDefault();
let pos = {
w: box.offsetWidth,
h: box.offsetHeight,
x: e.clientX,
y: e.clientY,
};
const rect = box.getBoundingClientRect();
fa.onmousemove = function (ev) {
ev.preventDefault();
e.stopPropagation();
// 设置图片的最小缩放为30*30
let w = Math.max(30, pos.w - ev.clientX + pos.x);
// 设置图片的最大宽高
w =
w >= fa.offsetWidth - box.offsetLeft
? fa.offsetWidth - box.offsetLeft
: w;
let left;
left = box.offsetWidth>30?ev.clientX - faOffsetLeft:''
box.style.width = w + "px";
box.style.left = left + "px";
};
fa.onmouseleave = function () {
fa.onmousemove = null;
fa.onmouseup = null;
};
fa.onmouseup = function () {
fa.onmousemove = null;
fa.onmouseup = null;
};
}
// 上面拖拽
topTop.onmousedown = function (e) {
// 阻止冒泡,避免缩放时触发移动事件
e.stopPropagation();
e.preventDefault();
let pos = {
w: box.offsetWidth,
h: box.offsetHeight,
x: e.clientX,
y: e.clientY,
};
const rect = box.getBoundingClientRect();
fa.onmousemove = function (ev) {
ev.preventDefault();
e.stopPropagation();
// 设置图片的最小缩放为30*30
let h = Math.max(30, pos.h - ev.clientY + pos.y);
h =
h >= fa.offsetHeight - box.offsetTop
? fa.offsetHeight - box.offsetTop
: h;
let top;
top = box.offsetHeight>30?ev.clientY - faOffsetTop:'';
box.style.height = h + "px";
box.style.top = top + "px";
};
fa.onmouseleave = function () {
fa.onmousemove = null;
fa.onmouseup = null;
};
fa.onmouseup = function () {
fa.onmousemove = null;
fa.onmouseup = null;
};
}
// 右边拖拽
rigRig.onmousedown = function (e) {
e.stopPropagation();
e.preventDefault();
let pos = {
w: box.offsetWidth,
h: box.offsetHeight,
x: e.clientX,
y: e.clientY,
};
fa.onmousemove = function (ev) {
ev.preventDefault();
// 设置图片的最小缩放为30*30
let w = Math.max(30, ev.clientX - pos.x + pos.w);
// 设置图片的最大宽高
w =
w >= fa.offsetWidth - box.offsetLeft
? fa.offsetWidth - box.offsetLeft
: w;
box.style.width = w + "px";
};
fa.onmouseleave = function () {
fa.onmousemove = null;
fa.onmouseup = null;
};
fa.onmouseup = function () {
fa.onmousemove = null;
fa.onmouseup = null;
};
}
// 下边拖拽
botBot.onmousedown = function (e) {
e.stopPropagation();
e.preventDefault();
let pos = {
w: box.offsetWidth,
h: box.offsetHeight,
x: e.clientX,
y: e.clientY,
};
fa.onmousemove = function (ev) {
ev.preventDefault();
// 设置图片的最小缩放为30*30
let h = Math.max(30, ev.clientY - pos.y + pos.h);
h =
h >= fa.offsetHeight - box.offsetTop
? fa.offsetHeight - box.offsetTop
: h;
box.style.height = h + "px";
};
fa.onmouseleave = function () {
fa.onmousemove = null;
fa.onmouseup = null;
};
fa.onmouseup = function () {
fa.onmousemove = null;
fa.onmouseup = null;
};
}
</script>
</body>
</html>
入行不久，代码功底不是很好，有点儿冗余，有可以改进的地方各位大佬们可指点一二。
