Add Text to image and make it downloadable

Collaboration
1

Hi everyone!

I would like to achieve the following and I would be grateful for any tips:

I have an image (a zertificate after a training) and I would like to add a form for clients to put in their name. This text should then appear on the image (I think I know how to get this part done).
Afterwards the image includig the text should be downloadable as image. This is where I need help.

Anny suggestions appreciated.

Best Regards
Alessandra

2

It looks like you’re looking for professional support with modifying your site. Try either the Collaboration section of the forum or https://www.wix.com/marketplace for paid support.

3

$w.onReady(function () {
// Add an event handler to a button click (replace “button1” with the ID of your button)
$w(“#button1”).onClick(() => {
// Generate the certificate with the user’s name
const certificateContent = generateCertificate($w(“#nameInput”).value);

    // Trigger the download of the certificate
    downloadCertificate(certificateContent);
});

});

function generateCertificate(name) {
// Create the certificate content dynamically
const certificateContent = <div> <h1>Certificate of Completion</h1> <p>This is to certify that ${name} has successfully completed the training.</p> <!-- Add signature here if needed --> </div> ;

return certificateContent;

}

function downloadCertificate(content) {
// Convert the certificate content to a data URL
const dataUrl = ‘data:text/html;charset=utf-8,’ + encodeURIComponent(content);

// Create a hidden anchor element
const link = document.createElement('a');
link.style.display = 'none';
document.body.appendChild(link);

// Set the href attribute of the anchor element to the data URL
link.setAttribute('href', dataUrl);

// Set the download attribute of the anchor element
link.setAttribute('download', 'certificate.html');

// Programmatically click the anchor element to trigger the download
link.click();

// Remove the anchor element from the DOM
document.body.removeChild(link);

}
This would be a good starting point if you know code otherwise i would recommend hiring someone for the custom task

4

Something similar to be found here…