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);
    }