html2canvas 索引或大小为负数或大于允许的数量答案

【问题标题】：html2canvas index or size is negative or greater than the allowed amounthtml2canvas 索引或大小为负数或大于允许的数量
【发布时间】：2014-11-07 16:52:40
【问题描述】：

我的 div 具有高图表和表格，并希望使用 jspdf 转换为 pdf。当我使用 canvas.toDataURL 时，我得到的索引或大小为负数或大于允许的数量。

感谢任何帮助

【问题讨论】：

我尝试使用 canvas.getContext("2d").getImageData(15,40,200,200); 删除 todataurl；但仍然没有运气。
也曾尝试从plnkr.co/edit/nNSvHL8MZcT6nNKg9CG9实现此代码，但还没有运气
好的，您将您尝试过的内容添加到您的问题中，人们将能够更好地帮助您。我不知道JS，但我希望你能尽快得到答案。
stackoverflow.com/questions/22991086/…
我遇到了这个问题，因为我尝试渲染的 div 的宽度和高度为 0，即使它里面有东西。我不得不将 div 更改为 display: inline-block，这样就消除了索引错误。

标签： html2canvas jspdf

【解决方案1】：

使用下面的代码，但即使背景颜色设置为#FFFFFF，在少数地方也会出现黑色背景

$("#btnSaveAsPDF").click(function () {
                html2canvas($("#tblSaveAsPdf_canvas"), {
                onrendered: function (canvas) {
                var imageData = canvas.toDataURL("image/jpeg");
                var image = new Image();
                image = Canvas2Image.convertToJPEG(canvas);
                var doc = new jsPDF();
                doc.addImage(imageData, 'JPEG', 12, 10);
                var croppingYPosition = 1095;
                count = (image.height) / 1095;

                for (var i =1; i < count; i++) {
                        doc.addPage();
                        var sourceX = 0;
                        var sourceY = croppingYPosition;
                        var sourceWidth = image.width;
                        var sourceHeight = 1095;
                        var destWidth = sourceWidth;
                        var destHeight = sourceHeight;
                        var destX = 0;
                        var destY = 0;
                        var canvas1 = document.createElement('canvas');
                        canvas1.setAttribute('height', destHeight);
                        canvas1.setAttribute('width', destWidth);                         
                        var ctx = canvas1.getContext("2d");
                        ctx.drawImage(image, sourceX, 
                                             sourceY,
                                             sourceWidth,
                                             sourceHeight, 
                                             destX, 
                                             destY, 
                                             destWidth, 
                                             destHeight);
                        var image2 = new Image();
                        image2 = Canvas2Image.convertToJPEG(canvas1);
                        image2Data = image2.src;
                        doc.addImage(image2Data, 'JPEG', 12, 10);
                        croppingYPosition += destHeight;              
                    }                  
                var d = new Date().toISOString().slice(0, 19).replace(/-/g, "");
                filename = 'report_' + d + '.pdf';
                doc.save(filename);
            }

        });
    });

【讨论】：