Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to Convert SVG to Image (JPEG, PNG) in Browser & Save on Server

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.60k
    Answer it

    How to Convert SVG to Image (JPEG, PNG) in Browser & Save on Server for product preview to checkout

     

    I'm converting svg using html2canvas to save on server side as png product preview before checkout with base64. The svg works fine. It's for a customized item checkout. The problem is after customization and checkout is clicked, the svg image does not save to preview on checkout page before checking out. Reason is i don't what to write to for the php to save it. I need help in writing the php code for "savetoserver.php" to save to server.

     

    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');
    
        });

     

 0 Answer(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: