Mintflow SVG QR code generation - SVG to PNG conversion

Tips
1

I would apply a solution to those needing to get an image from the SVG generated code from the Mintflow QR code SVG plugin (which is great by the way) - or any other SVG code to be fair.

Install the JavaScript toolbox plugin (if not already installed)

add a button to create the QR generation workflow, or on page load or whatever you fancy and save the QR generated code to a state.

Add an HTML element to the page and add an html ID of “svgContainer”. and in the html element add the custom state that holds the qr (check the QR renders on the page before continuing - if not… make that work following the Mintflow docs).

Now create another button to download the QR code - or, like i do add the HTML element to a group and then add a workflow. Now in the workflow find the run JavaScript element and add this code:

function downloadSVGAsImage() {
    const svgElement = document.querySelector('#svgContainer svg');
    const svgData = new XMLSerializer().serializeToString(svgElement);
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();
    const svgSize = svgElement.getBoundingClientRect();
    
    canvas.width = svgSize.width;
    canvas.height = svgSize.height;
    
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
        const pngFile = canvas.toDataURL('image/png');
        const downloadLink = document.createElement('a');
        
        downloadLink.href = pngFile;
        downloadLink.download = 'image.png';
        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);
    };
    
    img.src = 'data:image/svg+xml;base64,' + btoa(svgData);
}

downloadSVGAsImage();```

That is it... now you can have SVGs of any size you wish and download them as a png with transparent background for use anywhere.
1 Like
2

some expansion on this to allow you to specify the download size of the svg after its is generated.

it will be better to save the SVG code generation to the DB so you can resize at will later down the track.

ok, so create a couple of inputs to take the width and height and add the id’s newWidth, and newHeight.

Render the svg on the page from a state/db or whatever.

Now change up the download JavaScript to be this…

(function() {
    const svgContainer = document.getElementById('svgContainer');
    const svgElement = svgContainer.querySelector('svg');
    
    if (!svgElement) {
        alert('SVG not found!');
        return;
    }
    
    const defaultWidth = 500;
    const defaultHeight = 500;
    const newWidth = document.getElementById('newWidth').value || defaultWidth;
    const newHeight = document.getElementById('newHeight').value || defaultHeight;
    const svgData = new XMLSerializer().serializeToString(svgElement);
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();
    
    canvas.width = newWidth;
    canvas.height = newHeight;
    
    img.onload = function() {
        ctx.drawImage(img, 0, 0, newWidth, newHeight);
        const pngFile = canvas.toDataURL('image/png');
        const downloadLink = document.createElement('a');
        
        downloadLink.href = pngFile;
        downloadLink.download = 'image.png';
        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);
    };
    
    img.src = 'data:image/svg+xml;base64,' + btoa(svgData);
})();

It will download to the browser in any dimensions you ask, as big as you need… with no loss in quality… i just generated one 3meter x 3meter … big enough for a large truck / hot air balloon ?

I mean … who is not enjoying AI to give you what you need… love it!