Javascript FETCH для отображения цифровой подписи в моей форме

Я продолжаю пытаться здесь, новичок в 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.info('data', data);
    })
    .catch(e => {
        console.info('Error fetching image', e)
    })

Что он делает, так это взаимодействует с устройством Verifone Signature Pad, после входа в систему и нажатия кнопки «Отправить» на устройстве он показывает мне этот Json: изображение подписи.... Как я могу отобразить эту подпись в своей HTML-форме? Пожалуйста помоги.

{"request":"SIGCAPTUREWAIT","successful":true,"response":{"FileName":"","PNG":"iVBORw0KGgoAAAANSUhEUgAAAjoAAACCCAIAAADALPWmAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAapSURBVHhe7dfZlps6FAXA+/8/nWtLJw7dYAyYQQdVvSSIWch7r/7vDwA0T10BkIC6AiABdQVAAuoKgATUFQAJqCsAElBXACSgrgBIQF0BkIC6AiABdQVAAuoKgATUFQAJqCsAElBXACSgrgBIQF0BkIC6AiABdQVAAuoKgATUFQAJqCsAElBXACSgrgBIQF0BkIC6AiABdQVAAuoKgATUFQAJqCsAElBXACSgrgBIQF0BkIC6AiABdQVAAuoKgATUFQAJqCsAElBXACSgrgBIQF0BkIC6AiABdQVAAuoKgATUFQAJqKvE/itiA+DWhF1WtajUFdAJYZdP+ZsqPpy6Ajoh7JIZ9pOuAvoh75JRV0Cf5F0mv/pJXQH9kHc5PJppXE7qCuiHvEtgspZ0FdAVkde6d7WkroCuiLym6SqASuo1TV0BVFKvXboK4EXwNWqmk9QV0CHB1yJdBfCL7GvOfCGpK6BPsq8tugpgkvhryMc2UldAt8RfK3QVwAwJ2IQlVaSugJ5JwOvpKoCPhODFdBXAEnIwAXXFyR5LblLshitYf62TEeyuds+MOG5kfi8cysprnXRgF7Vpqhja6vsrwAaWXdPkAt8o3RRiaA/7Xg0WsuzaJRTYptTTU2zv7bgrwwzLrl1CgVVKQz3F9htx0E+xb4FVB8OOrLxGCQWWK43zY8HUkUlxxF/jkXcmT4fTWHyNOjkXahKNxW5aFd9pJHa/F8et6ar4H1zEEmzRodFQMuq32Dcyv5ej1fmfEcd9EkcPxI5l1h4PR7AKm7N7NJR0+idG19h2FkvUj/JOHPTT5K46+E4ctMmXp8NeLMS27BUNJaNCDG31/RWoH2JSHLFenP9XjO7tuCvDWtZiW75Jh5JaIYa2iqsUMcQCMWUjsTuVvE/OXVmODdmQDjVTqhj6zo6XurE6S2OxO787vQu3YVG2Ym1AlHjc7fPVqz3ENgMxNQOx46Zu/4IkZV02YVVAlMDc58PVSz3ENoM5eYkdHejtfcnF0mzCwozYJU3qRaoY6lJMwUjs7k/P704KFuj1lsRECdLtH6ueXsXQTcVLLhAnUJgQ2meNXuxjTJRo3fiZ6rkPsZ3Hr8eum32KKTjYaTeCzazRi83ERAmr1R+onlXFUBLx0G/EQf2J958SR3xtx0vBcSzTK72LiZJF6z5NPeUhtvOI55568slBXuq8PcQ23JqFfpnJlFmVPvXgKoZSmX/ypC91pvkJhJux1i8zDpqP0VPS6Z8YzWn++bO/3XHKlw8xBH2w4q8xzpp36VNyKcRQcvPvMr+3N3U2hmIH9Mfqv8A4dIYjJZT+idFb+PhGN3vf5erMjMVu4PEziX850TCGaioNxY7b+fhqN373qnzeaXEE8J7fydle2VRzqqojNzb/jjebhPo6Y7Eb2MRP6FSRW3/FaAfevWz2eajP/0vsA3blp3W4yLC/XoP1Pz1497K5JuH58UZiH3A8v7dDRJgVMTRI5+FgD8bv+5yXViehPttY7AYu4ke4m0i1IoYGXoOTe++tTMkPseMscddl4hygMX6c34qQ+xRz9YCPh91YmaQfYscaceZKcTKQmV/yRhGEy6LwddjC42+mzNPEi9fxVeJMoD9+/+tEaq7JzeHBq068gTJV1hiwA1HyWc3cKobWGJ617QrplKl6im2ArwmUaRG3RQxtMjz9y0ulUCbMogL2J1n+qVFbxdB3fl1nr8u2qUyb5QQcpfd8qSFbxdB+fl3ziFu0oEyeogKO1WPK1HitYugA44sfertLlClUVMAZ+sqa0+L13V3OufsJykQqKuA8XSROzdaH2D7YzI1Oe4bjlIlUVMDZ7pw7NVgfYvsUH2938vPspUzkU2wDnOuG6ROxekWwLrzpJc+2TZnIp9gGuMh9Yihi9bpgXX7rCx9yoTKRT7ENcLX0eRSxenWwrn2Ayx94rMxiiCGAZmQNpojVZoJ1w5M08vz1MR5iG6BJyUIqkrWxbP3meerrPMT2WeKuWgpIIkdaRbI2ma17PdUJL1hvUcUQQBJNx1Yka9vZuu/j1fd9idFN4hIDsQMgoUYjLEu8Hv2QdR62iUsA3EJzoZYoalUCwGkaCtxERfWgqwDO1Erm1q76XlzueGfeC4C7ZW4trZcY3dtxVwZg0s1j94jS0lUA5+sieXcsLV0FcImOwneXplFXAJfoK3yff2R90Te6CuAqPebvttbRVQAX6jSC13aPrgK4Vr8pvKqB1BXAtbpO4YUlpKsALqeuPtBVAC3oPYvn20hXATThz5//AQGt1Q4D5LzeAAAAAElFTkSuQmCC"}}

Я использую 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.info('data', data);
    })
    .catch(e => {
        console.info('Error fetching image', e)
    })

Лучше использовать encodeURIComponent(), чем replaceAll(). Он будет обрабатывать все символы, требующие специальной кодировки, а не только пробелы.

— 08.03.2024 01:38

javascript canvas fetch digital-signature

08.03.2024 01:34

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Свойство PNG выглядит как изображение в кодировке Base64. Вы можете использовать это в URL-адресе data:, который можно использовать как src для <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.info('Error fetching image', e)
    })

Здравствуйте, я не хочу использовать всю длинную ссылку на изображение Json в своем SRC, как еще я могу это сделать?

— 09.03.2024 02:12

Я не понимаю. Что вы хотите использовать вместо этого?

— 11.03.2024 17:57

08.03.2024 01:43

Я нашел решение, почему отображалось неработающее изображение подписи:

<div  class = "m-signature-pad">
                    <div  class = "m-signature-pad--body">
                        <img id = "imagefetch">
                    </div>
                </div>

                <script>

                    var docDescription = 'Please sign below';
                    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 => data.json())
                    .then(data => {
                        if (data.successful) {
                            $("#imagefetch").attr("src", "data:image/png;base64," + data.response.PNG);
                            //let img = document.querySelector("#imagefetch");
                            //img.src = 'data:img/png;base64,${data.response.PNG}';
                        }
                    })
                    .catch(e => {
                        console.info('Error fetching image', e)
                    })

                </script>

14.03.2024 00:24

Другие вопросы по теме

Как добавить Canvas и другие компоненты в графический интерфейс Swing

JavaFX Canvas TextFill Поворот

Как скрыть или показать линию холста, управляемую ползунками, с помощью Checkbuttom из Tkinter?

Аналогичные пиксели добавляются после отправки изображения через http

Проблема с регистрацией шрифта в Canvas JavaScript

Эффект параллакса и задержка с помощью Canvas — изображения, загруженные с помощью JavaScript

Как с помощью стрелок на клавиатуре управлять расположением изображения на фоновом изображении?

Rust и WASM — Как заблокировать или перевести в режим сна на X секунд, не предотвращая перерисовку Canvas?

Можно ли привязать HTML Canvas к порту JavaScript ffmpeg, чтобы получить видеофайл в качестве вывода без сервера?

Как динамически регулировать размеры холста на основе содержимого внутри прокручиваемого элемента div?

Javascript FETCH для отображения цифровой подписи в моей форме

Ответы 2

Другие вопросы по теме

Похожие вопросы