cavans实现签名并且转化图片并且下载未pdf

1  html

    

    <div>
       <canvas id="canvasDom" className={styles.canvas} ref={canvasDom} width="350" height="150" />
    </div>
   <el-button @click="downPdf">下载PDF</el-button>
  </div>

2  选择插件

  

import html2Canvas from 'html2canvas';
import { jsPDF } from "jspdf"

3 签名函数

canvasFn(
            beginX, //: number,
            beginY, //: number,
            stopX, //: number,
            stopY, //: number,
            ctx // any,
        ) {
            //定义签名函数
            const writing = (
                beginX, //: number,
                beginY, //: number,
                stopX, //: number,
                stopY, //: number,
                ctx // any,
            ) => {
                ctx.beginPath(); // 开启一条新路径
                ctx.globalAlpha = 1; // 设置图片的透明度
                ctx.lineWidth = 3; // 设置线宽
                ctx.strokeStyle = 'red'; // 设置路径颜色
                ctx.moveTo(beginX, beginY); // 从(beginX, beginY)这个坐标点开始画图
                ctx.lineTo(stopX, stopY); // 定义从(beginX, beginY)到(stopX, stopY)的线条（该方法不会创建线条）
                ctx.closePath(); // 创建该条路径
                ctx.stroke(); // 实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
            };
            writing(
                beginX, //: number,
                beginY, //: number,
                stopX, //: number,
                stopY, //: number,
                ctx // any,
            );
        }

 

4  触发时监听

   注意：beginX = event.touches[0].clientX - this.offsetLeft; //不减会出现多余的比画，其他同理

let beginX, beginY;
        const canvas = document.getElementById('canvasDom'); //canvasDom.current;
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = '#014578';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        canvas.addEventListener('touchstart', function(event) {
            event.preventDefault(); // 阻止在canvas画布上签名的时候页面跟着滚动
            beginX = event.touches[0].clientX - this.offsetLeft;
            beginY = event.touches[0].pageY - this.offsetTop;
        });
        canvas.addEventListener('touchmove', event => {
            event.preventDefault(); // 阻止在canvas画布上签名的时候页面跟着滚动
            event = event.touches[0];
            let stopX = event.clientX - canvas.offsetLeft;
            let stopY = event.pageY - canvas.offsetTop;
            this.canvasFn(beginX, beginY, stopX, stopY, ctx);
            beginX = stopX; // 这一步很关键，需要不断更新起点，否则画出来的是射线簇
            beginY = stopY;
        });

    5  转化图片并且下载未pdf

     注意：默认高度从0开始计算，

print() {
            let dom = document.getElementById('canvasDom');
            // console.log( html2Canvas)
             html2Canvas(dom, {
                allowTaint: true,
                width: 300, //设置获取到的canvas宽度
                height: 150, //设置获取到的canvas高度
                x: 0, //页面在水平方向滚动的距离
                y: 0 //页面在垂直方向滚动的距离
            }).then(canvas => {
                console.log(canvas)
                let canvasWidth = canvas.width;
                let canvasHeight = canvas.height;
                let pageHeight = (canvasWidth / 592.28) * 841.89; // 一页A4 pdf能显示的canvas高度
                let imgWidth = 595.28; // 设置图片宽度和A4纸宽度相等
                let imgHeight = (592.28 / canvasWidth) * canvasHeight; //等比例换算成A4纸的高度
                let totalHeight = imgHeight; // 需要打印的图片总高度，初始状态和图片高度相等
                let pageData = canvas.toDataURL('image/png', 1.0);
                console.log(canvasWidth,canvasHeight,pageHeight,imgWidth,imgHeight,totalHeight,pageData)
                let PDF = new jsPDF('p', 'pt', 'a4', true);
                if (totalHeight < pageHeight) {
                    //
                    PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight); // 从顶部开始打印
                } else {
                    let top = 0; // 打印初始区域
                    while (totalHeight > 0) {
                        PDF.addImage(pageData, 'JPEG', 0, top, imgWidth, imgHeight); // 从图片顶部往下top位置开始打印
                        totalHeight -= pageHeight;
                        top -= 841.89;
                        if (totalHeight > 0) {
                            PDF.addPage();
                        }
                    }
                }
                PDF.save('test.pdf');
            });
        },