🐛 Fix render artefacts with some source PDFs

Should get rid of the black boxes sometimes encountered.

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 2024-08-30
+
+###  🐛 Bug fixes
+
+- Fixed an issue where depending on the source PDF, sometimes the cards would not have all the art they should have and instead showed black boxes or other artifacts. This was likely due to the used PDF render library not rendering all the content when only a part of the page was requested to render. Now, the whole page is rendered out once and then only parts of the rendered image are used for the cards. This seems to have fixed the issue.
+
 ## 2024-06-07
 
 ### ✨ Improvements

README.md

@@ -5,8 +5,6 @@
 [![BGG Thread](https://img.shields.io/badge/BGG-Thread-purple?logo=boardgamegeek)](https://boardgamegeek.com/thread/3298313/i-created-a-tool-to-create-foldable-card-pdfs-from)
 [![BGG Geeklist](https://img.shields.io/badge/BGG-Geeklist-purple?logo=boardgamegeek)](https://boardgamegeek.com/geeklist/336986/cardfoldr-settings-for-games)
 
-
-
 CardFoldr is a tool to help you convert a PDF of card grids (say, 3x3 cards per page, several pages of fronts and one page of backs) into a gutterfold PDF: card fronts and backs on the same page, with a foldline down the middle for easy double sided alignment.
 
 It is meant to help with building print'n'play games.

src/assets/cardfoldr.js

@@ -477,7 +477,8 @@ const extractCards = async () => {
     for (let p = 0; p < (backLoc === "lastpage" ? pageSelection.length - 1 : pageSelection.length); p = p + ((backLoc === "duplex" || backLoc === "duplex2") ? 2 : 1)) {
         const page = await pdf.getPage(pageSelection[p]);
         const mmFactor = page.userUnit / 72 * 25.4 / scale;
-        const viewport = page.getViewport({ scale: scale });
+
+        const pageCanvas = await drawPage(page, scale);
 
         for (let y = 0; y < countY; y++) {
             for (let x = 0; x < countX; x++) {
@@ -487,7 +488,7 @@ const extractCards = async () => {
 
                 const ctx = canvas.getContext('2d');
                 ctx.translate(-1 * (startX + x * width + x * marginX) / mmFactor, -1 * (startY + y * height + y * marginY) / mmFactor);
-                await page.render({ canvasContext: ctx, viewport }).promise;
+                ctx.drawImage(pageCanvas, 0, 0);
 
                 const cardImage = document.createElement('img');
                 cardImage.src = canvas.toDataURL(mimeType);
@@ -532,16 +533,16 @@ const extractCards = async () => {
             backsPage = await backgroundPdf.getPage(backgroundPageSelection[0]);
         }
         const mmFactor = backsPage.userUnit / 72 * 25.4 / scale;
-        const viewport = backsPage.getViewport({ scale: scale });
+
+        const pageCanvas = await drawPage(backsPage, scale);
 
         const canvas = document.createElement('canvas');
         canvas.height = height / mmFactor;
         canvas.width = width / mmFactor;
 
         const ctx = canvas.getContext('2d');
         ctx.translate(-1 * startX / mmFactor, -1 * startY / mmFactor);
-
-        await backsPage.render({ canvasContext: ctx, viewport }).promise;
+        ctx.drawImage(pageCanvas, 0, 0);
 
         const src = rotateBacks ? await rotateImage180(canvas.toDataURL(mimeType)) : canvas.toDataURL(mimeType);
 
@@ -556,16 +557,16 @@ const extractCards = async () => {
             for (let y = 0; y < countY; y++) {
                 for (let x = 0; x < countX; x++) {
                     const mmFactor = backPage.userUnit / 72 * 25.4 / scale;
-                    const viewport = backPage.getViewport({ scale: scale });
+
+                    const pageCanvas = await drawPage(backPage, scale);
 
                     const canvas = document.createElement('canvas');
                     canvas.height = height / mmFactor;
                     canvas.width = width / mmFactor;
 
                     const ctx = canvas.getContext('2d');
                     ctx.translate(-1 * (startX + x * width + x * marginX) / mmFactor, -1 * (startY + y * height + y * marginY) / mmFactor);
-
-                    await backPage.render({ canvasContext: ctx, viewport }).promise;
+                    ctx.drawImage(pageCanvas, 0, 0);
 
                     const cardImage = document.getElementById(`card-${backCount}`).getElementsByClassName('back')[0];
                     cardImage.src = rotateBacks ? await rotateImage180(canvas.toDataURL(mimeType)) : canvas.toDataURL(mimeType);
@@ -580,7 +581,8 @@ const extractCards = async () => {
         for (let p = 1; p < pageSelection.length; p = p + 2) {
             const backPage = await pdf.getPage(pageSelection[p]);
             const mmFactor = backPage.userUnit / 72 * 25.4 / scale;
-            const viewport = backPage.getViewport({ scale: scale });
+
+            const pageCanvas = await drawPage(backPage, scale);
 
             if (backLoc === "duplex") {
                 for (let y = 0; y < countY; y++) {
@@ -591,9 +593,8 @@ const extractCards = async () => {
 
                         const ctx = canvas.getContext('2d');
                         ctx.translate(-1 * (startX + x * width + x * marginX) / mmFactor, -1 * (startY + y * height + y * marginY) / mmFactor);
+                        ctx.drawImage(pageCanvas, 0, 0);
 
-                        await backPage.render({ canvasContext: ctx, viewport }).promise;
-
                         const cardImage = document.getElementById(`card-${backCount}`).getElementsByClassName('back')[0];
                         cardImage.src = rotateBacks ? await rotateImage180(canvas.toDataURL(mimeType)) : canvas.toDataURL(mimeType);
 
@@ -609,8 +610,7 @@ const extractCards = async () => {
 
                         const ctx = canvas.getContext('2d');
                         ctx.translate(-1 * (startX + x * width + x * marginX) / mmFactor, -1 * (startY + y * height + y * marginY) / mmFactor);
-
-                        await backPage.render({ canvasContext: ctx, viewport }).promise;
+                        ctx.drawImage(pageCanvas, 0, 0);
 
                         const cardImage = document.getElementById(`card-${backCount}`).getElementsByClassName('back')[0];
                         cardImage.src = rotateBacks ? canvas.toDataURL(mimeType) : await rotateImage180(canvas.toDataURL(mimeType));