I am just starting to learn Jquery and working on a HTML webform that will be used on a signature device, and I need to capture user signature, basically user will sign and after hit save, I want their signature to be display it on the webpage. I am trying to display my signature but image is broken, I need help and I do not know why is my image breaking...
<div class="m-signature-pad">
<div id="imageContainer" class="m-signature-pad--body">
</div>
</div>
<script>
async function addImage() {
const imageUrl = 'http://localhost:12001/SigCaptureWait?ResponseType=API&UseReceiptDataList=1&ReturnSigType=PNG&CreateFile=false&TopazType=1';
const response = await fetch(imageUrl);
const imageBlob = await response.blob();
const objectURL = URL.createObjectURL(imageBlob);
const imageElement = new Image();
imageElement.src = objectURL;
imageElement.width = 50;
document.getElementById('imageContainer').appendChild(imageElement);
}
addImage();
</script>
When I inspect the code I can see it is all good, but not populating the signature image
When a click on that link takes me here:
{"request":"SIGCAPTUREWAIT","successful":true,"response":{"FileName":"","PNG":"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"}}