将画布内容导出为PDF

Question

将画布内容导出为PDF

7

我正在使用HTML5 Canvas进行一些工作。目前一切都很顺利，除了现在我只能使用Canvas2image将画布内容导出为PNG格式。但是我想将其导出为PDF格式。我做了一些研究，我相信这是可能的......但我似乎无法理解我需要在代码中做出哪些改变才能使它起作用。我已经了解了一个名为pdf.js的插件......但我不能弄清楚如何将其实现在我的代码中。

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();
    }

}

- larin555

3个回答

0

看看这些链接：

很可能它会完成你所需的工作

- Salvador Dali

第一个链接看起来非常有趣。问题是它似乎没有保存Canvas内容。一开始Canvas里什么也没有。只有页面加载后它才绘制背景，但一开始它是空白的。因此，它保存了一个空白画布的PDF。至于第二个链接，它只保存文本和链接，还没有保存图片...(如果我理解正确的话)。谢谢！ - larin555

0

这个 jspdf 只能在浏览器中保存文件，但我们不能使用生成的 PDF 发送到服务器

- Nishant Goel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temp O'rary · Accepted Answer

你需要使用两个插件来实现这个功能： 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');
    }; 
});