pdfjs插件进行自定义遮罩 打印
效果展示
思路
pdfjs插件 每一张pdf都会生成一个canvas 在每个canvas的父级div添加事件 拖拽形成遮罩
(viewer.js 11981行左右 draw()方法 加入监听)
现在 在pdf上拖拽是有遮罩 但是打印的时候是没有的
需在打印的方法里吧把遮罩的div 用canvas在画到pdf 上
(viewer.js 15122行左右 useRenderedPage() 方法遮罩画到pdf上) 然后打印
注
遮罩的位置和大小 和 实际打印时是不一样的 会被缩放
scratchCanvas.width / 实际宽度 = 遮罩的父级的width / 页面上遮罩的width
画的方法
文件 web/viewer.js
调用位置
canvasWrapper.classList.add("canvasWrapper");(自行搜索这行位置)
this.canDraw(canvasWrapper);
画遮罩层
canDraw(parentNode) {
let start_x = 0;
let start_y = 0;
let move_x = 0;
let move_y = 0;
let space = 2;
parentNode.onmousedown = (e) => {
let div = document.createElement("div")
div.classList = "shadowDOM"
e.stopPropagation();
e.preventDefault();
parentNode.appendChild(div);
start_x = e.offsetX
start_y = e.offsetY
parentNode.onmousemove = (_e) => {
_e.stopPropagation();
_e.preventDefault();
move_x = _e.offsetX
move_y = _e.offsetY
if (move_x > start_x) {
div.style.left = start_x - space + "px"
div.style.width = move_x - start_x - space + "px"
} else {
div.style.left = move_x - space + "px"
div.style.width = start_x - move_x - space + "px"
}
if (move_y > start_y) {
div.style.top = start_y - space + "px"
div.style.height = move_y - start_y - space + "px"
} else {
div.style.top = move_y - space + "px"
div.style.height = start_y - move_y - space + "px"
}
}
parentNode.onmouseup = (__e) => {
if (div.style.width == "" || div.style.height == "") {
div.remove();
} else {
let del = document.createElement("div")
del.classList = "delDOM"
div.appendChild(del);
this.del_dom(div, del)
}
parentNode.onmousemove = null;
}
}
}
打印方法
文件 web/viewer.js
重写原本的方法 自行搜索useRenderedPage()方法替换
useRenderedPage() {
this.throwIfInactive();
const img = document.createElement("img");
const scratchCanvas = this.scratchCanvas;
let parentNode = document.querySelectorAll("#viewer")[0];
let nodelist = parentNode.children[index++].querySelectorAll(".shadowDOM")
if (nodelist.length != 0) {
this.addW(nodelist, scratchCanvas)
}
if ("toBlob" in scratchCanvas && !_viewer_compatibility.viewerCompatibilityParams.disableCreateObjectURL) {
scratchCanvas.toBlob(function (blob) {
img.src = URL.createObjectURL(blob);
});
} else {
img.src = scratchCanvas.toDataURL();
}
const wrapper = document.createElement("div");
wrapper.className = "printedPage";
wrapper.appendChild(img);
this.printContainer.appendChild(wrapper);
return new Promise(function (resolve, reject) {
img.onload = resolve;
img.onerror = reject;
});
},
计算位置方法
addW(nodelist, scratchCanvas) {
let ctxx = scratchCanvas.getContext("2d");
ctxx.fillStyle = "#ffffff";
let c_w = scratchCanvas.width;
let c_h = scratchCanvas.height;
let p_w = 0
let p_h = 0
for (let i = 0; i < nodelist.length; i++) {
p_w = parseInt(nodelist[i].parentElement.style.width.split("px")[0])
p_h = parseInt(nodelist[i].parentElement.style.height.split("px")[0])
ctxx.fillRect(
c_w / p_w * parseInt(nodelist[i].style.left.split("px")[0]),
c_h / p_h * parseInt(nodelist[i].style.top.split("px")[0]),
c_w / p_w * parseInt(nodelist[i].style.width.split("px")[0]),
c_h / p_h * parseInt(nodelist[i].style.height.split("px")[0]),
)
}
},
样式部分
自行加入viewer.html
.canvasWrapper {
position: relative;
z-index: 999;
}
.shadowDOM {
position: absolute;
border: 1px dashed #0099FF;
background-color: #C3D5ED;
z-index: 1000;
opacity: 0.6;
}
.delDOM {
position: absolute;
top: 4px;
right: 1px;
cursor: pointer;
height: 10px;
width: 10px;
z-index: 99;
}
.delDOM::after {
position: absolute;
content: "";
top: 0;
right: 0;
height: 2px;
width: 10px;
background-color: red;
transform: rotate(45deg);
}
.delDOM::before {
position: absolute;
content: "";
top: 0;
right: 0;
height: 2px;
width: 10px;
background-color: red;
transform: rotate(-45deg);
}