我有一种情况，我在网页中生成几个图并在画布中显示它们，我的要求是点击下载按钮后，我应该能够导出所有画布图像到PDF。从不同画布拉出图像并导出到单个pdf

我已经成功地做到了这一点，使用html2canvas和Jspdf单一的canvas元素，但无法弄清楚如何做都一样。

我遵循这个JSFiddle代码从Html2canvas和jspdf生成pdf。

$(document).ready(function() { 
    var d_canvas = document.getElementById('canvas'); 
    var context = d_canvas.getContext('2d'); 
    context.moveTo(20, 20); 
    context.lineTo(100, 20); 
    context.fillStyle = "#999"; 
    context.beginPath(); 
    context.arc(100, 100, 75, 0, 2 * Math.PI); 
    context.fill(); 
    context.fillStyle = "orange";  
    context.fillRect(20, 20, 50, 50); 
    context.font = "24px Helvetica"; 
    context.fillStyle = "#000"; 
    context.fillText("Canvas", 50, 130); 
    $('#ballon').draggable(); 
    $('#download').click(function() {  
     html2canvas($("#canvas"), { 
      onrendered: function(canvas) {   
       var imgData = canvas.toDataURL(
        'image/png');    
       var doc = new jsPDF('p', 'mm'); 
       doc.addImage(imgData, 'PNG', 10, 10); 
       doc.save('sample-file.pdf'); 
      } 
     }); 
    }); 
});

请帮助，在此先感谢。

来源

2015-06-09 Pratswinz

loop？请发布一些示例代码。 – wahwahwah

添加jsfiddle链接 – Pratswinz

这是如何不按预期工作？ – wahwahwah

应该没有必要为此使用html2canvas。它只会付出代价为您提供另一个画布元素。您可以直接使用原始画布元素和toDataURL()与jsPdf。

例（部分伪）

这将收集页面中所有的油画，并把它们在一个PDF。伪部分是宽度，增量，因子等缺少的变量，但你应该明白它的要点。

注意：图像的大小必须在您用于文档的单元中给出，因此您需要使用基于文档DPI的预计算因子将像素位置和大小转换为毫米表示这里没有显示，但this可能会有所帮助）。

var x = someX, 
    y = someY, 
    dx = somDeltaForX, 
    dy = somDeltaForY, 
    i, 
    canvases = document.querySelectorAll("canvas"), 
    pdf = new jsPDF('p', 'mm'), 
    f = convertionFactorFromPixelstoMM; 


for(i = 0; i < canvases.length; i++) { 
    var url = canvases[i].toDataURL("image/jpeg", 0.75); 
    doc.addImage(url, "JPEG", x * f, y * f, canvases[i].width * f, canvases[i].height * f); 
    x += dx; // tip: dx could also be based on previous canvas width in non-uniform sizes 
    if (x > widthOfPage) { 
    x = 0; 
    y += dy; 
    } 
}

来源

2015-06-09 20:57:39 K3N

这是非常简单的，我只是改变了说法，以这条线

html2canvas($("#canvas"), {

而是通过单独的画布，然后尝试将它们导出到一个PDF的，而我一直在不同的画布上股利和将Div id传递给上述行，并将两个画布导出为单个pdf文件

来源

2015-06-17 06:34:55 Pratswinz

从不同画布拉出图像并导出到单个pdf

回答

例（部分伪）

相关问题