Its a great idea and I’ve tried this approach as its the most sensible but it’s not working on NodeJS as it does with PHP - I’d have thought the principle should be the same but it doesn’t seem to be…
my node skills are none
but atleast chatgpt came to the rescue to convert my php … maybe a custom extension
const fetch = require('node-fetch');
const fs = require('fs');
// URL of the QR code
const url = 'https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=Example';
// Fetch the QR code image
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error('Failed to fetch QR code');
}
return response.buffer();
})
.then(buffer => {
// Save the image
fs.writeFileSync('qr_code.png', buffer);
console.log('QR code saved successfully as qr_code.png');
})
.catch(error => {
console.error(error.message);
});
This JavaScript example utilizes the node-fetch library to make HTTP requests and fs to handle file operations. Ensure you have these dependencies installed ( npm install node-fetch ) before running the code.
Much appreciated.! I’ll give that a try and see how it goes…
Try this…
This works great 
Its not me… its chatgpt… i just asked the right question i guess
"the main image is resized and optimised using dynamic urls, they work perfectly, but adding a qrcode as a watermark is problematic as the url for cloudimage needs an actual file and not a generated one from an API." if you do it asb below you can use dynamic data and it will still generate the image 
Run the php version in a file and you will see what i mean.
php
<?php
$mainUrl = 'https://doc.cloudimg.io/sample.li/voyage-louis-vuitton.jpg?w=600&wat=1&wat_scale=45&wat_gravity=southeast&wat_pad=15&wat_url=';
$nestedUrl = 'https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=Example';
$encodedNestedUrl = urlencode($nestedUrl);
$finalUrl = $mainUrl . $encodedNestedUrl;
?>
<!-- Output the final URL as a src attribute -->
<img src="<?php echo $finalUrl; ?>" alt="QR Code">
and then javacript… i hope this helps TMR
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code Image</title>
</head>
<body>
<script>
const mainUrl = 'https://doc.cloudimg.io/sample.li/voyage-louis-vuitton.jpg?w=600&wat=1&wat_scale=45&wat_gravity=southeast&wat_pad=15&wat_url=';
const nestedUrl = 'https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=Example';
const encodedNestedUrl = encodeURIComponent(nestedUrl);
const finalUrl = mainUrl + encodedNestedUrl;
// Create an image element and set its src attribute to the final URL
const img = document.createElement('img');
img.src = finalUrl;
img.alt = 'QR Code';
// Append the image to the body
document.body.appendChild(img);
</script>
</body>
</html>
That works perfectly!!!
@Mozzi That’s brilliant, exactly what is needed for this project. Thanks for your input Reinhardt, it’s much appreciated.
Thank you also @Hyperbytes for pitching in.
1 Like
half way though writing a file download node custom extension, will continue regardless, guess it will be useful anyway.
1 Like
thank you Brian, please keep going and I’ll test that one out also. This will all help others so it’s all good.
I’m trying to add dynamic Urls into this but even Copilot is gasping at it, this doesn’t work but here’s what I’m trying to do to get the userProvidedUrl to be dynamic…
Any ideas?
<script>
const mainUrl = 'https://doc.cloudimg.io/sample.li/voyage-louis-vuitton.jpg?w=600&wat=1&wat_scale=45&wat_gravity=southeast&wat_pad=15&wat_url=';
const userProvidedUrl = '{{scLogo.data.queryLogo.LogoThumbURL}}';
const nestedUrl = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(userProvidedUrl)}`;
const encodedNestedUrl = encodeURIComponent(nestedUrl);
const finalUrl = mainUrl + encodedNestedUrl;
// Create an image element and set its src attribute to the final URL
const img = document.createElement('img');
img.src = finalUrl;
img.alt = 'QR Code';
// Append the image to the body
document.body.appendChild(img);
</script>
When you want to use App Connect data in JavaScript you need to use dmx.parse to parse the expression.
<script>
const mainUrl = 'https://doc.cloudimg.io/sample.li/voyage-louis-vuitton.jpg?w=600&wat=1&wat_scale=45&wat_gravity=southeast&wat_pad=15&wat_url=';
const userProvidedUrl = dmx.parse('scLogo.data.queryLogo.LogoThumbURL');
const nestedUrl = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(userProvidedUrl)}`;
const encodedNestedUrl = encodeURIComponent(nestedUrl);
const finalUrl = mainUrl + encodedNestedUrl;
// Create an image element and set its src attribute to the final URL
const img = document.createElement('img');
img.src = finalUrl;
img.alt = 'QR Code';
// Append the image to the body
document.body.appendChild(img);
</script>
A better App Connect way is to create a custom formatter like:
<script>
dmx.Formatter('string', 'appendUrl', function (string, append) {
return string + encodeURIComponent(append);
});
</script>
<img dmx-bind:src="'https://doc.cloudimg.io/sample.li/voyage-louis-vuitton.jpg?w=600&wat=1&wat_scale=45&wat_gravity=southeast&wat_pad=15&wat_url='.appendUrl('https://api.qrserver.com/v1/create-qr-code/?size=150x150&data='.appendUrl(scLogo.data.queryLogo.LogoThumbURL))" alt="QR Code">
or like:
<script>
dmx.Formatter('string', 'buildUrl', function (user_url) {
const wat_url = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(user_url)}`;
return `https://doc.cloudimg.io/sample.li/voyage-louis-vuitton.jpg?w=600&wat=1&wat_scale=45&wat_gravity=southeast&wat_pad=15&wat_url=${encodeURIComponent(wat_url)}`;
});
</script>
<img dmx-bind:src="scLogo.data.queryLogo.LogoThumbURL.buildUrl()" alt="QR Code">
3 Likes