html canvas + jsPDF将图片转成PDF文档，解决PDF黑色背景问题

        将两个图片放在一页PDF上，类似于扫描出的身份证。有的打印机扫描功能，扫描一次就生成一个PDF文档，如果是身份证扫描或卡片扫描就是生成的两页的PDF。用canvas + jsPDF就可以将扫描出的图片整合一下生成一个一页的PDF。下面是一个简单的demo。

 前端JavaScript代码：

提前引入jspdf.debug.js

function Sava_PDF() {
        var [imgX, imgY] = [595.28, 841.89] //A4纸大小
        var doc = new jsPDF('', 'pt', 'a4'); //PDF大小
        //给PDF添加白色背景
        doc.setDrawColor(255, 255, 255);
        doc.rect(0, 0, doc.internal.pageSize.getWidth(),  doc.internal.pageSize.getHeight(), 'F');

        var image1 = new Image();
        //图片存放在同级目录下的Data文件夹里面
        image1.src = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')) + "/Data/11.jpg"
        image1.onload = function () {
            //打印机扫描出的卡片在纸张的右上角，需要截取出来
            var canvas1_new = document.createElement('canvas');
            canvas1_new.width = this.width;
            canvas1_new.height = this.height;
            canvas1_new.getContext('2d').drawImage(this, this.width / 2, 0, this.width / 2, this.height / 2, -(this.width / 3), this.height / 3, this.width, this.height);
            //新画布，将截图放中间
            var  canvas1= document.createElement('canvas');
            canvas1.width = this.width;
            canvas1.height = this.height;
            //给canvas画布添加白色背景
            canvas1.getContext("2d").fillStyle = "white";
            canvas1.getContext("2d").fillRect(0, 0, this.width, this.width);
            canvas1.getContext("2d").drawImage(canvas1_new, 0, 0);

            var imgData1 = canvas1.toDataURL('image/jpeg');
            //占据PDF的上半部分
            doc.addImage(imgData1, 'JPEG', 0, 0, imgX, imgY / 2); 
            
            //步骤和image1一样，可以设置成循环
            var image2 = new Image();
            image2.src = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')) + "/Data/22.jpg"
            image2.onload = function () {
                //截图，剪切图片的右上角
                var canvas2_new = document.createElement('canvas');
                canvas2_new.width = this.width;
                canvas2_new.height = this.height;
                canvas2_new.getContext('2d').drawImage(this, this.width / 2, 0, this.width / 2, this.height / 2, -(this.width / 3), this.height / 3, this.width, this.height);
                //新画布，将截图放中间
                var  canvas2= document.createElement('canvas');
                canvas2.width = this.width;
                canvas2.height = this.height;
                canvas2.getContext("2d").fillStyle = "white";
                canvas2.getContext("2d").fillRect(0, 0, this.width, this.width);
                canvas2.getContext("2d").drawImage(canvas2_new, 0, 0);

                var imgData2 = canvas2.toDataURL('image/jpeg');
                //占据PDF的下半部分
                doc.addImage(imgData2, 'JPEG', 0, imgY / 2, imgX, imgY / 2);


                // 下面有两种保存方式：
                // 1.保存在本地；
                // 2.发送到后端，后端设置可保存到非本地的地方

                //方式1：
                // doc.save('images.pdf');

                //方式2：
                //传给后台 base64
                const datauri = doc.output('dataurlstring');

                //去掉“base64,”前面的字符串，后面就是文件的加密字符串
                const base64 = datauri.split("base64,")[1];

                //发送给Python处理
                const req = new XMLHttpRequest();
                req.open('POST', './Python/save_page.py', false);
                req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                const params = "img_base64=" + base64

                req.send(params);
                //结果提示
                const result = req.responseText;
                document.getElementById('showinfo').textContent = result + ", 下载完成";
            };
        };

    }

如果将内容发送到后端去保存，下面就是Python代码：

需要注意的是base64字符串传到后端，可能会出现将“+”替换成空格的情况

# coding = utf-8
import base64
import cgi


msg = ""
try:
    form1 = cgi.FieldStorage()
    img_base64 = form1.getvalue('img_base64')
    
    # 通过前端将base64字符串传到后端，会出现将+替换成空格的情况
    img_base64 = img_base64.replace(' ', '+')
    if len(img_base64) % 3 == 1:
        img_base64 += "=="
    elif len(img_base64) % 3 == 2:
        img_base64 += "="
    
    decoded_data = base64.b64decode(img_base64)
    
    # 保存路径，这里是保存到同级目录下
    filename = "/merged_image.PDF"
    with open(filename, 'wb') as file:
        file.write(decoded_data)
    msg = "OK"


except:
    msg = "Job Failed"

print("Content-type: text/html\n")
print(msg)