Can'；在PDF上获取图像-使用JavaScript将HTML模板呈现为PDF

我正在使用JavaScript函数将HTML页面呈现为PDF，但是。。。 当我试图从HTML模板生成pdf时，我得到了pdf中的所有页面，但没有图像 以下是JavaScript函数：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script> 
       $(document).ready(function() {
    (function () {  
        var  
         form = $('.form'),  
         cache_width = form.width(),  
         a4 = [595.28, 841.89]; // for a4 size paper width and height  

        $('#create_pdf').on('click', function () {  
            $('body').scrollTop(0);  
            createPDF();  
        });  
        //create pdf  
        function createPDF() {  
            getCanvas().then(function (canvas) {  
                var  
                 img = canvas.toDataURL("image/png"),  
                 doc = new jsPDF({  
                     unit: 'px',  
                     format: 'a4'  
                 });  
                doc.addImage(img, 'JPEG', 20, 20);  
                doc.save('Bhavdip-html-to-pdf.pdf');  
                form.width(cache_width);  
            });  
        }  
        

        // create canvas object  
        function getCanvas() {  
            form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');  
            return html2canvas(form, {  
                imageTimeout: 2000,  
                removeContainer: true  
            });  
        }  

    }());  
      });
</script>  

$（文档）.ready（函数（）{
（函数（）{
变量
form=$（'.form'），
cache_width=form.width（），
a4=[595.28841.89]；//用于a4大小的纸张宽度和高度
$（'#create_pdf'）。在（'click'，函数（）{
$（'body'）。滚动顶部（0）；
createPDF（）；
});  
//创建pdf
函数createPDF（）{
getCanvas（）.then（函数（画布）{
变量
img=canvas.toDataURL（“image/png”），
doc=新的jsPDF（{
单位：px，
格式：“a4”
});  
addImage文件（img，'JPEG'，20，20）；
doc.save（'Bhavdip-html-to-pdf.pdf'）；
形式.宽度（缓存宽度）；
});  
}  
//创建画布对象
函数getCanvas（）{
表格宽度（（a4[0]*1.33333）-80）.css（'max-width'，'none'）；
返回html2canvas（表格{
图像超时：2000，
removeContainer：对
});  
}  
}());  
});

下面是我使用的HTML片段：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>  
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>    
<input type="button" id="create_pdf" value="Generate PDF">  
      <form class="form" style="max-width: none; width: 1005px;"> 
            <div id="page_1">
                <div id="p1dimg1">
                    <img src="https://cdn.pixabay.com/photo/2020/09/12/20/07/sheep-5566602__340.jpg" id="p1img1" style="height:100px;width:70px;">
                </div>
           </div>
         </form>

此外，图像也会显示在页面上。但不是int-PDF。 一切正常，我将HTML页面呈现为PDF，但没有显示图像，我还尝试使用本地图像和图像链接。 拜托，有人能帮忙吗

更新：我忘了提到函数的这一部分：

<script>  
        /* 
     * jQuery helper plugin for examples and tests 
     */  
        $(document).ready(function() {
        (function ($) {  
            $.fn.html2canvas = function (options) {  
                var date = new Date(),  
                $message = null,  
                timeoutTimer = false,  
                timer = date.getTime();  
                html2canvas.logging = options && options.logging;  
                html2canvas.Preload(this[0], $.extend({  
                    complete: function (images) {  
                        var queue = html2canvas.Parse(this[0], images, options),  
                        $canvas = $(html2canvas.Renderer(queue, options)),  
                        finishTime = new Date();  
    
                        $canvas.css({ position: 'absolute', left: 0, top: 0 }).appendTo(document.body);  
                        $canvas.siblings().toggle();  
    
                        $(window).click(function () {  
                            if (!$canvas.is(':visible')) {  
                                $canvas.toggle().siblings().toggle();  
                                throwMessage("Canvas Render visible");  
                            } else {  
                                $canvas.siblings().toggle();  
                                $canvas.toggle();  
                                throwMessage("Canvas Render hidden");  
                            }  
                        });  
                        throwMessage('Screenshot created in ' + ((finishTime.getTime() - timer) / 1000) + " seconds<br />", 4000);  
                    }  
                }, options));  
    
                function throwMessage(msg, duration) {  
                    window.clearTimeout(timeoutTimer);  
                    timeoutTimer = window.setTimeout(function () {  
                        $message.fadeOut(function () {  
                            $message.remove();  
                        });  
                    }, duration || 2000);  
                    if ($message)  
                        $message.remove();  
                    $message = $('<div ></div>').html(msg).css({  
                        margin: 0,  
                        padding: 10,  
                        background: "#000",  
                        opacity: 0.7,  
                        position: "fixed",  
                        top: 10,  
                        right: 10,  
                        fontFamily: 'Tahoma',  
                        color: '#fff',  
                        fontSize: 12,  
                        borderRadius: 12,  
                        width: 'auto',  
                        height: 'auto',  
                        textAlign: 'center',  
                        textDecoration: 'none'  
                    }).hide().fadeIn().appendTo('body');  
                }  
            };  
        })(jQuery);  
    });
    </script> 

/* 
*用于示例和测试的jQueryHelper插件
*/  
$（文档）.ready（函数（）{
（函数（$）{
$.fn.html2canvas=函数（选项）{
变量日期=新日期（），
$message=null，
timeoutTimer=false，
计时器=date.getTime（）；
html2canvas.logging=options&&options.logging；
html2canvas.Preload（此[0]，$.extend（{
完成：函数（图像）{
var queue=html2canvas.Parse（此[0]，图像，选项），
$canvas=$（html2canvas.Renderer（队列，选项）），
finishTime=新日期（）；
$canvas.css（{position:'absolute'，left:0，top:0}）.appendTo（document.body）；
$canvas.sides（）.toggle（）；
$（窗口）。单击（函数（）{
如果（！$canvas.is（':visible'）{
$canvas.toggle（）；
throwMessage（“画布呈现可见”）；
}否则{
$canvas.sides（）.toggle（）；
$canvas.toggle（）；
throwMessage（“画布渲染隐藏”）；
}  
});  
throwMessage（'finishTime.getTime（）-timer）/1000中创建的屏幕截图）+“秒
”，4000）；
}  
}，期权）；
函数throwMessage（msg，duration）{
clearTimeout（timeoutTimer）；
timeoutTimer=window.setTimeout（函数（）{
$message.fadeOut（函数（）{
$message.remove（）；
});  
}，持续时间| | 2000年）；
如果（$message）
$message.remove（）；
$message=$（''）.html（msg.css（{
保证金：0，
填充：10，
背景：“000”，
不透明度：0.7，
位置：“固定”，
前10名，
右:10,，
fontFamily：“塔荷马”，
颜色：“#fff”，
尺寸：12，
边界半径：12，
宽度：“自动”，
高度：“自动”，
textAlign:'中心'，
text装饰：“无”
}).hide（）.fadeIn（）.appendTo（'body'）；
}  
};  
})（jQuery）；
});