Как конвертировать SVG в изображение (JPEG, PNG и т. Д.) В браузере и сохранить на сервере для предварительного просмотра продукта, чтобы оформить заказ

Question

Я конвертирую svg, используя html2canvas, чтобы сохранить на стороне сервера в качестве предварительного просмотра продукта png перед проверкой с base64. SVG работает отлично. Это для индивидуального оформления заказа. Проблема в том, что после настройки и нажатия кнопки извлечения изображение svg не сохраняется для предварительного просмотра на странице оформления заказа перед извлечением. Причина в том, что я не пишу для php, чтобы сохранить его. Мне нужна помощь в написании PHP-кода для "savetoserver.php", чтобы сохранить на сервере

function imagetopng(){
      function showCheckout() {
        $("#checkoutcontainer").show();
        $(".productoverview").show();
        $("#popup").show();


      }
      setTimeout(showCheckout, 500);
      html2canvas($(".stole"), {
          allowTaint: true,
          letterRendering: true,
          onrendered: function(canvas) {
          $('.stole-png').prepend(canvas);
            var dataURL = canvas.toDataURL('image/png', 1.0);
            $.ajax({
              type: "POST",
              url: "savetoserver.php",
              data: {
                 imgBase64: dataURL
              }


            })
            .done(function(o) {

                var fileurl = o;
                var websiteurl = "http://woven.indexsta.com/";
                var formatted = websiteurl + fileurl;
                //var formatted = "stole-designs/" + fileurl
                $('#stole-url').attr('value', formatted);
                $('#stolepreview').attr('src', fileurl);

              // If you want the file to be visible in the browser
              // - please modify the callback in javascript. All you
              // need is to return the url to the file, you just saved
              // and than put the image in your browser.
            });
          }
      });
      $('.stole-png').empty();


    };

    $('#closecheckout').on('click touch',function(){
      $("#checkoutcontainer").css('display','none');
      $("#popup").css('display','none');

    });

Answer 1

I figured it out. Incase anyone faces same challenge, here's the script i wrote to solve it. 

<?php  
      // requires php5+ 
       // create directory
      if (!file_exists('images/')) {
        mkdir('images/', 0777, true);
      }
      define('UPLOAD_DIR', 'images/');  
      $img = $_POST['imgBase64'];  
      $img = str_replace('data:image/png;base64,', '', $img);  
      $img = str_replace(' ', '+', $img);  
      $data = base64_decode($img);  
      $file = UPLOAD_DIR . uniqid() . '.png';  
      $success = file_put_contents($file, $data);  
      print $success ? $file : 'Unable to save the file.';  
 ?>