I’m trying to convert an array of images to base64 to use them as the src of images that will render a PDF.
- The user upload info and pictures and send them to the server.
- I treat those info and the pictures and create a PDF with it.
- I store the PDF in my database.
Here is what I have so far
<code>const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
// CREATE USER
UserRouter.post('/user', async (request, response) => {
... some code ...
if (request.body.eligibility) {
try {
const tempDir = path.join(__dirname, 'temp');
if (!fs.existsSync(tempDir)) {
fs.mkdirSync(tempDir);
}
const imageBase64Array = [];
const imagePaths = [];
request.body.eligibility.images.forEach((imageData, index) => {
const imageBuffer = Buffer.from(imageData, 'base64');
const imagePath = path.join(tempDir, `tempImage${index}.png`);
fs.writeFileSync(imagePath, imageBuffer);
imagePaths.push(imagePath);
const imageBase64 = imageBuffer.toString('base64');
imageBase64Array.push(imageBase64); // Push base64-encoded string instead of data URI
});
const imageHtml = imageBase64Array.map(imageBase64 => `<img src="${imageBase64}" alt="Image"/>`).join('');
console.log(imageHtml)
const htmlContent = `
<htmlcontent>
<div class="images">
${imageHtml}
</div>
</htmlcontent>`
... some code ...
}
</code>
<code>const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
// CREATE USER
UserRouter.post('/user', async (request, response) => {
... some code ...
if (request.body.eligibility) {
try {
const tempDir = path.join(__dirname, 'temp');
if (!fs.existsSync(tempDir)) {
fs.mkdirSync(tempDir);
}
const imageBase64Array = [];
const imagePaths = [];
request.body.eligibility.images.forEach((imageData, index) => {
const imageBuffer = Buffer.from(imageData, 'base64');
const imagePath = path.join(tempDir, `tempImage${index}.png`);
fs.writeFileSync(imagePath, imageBuffer);
imagePaths.push(imagePath);
const imageBase64 = imageBuffer.toString('base64');
imageBase64Array.push(imageBase64); // Push base64-encoded string instead of data URI
});
const imageHtml = imageBase64Array.map(imageBase64 => `<img src="${imageBase64}" alt="Image"/>`).join('');
console.log(imageHtml)
const htmlContent = `
<htmlcontent>
<div class="images">
${imageHtml}
</div>
</htmlcontent>`
... some code ...
}
</code>
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
// CREATE USER
UserRouter.post('/user', async (request, response) => {
... some code ...
if (request.body.eligibility) {
try {
const tempDir = path.join(__dirname, 'temp');
if (!fs.existsSync(tempDir)) {
fs.mkdirSync(tempDir);
}
const imageBase64Array = [];
const imagePaths = [];
request.body.eligibility.images.forEach((imageData, index) => {
const imageBuffer = Buffer.from(imageData, 'base64');
const imagePath = path.join(tempDir, `tempImage${index}.png`);
fs.writeFileSync(imagePath, imageBuffer);
imagePaths.push(imagePath);
const imageBase64 = imageBuffer.toString('base64');
imageBase64Array.push(imageBase64); // Push base64-encoded string instead of data URI
});
const imageHtml = imageBase64Array.map(imageBase64 => `<img src="${imageBase64}" alt="Image"/>`).join('');
console.log(imageHtml)
const htmlContent = `
<htmlcontent>
<div class="images">
${imageHtml}
</div>
</htmlcontent>`
... some code ...
}
So far everything works except the images.
The images im sending to the server are like this
<code>
[
"image3.png",
"image2.png",
"image1.png",
"image2.png",
"image3.png"
]
</code>
<code>
[
"image3.png",
"image2.png",
"image1.png",
"image2.png",
"image3.png"
]
</code>
[
"image3.png",
"image2.png",
"image1.png",
"image2.png",
"image3.png"
]
And when I console.log(imageHtml), I get this:
<code><img src="image3pn" alt="Image"/><img src="image2pn" alt="Image"/><img src="image1pn" alt="Image"/><img src="image2pn" alt="Image"/><img src="image3pn" alt="Image"/>
</code>
<code><img src="image3pn" alt="Image"/><img src="image2pn" alt="Image"/><img src="image1pn" alt="Image"/><img src="image2pn" alt="Image"/><img src="image3pn" alt="Image"/>
</code>
<img src="image3pn" alt="Image"/><img src="image2pn" alt="Image"/><img src="image1pn" alt="Image"/><img src="image2pn" alt="Image"/><img src="image3pn" alt="Image"/>
So no conversion has been made to base64.
I tried so many different things, I’m out of ideas, maybe the way I’m trying to do this is not the right one, any ideas or solutions are welcome.