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

}
4

3 に答える 3

3

これには 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-14T13:32:11.490 に答える
0

このリンクを見てください：

おそらくそれはあなたが必要とする仕事をするでしょう

于 2012-11-02T20:09:00.100 に答える