jsPDF image from file

index.html

<script type="text/javascript" src="//cdn.rawgit.com/MrRio/jsPDF/master/dist/jspdf.min.js"></script> <script type="text/javascript" src="//cdn.rawgit.com/MrRio/jsPDF/master/plugins/addimage.js"></script> <script type="text/javascript" src="//cdn.rawgit.com/MrRio/jsPDF/master/plugins/png_support.js"></script> <script src="http://cdn.rawgit.com/MrRio/jsPDF/master/libs/png_support/png.js"></script> <script src="http://cdn.rawgit.com/MrRio/jsPDF/master/libs/png_support/zlib.js"></script>

<input id="inp" type='file'>
<p id="b64"></p>
<img id="img" height="150">

<button id="btnDownload">Download PDF</button>

jspdf-image-from-file.markdown

jsPDF image from file

A Pen by Louis Beaudoin on CodePen.

License.

script.js

// Options
/*
var textArray = ["2mm", "3mm", "4mm", "5mm", "6mm", "7mm", "8mm", "8mm", "10mm", "10mm"];
var widthArray = [2, 3, 4, 5, 6, 7, 8, 8, 10, 10];
var titleString = "M3 7mm Nylon";
*/
var textArray = ["5mm", "10mm", "15mm", "20mm", "Nut", "5mm", "10mm", "15mm", "20mm", "6mm"];
var widthArray = [5, 10, 15, 20, 0, 5, 10, 15, 20, 6];
var titleString = "M3 MM/MF Standoff";


var drawCellOutlines = true;
var rowToDraw = 1;

function mmToPt(mm) {
  return mm * 2.83465;
}

function readFile() {
  
  if (this.files && this.files[0]) {
    
    var FR= new FileReader();
    
    FR.addEventListener("load", function(e) {
      document.getElementById("img").src       = e.target.result;
      document.getElementById("b64").innerHTML = e.target.result;
    }); 
    
    FR.readAsDataURL( this.files[0] );
  }
}

document.getElementById("inp").addEventListener("change", readFile);



var button = document.getElementById('btnDownload');

function generatePDF(){
  var doc = new jsPDF("portrait", "pt", "letter");

  var pageMarginX = 13.5;
  var pageMarginY = 36;
  var defaultLineWidth = 0.200025;

  var printSafetyMargin = mmToPt(1.5);
  
  var cellMarginX = 9;
  var cellMarginY = 0;
  var cellWidth = 189;
  var cellHeight = 72;
  
  var iconMargin = 1;
  var iconHeight = cellHeight/2 - iconMargin/2 - printSafetyMargin;
  var iconWidth = iconHeight;
  //var iconWidth = iconHeight*100/52;
  
  var titleFontSize = 18;
  var titleFontPointsBelowLine = 4;
  var titleTextMargin = 3; // distance between icon and title
  
  var binFontSize = 10;
  var binFontSizePointsBelowLine = 2;
  
  var measureLineMargin = 2;
  var measureLineWidth = 1;

  var i, j;
  for(j=0; j<10; j++) {
    for(i=0; i<3; i++) {
      if(j==rowToDraw) {
        if(drawCellOutlines == true) {
          doc.roundedRect(pageMarginX + (cellWidth + cellMarginX)*i, pageMarginY + (cellHeight + cellMarginY)*j, cellWidth, cellHeight, 2.5, 2.5, 'S'); 
        }

        if(i==0) {
          var iconCenterX, iconCenterY;
          iconCenterX = pageMarginX + printSafetyMargin + iconWidth/2;
          iconCenterY = pageMarginY + (cellHeight + cellMarginY)*j + printSafetyMargin + iconHeight/2;

          //doc.rect(iconCenterX - iconWidth/2, iconCenterY - iconHeight/2, iconWidth, iconHeight, 'S');

          if(document.getElementById("img").src) {
            doc.addImage(img, 'PNG', iconCenterX - iconWidth/2, iconCenterY - iconHeight/2, iconWidth, iconHeight);
          }

          iconCenterY = pageMarginY + (cellHeight + cellMarginY)*j + cellHeight - (printSafetyMargin + iconHeight/2);

  //        doc.rect(iconCenterX - iconWidth/2, iconCenterY - iconHeight/2, iconWidth, iconHeight, 'S');

          if(document.getElementById("img").src) {
            doc.addImage(img, 'PNG', iconCenterX - iconWidth/2, iconCenterY - iconHeight/2, iconWidth, iconHeight);
          }

          var fontLeftX, fontCenterY;

          fontLeftX = pageMarginX + printSafetyMargin + iconWidth + titleTextMargin;
          fontCenterY = pageMarginY + (cellHeight + cellMarginY)*j + cellHeight/2/2;

          
          doc.setFontSize(titleFontSize);
          doc.text(fontLeftX, fontCenterY + titleFontSize/2 - titleFontPointsBelowLine, titleString);
          //doc.rect(fontLeftX, fontCenterY - titleFontSize/2 - titleFontPointsBelowLine, 100, titleFontSize, 'S');

          fontCenterY = pageMarginY + (cellHeight + cellMarginY)*j + cellHeight - (cellHeight/2/2);
          doc.text(fontLeftX, fontCenterY + titleFontSize/2, titleString);
          console.log(doc.getTextWidth(titleString));

        }

        if(i==1) {
          // draw boxes
          doc.lines([[cellWidth, 0]], pageMarginX + cellWidth + cellMarginX, pageMarginY + (cellHeight + cellMarginY)*j + cellHeight/2, [1.0,1.0], 'S');
          var k;
          for(k=0; k<4; k++) {
            doc.lines([[0, cellHeight]], pageMarginX + cellWidth + cellMarginX + (cellWidth/5.0)*(k+1), pageMarginY + (cellHeight + cellMarginY)*j, [1.0,1.0], "S");
          }

          doc.setFontSize(binFontSize);
          for(k=0; k<10; k++) {
            var textX = pageMarginX + cellWidth + cellMarginX + (cellWidth/5.0)/2 + (cellWidth/5.0)*k;
            var textY = pageMarginY + (cellHeight + cellMarginY)*j + cellHeight/2/2 + (binFontSize/2 - binFontSizePointsBelowLine);
            if(k >= 5) {
              textX -= (cellWidth/5.0)*5;
              textY += cellHeight/2;
            }

            doc.text(textArray[k], textX, textY, 'center');
            function drawMeasureLine(x, y, direction, distanceMm) {
              var x0, x1;
              var distancePt = mmToPt(distanceMm);
              if(direction == 0) {
                x0 = x - (distancePt/2);
                x1 = x + (distancePt/2);
              } else if (direction < 0) {
                x0 = x - distancePt;
                x1 = x;
              } else { // if (direction > 0)
                x0 = x;
                x1 = x + distancePt;
              }

              doc.setLineWidth(measureLineWidth);
              doc.lines([[distancePt, 0]], x0, y, [1.0,1.0], 'S');
              doc.setLineWidth(defaultLineWidth);
            }

            var measureX = textX;
            var measureY = pageMarginY + (cellHeight + cellMarginY)*j + cellHeight/2/2;
            if(k >= 5) {
              measureY += cellHeight/2;
            };
            if(k%2) {
              measureY = measureY - cellHeight/2/2/2;
            } else {
              measureY = measureY + cellHeight/2/2/2;
            }

            if(mmToPt(widthArray[k]) < cellWidth/5) {
              drawMeasureLine(measureX, measureY, 0, widthArray[k]);
            } else {
              if(k%5 == 4) {          // at the right end of a row
                drawMeasureLine(measureX + cellWidth/5/2 - measureLineMargin, measureY, -1, widthArray[k]);
              } else if (k%5 == 0) {  // at the left end of a row
                drawMeasureLine(measureX - cellWidth/5/2 + measureLineMargin, measureY, 1, widthArray[k]);
              } else {                // somewhere in the middle
                drawMeasureLine(measureX, measureY, 0, widthArray[k]);
              }
            }
          }
        }

        if(i==2) {
          // draw icon and title
          var iconCenterX, iconCenterY;
          iconCenterX = pageMarginX + (cellWidth*2) + (cellMarginX*2) + printSafetyMargin + iconWidth/2;
          iconCenterY = pageMarginY + (cellHeight + cellMarginY)*j + printSafetyMargin + iconHeight/2;

          //doc.rect(iconCenterX - iconWidth/2, iconCenterY - iconHeight/2, iconWidth, iconHeight, 'S');

          if(document.getElementById("img").src) {
            doc.addImage(img, 'PNG', iconCenterX - iconWidth/2, iconCenterY - iconHeight/2, iconWidth, iconHeight);
          }

          var fontLeftX, fontCenterY;

          fontLeftX = pageMarginX + (cellWidth*2) + (cellMarginX*2) + printSafetyMargin + iconWidth + titleTextMargin;
          fontCenterY = pageMarginY + (cellHeight + cellMarginY)*j + cellHeight/2/2;

          doc.setFontSize(titleFontSize);
          doc.text(fontLeftX, fontCenterY + titleFontSize/2 - titleFontPointsBelowLine, titleString);

          // draw array of sizes underneath
          var sizesStrings = [(textArray.slice(0,5)).join(", "),(textArray.slice(5,10)).join(", ")];
          var textX = pageMarginX + (cellWidth*3) + (cellMarginX*2) - cellWidth/2;
          fontCenterY = pageMarginY + (cellHeight + cellMarginY)*j + cellHeight/2/2 + cellHeight/2;
          doc.setFontSize(10);
          //doc.text(sizesString, textX, fontCenterY, "center");
          doc.text(sizesStrings, textX, fontCenterY, "center");
        }
      }
    }
  }
  
  doc.setFontSize(14);
//  doc.text(100, 225, "Paranyan loves jsPDF");


  doc.setFontSize(40);
//  doc.text(30, 20, 'Hello world!');
  
  //doc.output('datauri');
  
  
  doc.save('my.pdf');
}

button.addEventListener('click', generatePDF);