VUE前端，小程序，APP签名盖章

签名盖章功能就是把图片（签名或盖章）

与背景图片（需要签名的文件，如PDF）

合并起来，生成一个新的图片

此功能的开发流程顺序：

• 显示背景PDF
• 操作PDF:手势缩放，回到顶部，上下翻页
• 手绘签字功能
• 显示签章图片
• 操作签章图片：拖动位置，修改大小，删除，确定
• 合并背景与签章，生成结果文件

详细开发流程

显示和操作PDF:

我使用的是pdfh5

引入
import Pdfh5 from "pdfh5"
import "pdfh5/css/pdfh5.css"

使用：url等同于img的src
这里我设置了maxZoom:1，意思是禁止缩放，默认为最大缩放3倍
this.pdfh5 = new Pdfh5("#preViewPdf", {
  pdfurl: url,
  maxZoom:1
})

元素
<div style="overflow: auto;height: 95%;">
  <div id="preViewPdf"></div>
</div>

h5pdf自带的页码和回到首页功能

 手绘签字功能：

使用的是vue-esign

引入
// import vueEsign from 'vue-esign' //使用库
import vueEsign from "@/components/vue-esign/src/index";//使用本地

使用
components: {
  vueEsign
},

元素
<vueEsign ref="esign" :width="windowWidth" style="width: 100%  !important;height:83vh !important;"
          :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor"></vueEsign>

vue-esign提供清空和保存功能：

this.$refs.esign.reset();//清空

this.$refs.esign.generate().then(res => {//保存
    this.handleReset();
    this.signSuccess(res);//res为base64文件
  }).catch(err => {
    console.log(err)
    // this.$message.error('请签名之后提交！')
    that.$toast.success("请签名之后提交");
  })
},

此外，该控件还有画笔大小等设置功能

示例：

显示和操作签章图片:

代码比较长，这里不贴了

因为移动端和PC端不兼容，写了两个拖动代码

也有改图片大小和删除图片功能

总之就是一个简单的拖动图片和设置大小功能，示例：

合并背景与签章

使用的是html2canvas

引入
import html2canvas from "@/utils/html2canvas.js";

使用（删除了保存到后端接口的代码）

html2canvas(document.querySelector(".pdfViewer"), {
            // 以下字段可选
            // width: 490, // canvas宽度
            // height: 240, // canvas高度
            // x: 0, // x坐标
            // y: 0, // y坐标
            foreignObjectRendering: true, // 是否在浏览器支持的情况下使用ForeignObject渲染
            useCORS: true, // 是否尝试使用CORS从服务器加载图像
            async: false, // 是否异步解析和呈现元素
            // 以下字段必填
            background: "#ffffff", // 一定要添加背景颜色，否则出来的图片，背景全部都是透明的
            scale: 2, // 处理模糊问题
            dpi: 300, // 处理模糊问题
            onrendered: function (canvas) {
              // https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL
              // let url = canvas.toDataURL('image/png', 1.0)
              let url = canvas.toDataURL();
              console.log(url);
              //   },
              // });
              // html2Canvas(document.querySelector('.pdfViewer'), {
              //   allowTaint: true
              // }).then(function (canvas) {
              let contentWidth = canvas.width
              let contentHeight = canvas.height
              let pageHeight = (contentWidth / 592.28) * 841.89
              let leftHeight = contentHeight
              let position = 0
              let imgWidth = 595.28
              let imgHeight = (592.28 / contentWidth) * contentHeight
              let pageData = canvas.toDataURL('image/jpeg', 1.0)
              let PDF = new JsPDF('', 'pt', 'a4')
              if (leftHeight < pageHeight) {
                PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
              } else {
                while (leftHeight > 0) {
                  PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                  leftHeight -= pageHeight
                  position -= 841.89
                  if (leftHeight > 0) {
                    PDF.addPage()
                  }
                }
              }
              // PDF.save(title + '.pdf')
              // let file = that.base64ConvertFile(PDF.output("dataurlstring"),"test.pdf");
              pageData = PDF.output("dataurlstring");


              // console.log(pageData);
              // that.showCopperDialog = false;
              // // //调用

              // var arr = pageData.split(',');
              var blob = that.dataURLtoBlob(pageData);
              // const contentType = "image/jpeg"; // 文件类型
              const contentType = 'application/pdf'; // 文件类型
              const file = new File([blob], "pdf.pdf", {
                type: contentType,
                lastModified: Date.now()
              });
              let fileFormData = new FormData();
              fileFormData.append("file", file);
            },
          }
      )

html2canvas的保存注意事项：

页面需全部显示，不能又缩放

页面不能滚动到下面或者右边，要再保存前设置页面滚动复原

// window.pageYoffset = 0;
// console.log(document.querySelector(".pdfViewer").scrollTop+=10);
// console.log(document.querySelector(".pdfViewer").parentElement.scrollTop+=10);
//防止截图不全
document.querySelector(".pdfViewer").parentElement.parentElement.scrollTop = 0
document.querySelector(".pdfViewer").parentElement.parentElement.scrollLeft = 0

代码：gitee地址：https://gitee.com/jiongjiongys/sigz