Javascript FETCH to display digital signature in my form

Question

I keep trying here, new to JavaScript, if you can help me to figure this out. Thank you.

I have this code:

var docDescription = 'Please sign wire transfer request';
var reqUrl = 'http://localhost:12001/SigCaptureWait?ResponseType=API&UseReceiptDataList=1&ReturnSigType=PNG&CreateFile=false&TopazType=1';
docDescription = docDescription.replaceAll(' ', '%20');
reqUrl += '&ReceiptData=' + docDescription;
fetch(reqUrl)
    .then(data => { return data.json(); })
    .then(data => {
        console.log('data', data);
    })
    .catch(e => {
        console.log('Error fetching image', e)
    })

What it does is communicates with a device Verifone Signature pad, after signing in and click submit in the device it shows me this Json: which is the image of the signature....How can i display this signature in my Html form? Please help.

{"request":"SIGCAPTUREWAIT","successful":true,"response":{"FileName":"","PNG":"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"}}

I use Canvas but I am not sure how to add this piece of code into my canvas to display signature.

var docDescription = 'Please sign wire transfer request';
var reqUrl = 'http://localhost:12001/SigCaptureWait?ResponseType=API&UseReceiptDataList=1&ReturnSigType=PNG&CreateFile=false&TopazType=1';
docDescription = docDescription.replaceAll(' ', '%20');
reqUrl += '&ReceiptData=' + docDescription;
fetch(reqUrl)
    .then(data => { return data.json(); })
    .then(data => {
        console.log('data', data);
    })
    .catch(e => {
        console.log('Error fetching image', e)
    })

Answer 1

The PNG property looks like a base64-encoded image. You can use that in a data: URL, which can be used as the src of an <img>.

fetch(reqUrl)
    .then(data => data.json())
    .then(data => {
        if (data.successful) {
            let img = document.querySelector("#signature");
            img.src = `data:img/png;base64,${data.response.PNG}`;
        }
    })
    .catch(e => {
        console.log('Error fetching image', e)
    })