3

I am using a combination of html2canvas, canvg, and jspdf to take html content (which contains svg graphs) and turn them into canvases that are then used to create a pdf file. To prevent some unfortunate page-break issues the best work-around I found was to create multiple canvases, where 1 canvas would equal one page. The canvases are then converted to images using todataurl() before using the jspdf library, and it works great except for that each image on the pdf page has top and bottom borders.

These borders don't show on the webpage itself, either on the html or the canvases - they only show on the generated pdf. I haven't found anything on google beyond this post: html2canvas and toDataURL generated image has horizontal line . Does anyone know what is going on and how to remove these borders?

-Edit: I should add, I've tried setting border:none on the canvases and that did not help. None of my divs have a border property set on them either. The browser being used is IE 11, and IE 10+ must be supported (Chrome and others are not options).

This is the code I use to generate the PDF:

function saveToCAMM(canvasArray) {
    var numCanvas = canvasArray.length;
    var imgWidth = 250;
    var pageHeight = 360;
    var canvasPDF = new jsPDF('l', 'mm', "letter");

    for (var i = 0; i < numCanvas; i++) {
        var canvas = canvasArray[i];

        var canvasImg = canvas.toDataURL("image/jpeg", 1.0);
        var imgHeight = canvas.height * imgWidth / canvas.width;

        if (i != 0) { canvasPDF.addPage(); }

        canvasPDF.addImage(canvasImg, 'JPEG', 15, 0, imgWidth, imgHeight);
    }


    canvasPDF.setDisplayMode("125%", "continuous");

}

example: pdf page with borders

Thanks, Amanda

user1779418
  • 455
  • 1
  • 7
  • 22

1 Answers1

0

I had the same problem: It seems as if jpeg images get a black background in the canvas.toDataURL("image/jpeg", 1.0) function, as was pointed out:

https://ourcodeworld.com/articles/read/10/image-created-from-canvas-have-black-background-html5-

Using canvas.toDataURL() and basically accepting a png image with transparent background made it for me.

octameter
  • 161
  • 1
  • 10