A Pen by Louis Beaudoin on CodePen.
Created
September 3, 2018 09:32
-
-
Save embedded-creations/9c2a62478840156ee3b5b921046575d9 to your computer and use it in GitHub Desktop.
jsPDF image from file
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment