title: Save QR-Code as an Image on Server-Side with JS/PHP
body: <p>I am working on a Project and I want to generate a QR-Code, so I used the this <a href="https://github.com/kozakdenys/qr-code-styling" rel="nofollow noreferrer">Lib</a> to generate it with JS. It works, but I want to save the QR-Code on the Server. I don't want to Download it on Client-Side.</p>
  <p>I don't want to use NodeJs in my Project.</p>
  <p>I tried many ways like sending the SVG-Tag Data to PHP and generating an Image, but it didn't work for me.</p>
  <p>Here are my files:
  <br>
  index.php
  <br></p>
  <pre><code>&lt;?php
  // https://github.com/oblakstudio/qr-code-styling?
  ?&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;title&gt;QR Code Styling&lt;/title&gt;
      &lt;script
                src=&quot;https://code.jquery.com/jquery-3.6.0.min.js&quot;
                integrity=&quot;sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=&quot;
                crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;node_modules/qr-code-styling/lib/qr-code-styling.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id=&quot;canvas&quot;&gt;&lt;/div&gt;
  &lt;script&gt;
          const qrCode = new QRCodeStyling({
          width: 300,
          height: 300,
          type: &quot;svg&quot;,
          data: &quot;https://www.facebook.com/&quot;,
          image: &quot;test.png&quot;,
          margin:0,
          qrOptions:{
              typeNumber:0,
              errorCorrectionLevel:'H'
          },
          dotsOptions: {
              color: &quot;#00437A&quot;,
              type: &quot;classy&quot;,
  
          },
          cornersSquareOptions:{
              color:'#1a79a5',
              type:'rounded',
  
          },
          cornersDotOptions:{
              color:'#1a79a5',    
              type:'dot',
          },
          backgroundOptions: {
              color: &quot;#fff&quot;,
          },
          imageOptions: {
              crossOrigin: &quot;anonymous&quot;,
              margin: 0
          }
      });
  
      qrCode.append(document.getElementById(&quot;canvas&quot;));
      const svg = document.querySelector('svg');
      $.ajax('ajax.php',{
          'data': svg.outerHTML,
          'type': 'POST',
          'processData': false,
          'contentType': 'image/svg+xml'
      });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>ajax.php</p>
  <pre><code>&lt;?php
  $svg = file_get_contents('php://input');
  $myfile = fopen(&quot;testfile.svg&quot;, &quot;w&quot;);
  fwrite($myfile, $svg);
  ?&gt;
  </code></pre>