This is my first question here, I hope you can help me. I'm trying to create a PDF file with 160 qr codes and some text, I wrote one function to separete each qr and its texts, but I think I'm missing something when drawing all of them in the final canva/pdf. Because all of them are positioned at the top and left margin. And it doesn't respect the margin of the text neither.
This is the code I'm running:
const QrQuantity = 160
const pageSize = { width: 1680.12, height: 1134.77 }
const fontSize = 7
const qrSize = 45
const marginCanvasX = 55.96
const marginCanvasY = 28.89
const marginQrX = 55.16
const marginQrY = 66.25
const rows = 10
const columns = 16
const textMargin = 4
function drawQR(ctx, img, id, column, row) {
ctx.save()
const offsetX = (column * qrSize) + ((marginQrX + fontSize) * column)
const offsetY = (row * qrSize) + ((marginQrY + fontSize) * row)
// Set the position to where we need to draw the QR
ctx.translate(offsetX, offsetY)
// Draw the QR code
ctx.drawImage(img, 0, 0, qrSize, qrSize)
// Write "My web"
ctx.fillText('myweb.com', 8, qrSize + fontSize + textMargin)
ctx.save()
// Rotate to write vertical text
ctx.rotate(Math.PI / 2)
// Write the ID
ctx.fillText(id, 0, -qrSize - 3)
// Undo all the translations and rotations
ctx.restore()
ctx.restore()
}
function downloadPDF(qrs) {
// Create the context
const ctx = new canvas2pdf.PdfContext(blobStream(), { size: [pageSize.width, pageSize.height] })
// Set the base styles
ctx.fillStyle = '#000'
ctx.font = `${fontSize}px`
// Apply left and top margins
ctx.translate(marginCanvasX, marginCanvasY)
// When we're done drawing, download the image as a PDF document
ctx.stream.on('finish', () => {
const blob = ctx.stream.toBlob('application/pdf')
download(blob, 'codes.pdf')
})This is the final result.
Thank You all!
