Hi, Appfarm community
I’m encountering an issue with PDF generation in Appfarm using the “Generate Document” action. The PDFs are becoming extremely large - for instance, three images totaling only 10 MB are producing a PDF over 50 MB without any other content. It is nothing new that PDFs contains a lot of “overhead” incresing the file size, but I need to find a solution for generating PDFs including images without increasing the file size that much. After investigating, it seems the problem is related to large images being appended during PDF generation. These images are stored in Appfarm (https://storage.googleapis.com).
The images are imported from a third-party solution into Appfarm using “Create file object” with Source Type URL, and not using Source Type Default and Accepted File Types Image with the possibility to compress image quality on creation.
I’ve attempted to implement image compression logic for the HTML before generating the PDF in Appfarm, but without any luck. The following HTML/JavaScript approach works well in other PDF-generating software I’m using converting HTML to PDF:
<head>
<meta charset="UTF-8">
<script>
// Maximum dimension threshold for image compression
const MAX_DIMENSION = 1000;
async function compressImage(url) {
try {
const img = new Image();
await new Promise((resolve, reject) => {
img.onload = resolve;
img.onerror = reject;
img.crossOrigin = 'anonymous';
img.src = url;
});
// Skip compression for smaller images
if (img.width <= MAX_DIMENSION && img.height <= MAX_DIMENSION) {
return url;
}
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const scale = Math.min(MAX_DIMENSION / img.width, MAX_DIMENSION / img.height);
canvas.width = img.width * scale;
canvas.height = img.height * scale;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
return canvas.toDataURL('image/jpeg', 0.7);
} catch (error) {
console.error('Image compression failed:', error);
return url;
}
}
document.addEventListener('DOMContentLoaded', async () => {
const images = document.querySelectorAll('img');
for (const img of images) {
if (img.src) {
const compressedDataUrl = await compressImage(img.src);
img.src = compressedDataUrl;
}
}
});
</script>
</head>
Has anyone successfully retrieved images from Appfarm, “compressed them”, and then included them in HTML before generating a PDF? Or perhaps you’ve found another solution to this PDF size issue?
Any advice or examples would be greatly appreciated!
Thanks in advance,
Sondre
