将画布内容导出为PDF

我正在使用HTML5画布进行操作。这一切都很好，除了现在，我可以使用Canvas2image将画布内容导出到PNG。但我想将其导出为PDF。我已经做了一些研究，并且我很确定这是可能的......但我似乎无法理解我需要在代码中更改以使其工作。我读过一个名为pdf.js的插件......但我无法弄清楚如何在我的代码中实现它。将画布内容导出为PDF

第一部分：

function showDownloadText() { 
     document.getElementById("buttoncontainer").style.display = "none"; 
     document.getElementById("textdownload").style.display = "block"; 
    } 

    function hideDownloadText() { 
     document.getElementById("buttoncontainer").style.display = "block"; 
     document.getElementById("textdownload").style.display = "none"; 
    } 

    function convertCanvas(strType) { 
     if (strType == "PNG") 
      var oImg = Canvas2Image.saveAsPNG(oCanvas, true); 
     if (strType == "BMP") 
      var oImg = Canvas2Image.saveAsBMP(oCanvas, true); 
     if (strType == "JPEG") 
      var oImg = Canvas2Image.saveAsJPEG(oCanvas, true); 

     if (!oImg) { 
      alert("Sorry, this browser is not capable of saving " + strType + " files!"); 
      return false; 
     } 

     oImg.id = "canvasimage"; 

     oImg.style.border = oCanvas.style.border; 
     oCanvas.parentNode.replaceChild(oImg, oCanvas); 

     showDownloadText(); 
    }

而且JS到保存图像：

document.getElementById("convertpngbtn").onclick = function() { 
     convertCanvas("PNG"); 
    } 

    document.getElementById("resetbtn").onclick = function() { 
     var oImg = document.getElementById("canvasimage"); 
     oImg.parentNode.replaceChild(oCanvas, oImg); 

     hideDownloadText(); 
    } 

}

来源

2012-11-02 larin555

看看这个链接：

极有可能会做你需要

来源

2012-11-02 20:09:00

第一个链接看起来非常有趣。事情是，它似乎并没有保存画布内容。画布一开始没有任何内容。只有在页面加载后才会绘制背景，但起初它是空白的。所以它保存了一张空白画布的PDF。而对于第二个链接，它仅保存文本和链接，而不是图像...（如果我理解正确）。虽然谢谢！ – larin555

您需要使用2个插件这样做的工作： 1）jsPDF 2）canvas-toBlob.js

然后加入这一段代码来生成重量轻PDF：

canvas.toBlob(function (blob) { 
    var url = window.URL || window.webkitURL; 
    var imgSrc = url.createObjectURL(blob); 
    var img = new Image(); 
    img.src = imgSrc; 
    img.onload = function() { 
     var pdf = new jsPDF('p', 'px', [img.height, img.width]); 
     pdf.addImage(img, 0, 0, img.width, img.height); 
     pdf.save(fileName + '.pdf'); 
    }; 
});

来源

2015-08-14 13:32:11

**另外，但在相同的主题**：如果您在jsPDF的'dist'文件夹中使用'jspdf.min.js'，则可以将'canvas.toDataURL（）'发送到'pdf.addImage'中，不需要'canvas-toBlob.js'。 – markE

将画布内容导出为PDF

回答

相关问题