web-dev-qa-db-ja.com

HTML5キャンバス、jspdf.jsでキャンバスをPDF

HTML5キャンバスをJavaScriptでPDFに変換しようとしていますが、背景が黒のPDFになります。背景色を変更しようとしましたが、それでも黒になります。次のコードを試しています。

Canvas = document.getElementById("chart");
Context = Canvas.getContext("2d");

var imgData = Canvas.toDataURL('image/jpeg');
var pdf = new jsPDF('landscape');
pdf.addImage(imgData, 'JPEG', 0, 0, 1350, 750);
pdf.save('download.pdf');

何かアイデアがありましたら、よろしくお願いします。

javascripthtml5pdfcanvasjspdf
8
user3289230

良いアプローチは、jspdf.jsとhtml2canvasの組み合わせを使用することです。私はあなたのためにjsfiddleを作りました。

 <canvas id="canvas" width="480" height="320"></canvas> 
      <button id="download">Download Pdf</button>

'

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

jsfiddle： http://jsfiddle.net/rpaul/p4s5k59s/5/

8
Razan Paul

非常に簡単な解決策の1つは、画像をjpegとして保存することです。代わりに、pngとして保存すると、私のアプリケーションでは問題なく機能します。注目すべきことに、 Blizzard の応答には、pngとしての印刷も含まれ、キャンバス内の透明なレイヤーに黒以外の塗りつぶしも生成されます。

  var canvas = event.context.canvas;
  var data = canvas.toDataURL('image/png');

の代わりに

  var canvas = event.context.canvas;
  var data = canvas.toDataURL('image/jpg');
3
Scott Close

私は同じ問題を抱えていました、例えば初めてPDFを作成したときは、キャンバスの画像は問題ありませんが、次はすべて黒くなりました。写真はありません！

私が見つけた回避策は次のとおりです。pdf.addImage（）を呼び出すたびに、キャンバスに画像を再描画します。今では問題なく動作します。

編集：要求に応じて、ここにいくつかの詳細があります：

私がこのようなキャンバス描画機能を持っているとしましょう（単なる例、それは問題ではありません）：

function drawCanvas(cv) {
  for(var i=0; i<cv.height; i++) {
    for(var j=0, d=0; j<cv.width; j++) {
      cv.data[d] = 0xff0000;
      d += 4;
    }
  }
}

印刷機能を次のように修正する必要がありました。

var cv=document.getElementById('canvas');
printPDF(cv) {
    var imgData=cv.toDataURL("image/jpeg", 1.0);
    var doc=new jsPDF("p","mm","a4");
    doc.addImage(imgData,'JPEG',15,40,180,180);
    drawCanvas(cv); // <--- this line is needed, draw again
}
drawCanvas(cv); // <--- draw my image to the canvas, ok
printPDF(cv); // first time is fine
printPDF(cv); // second time without repaint would be black

私は認めます、私はこれ以上調査しませんでした、これがうまくいくことをただ嬉しく思います。

1
deblocker

まず、canvasを取得する前に、dataで目的の背景色をsetする必要があります。次に、jpegにcanvas画像を描画する必要があります。

0
John Stephen

JPEGをPNGに変更するだけですpdf.addImage（imgData、 'PNG'、0、0、1350、750）;

0
Raj Prabhu