签名盖章功能就是把图片(签名或盖章)
与背景图片(需要签名的文件,如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