Как извлечь QR код СБП из SVG base64 после перевода счета в другой банк

При переводе расчетного счета в новый банк часто возникает задача автоматически прикреплять QR-код СБП к счету на оплату. После запроса по API банк возвращает ссылку на страницу оплаты, где QR-код представлен в формате data:image/svg+xml;base64. Проблема в том, что этот код не лежит в HTML-атрибутах или DOM-элементах - его можно увидеть только во вкладке "Источники" (Sources) браузера. В этой статье мы разберём, как программно извлечь такое изображение и использовать его в документе.

Почему QR-код не отображается в HTML

Многие банки генерируют QR-код динамически через JavaScript, встраивая его как data:URI (Base64) непосредственно в SVG-элемент. Это означает, что при простом парсинге HTML вы не найдёте ссылку на изображение - она появляется только после выполнения скриптов. Вкладка "Источники" в Chrome показывает все ресурсы, загруженные страницей, включая сгенерированные скриптами data:URI.

Методы извлечения QR-кода

1. Использование headless-браузера (рекомендуется)

Самый надёжный способ - эмулировать работу браузера с помощью инструментов вроде Puppeteer (Node.js), Selenium или Playwright. Вы открываете страницу оплаты, дожидаетесь полной загрузки всех скриптов, а затем извлекаете содержимое SVG-элемента или data:URI.

• Puppeteer (Node.js): await page.goto(url); const qr = await page.evaluate(() => document.querySelector('img').src);
• Python + Selenium: driver.get(url); qr = driver.find_element_by_tag_name('img').get_attribute('src');
• Playwright (Python): page.goto(url); qr = page.eval_on_selector('img', 'el => el.src');

После получения base64-строки вы можете декодировать её в PNG или сохранить как SVG-файл и вставить в счет.

2. Анализ сетевых запросов

Если headless-браузер недоступен, можно перехватить ответ от API, который содержит ссылку на страницу оплаты. Иногда банк возвращает не только URL, но и сам QR-код в виде base64 в теле ответа. Проверьте документацию вашего банка - возможно, достаточно просто распарсить JSON-ответ.

3. Прямое декодирование data:URI

Если вы уже получили data:image/svg+xml;base64, то извлечь его очень просто: отбросьте префикс data:image/svg+xml;base64, и декодируйте оставшуюся часть. На Python это делается так:

import base64
svg_data = qr.split(',')[1]
with open('qrcode.svg', 'wb') as f:
    f.write(base64.b64decode(svg_data))

На PHP: file_put_contents('qrcode.svg', base64_decode(explode(',', $qr)[1]));

Как прикрепить QR-код к документу счета

После извлечения SVG-файла вы можете вставить его в PDF-счет или HTML-шаблон. Для PDF используйте библиотеки вроде TCPDF (PHP) или ReportLab (Python). В HTML просто вставьте тег <img src="data:image/svg+xml;base64,..." />. Убедитесь, что QR-код имеет достаточный размер для сканирования (минимум 200×200 px).

Автоматизация процесса

Чтобы полностью автоматизировать прикрепление QR-кода, напишите скрипт, который:

1. Запрашивает у банка ссылку на оплату по номеру заказа.
2. Открывает страницу в headless-браузере и извлекает data:URI.
3. Декодирует base64 в SVG.
4. Встраивает изображение в шаблон счета.
5. Генерирует итоговый документ (PDF/HTML) и отправляет клиенту.

Такой подход работает независимо от языка программирования - выберите тот, который вам удобнее (Python, Node.js, PHP).