Estoy trabajando en un proyecto y quiero generar un código QR, así que usé esta librería para generarlo con JS. Funciona, pero quiero guardar el código QR en el servidor. No quiero descargarlo en el lado del cliente.
No quiero usar NodeJs en mi Proyecto.
Intenté muchas formas, como enviar los datos de la etiqueta SVG a PHP y generar una imagen, pero no funcionó para mí.
Aquí están mis archivos:
índice.php
<?php // https://github.com/oblakstudio/qr-code-styling? ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>QR Code Styling</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script type="text/javascript" src="node_modules/qr-code-styling/lib/qr-code-styling.js"></script> </head> <body> <div id="canvas"></div> <script> const qrCode = new QRCodeStyling({ width: 300, height: 300, type: "svg", data: "https://www.facebook.com/", image: "test.png", margin:0, qrOptions:{ typeNumber:0, errorCorrectionLevel:'H' }, dotsOptions: { color: "#00437A", type: "classy", }, cornersSquareOptions:{ color:'#1a79a5', type:'rounded', }, cornersDotOptions:{ color:'#1a79a5', type:'dot', }, backgroundOptions: { color: "#fff", }, imageOptions: { crossOrigin: "anonymous", margin: 0 } }); qrCode.append(document.getElementById("canvas")); const svg = document.querySelector('svg'); $.ajax('ajax.php',{ 'data': svg.outerHTML, 'type': 'POST', 'processData': false, 'contentType': 'image/svg+xml' }); </script> </body> </html>ajax.php
<?php $svg = file_get_contents('php://input'); $myfile = fopen("testfile.svg", "w"); fwrite($myfile, $svg); ?>usa este código
var svgBlob = qrCode.getRawData('svg'); svgBlob.then(value => value.text().then(value => sendAjax(value))); function sendAjax(svgString) { $.ajax('ajax.php',{ 'data': svgString, //canvas.innerHTML, 'type': 'POST', 'processData': false, 'contentType': 'image/svg+xml' }); }