Javascript FETCH 在我的表单中显示数字签名

Question

我一直在这里尝试，对于 JavaScript 还很陌生，如果你能帮我解决这个问题。谢谢你。

我有这个代码：

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)
    })

它的作用是与设备 Verifone 签名板进行通信，登录并单击设备中的“提交”后，它会向我显示此 Json：这是签名的图像....我如何在我的 Html 表单中显示此签名？请帮忙。

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

我使用 Canvas，但我不知道如何将这段代码添加到我的画布中以显示签名。

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

使用包含 PNG 数据的

<img>

URL 创建一个

data:

元素。

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