Wie man Croppie-Ergebnis hinzufügt, um php hochzuladen und das Ergebnis zu anderer php Seite

Question

weiterzugeben

Ich versuche, eine APP zu entwickeln, die Bild von facebook sdk oder über Ajax herauflädt und schneidet unter Verwendung croppie.js und lade in mein Serververzeichnis hoch. Ich bin neu in Ajax, jQuery und PHP. Ich fand eine ähnliche App im Internet, die ich gleiche Funktionen ausführen dachte .Hier Code ist, dass app.js

function dataURItoBlob(dataURI) { 
     var byteString; 
     if (dataURI.split(',')[0].indexOf('base64') >= 0) byteString = atob(dataURI.split(',')[1]); 
     else byteString = unescape(dataURI.split(',')[1]); 
     var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; 
     var ia = new Uint8Array(byteString.length); 
     for (var i = 0; i < byteString.length; i++) { 
      ia[i] = byteString.charCodeAt(i); 
     } 
     return new Blob([ia], { 
      type: mimeString 
     }); 
    } 
    window.uploadPicture = function(callback) { 
     croppie.result({ 
      size: "viewport" 
     }).then(function(dataURI) { 
      var formData = new FormData(); 
      formData.append("design", $("#fg").data("design")); 
      formData.append("image", dataURItoBlob(dataURI)); 
      $.ajax({ 
       url: "upload.php", 
       data: formData, 
       type: "POST", 
       contentType: false, 
       processData: false, 
       success: callback, 
       error: function() { 
        document.getElementById("download").innerHTML = "Download Profile Picture"; 
       }, 
       xhr: function() { 
        var myXhr = $.ajaxSettings.xhr(); 
        if (myXhr.upload) { 
         myXhr.upload.addEventListener('progress', function(e) { 
          if (e.lengthComputable) { 
           var max = e.total; 
           var current = e.loaded; 
           var percentage = Math.round((current * 100)/max); 
           document.getElementById("download").innerHTML = "Uploading... Please Wait... " + percentage + "%"; 
          } 
         }, false); 
        } 
        return myXhr; 
       }, 
      }); 
     }); 
    } 
    window.updatePreview = function(url) { 
     document.getElementById("crop-area").innerHTML = ""; 
     window.croppie = new Croppie(document.getElementById("crop-area"), { 
      "url": url, 
      boundary: { 
       height: 400, 
       width: 400 
      }, 
      viewport: { 
       width: 400, 
       height: 400 
      }, 
     }); 
     $("#fg").on('mouseover touchstart', function() { 
      document.getElementById("fg").style.zIndex = -1; 
     }); 
     $(".cr-boundary").on('mouseleave touchend', function() { 
      document.getElementById("fg").style.zIndex = 10; 
     }); 
     document.getElementById("download").onclick = function() { 
      this.innerHTML = "Uploading... Please wait..."; 
      uploadPicture(function(r) { 
       document.getElementById("download").innerHTML = "Uploaded"; 
       window.location = "download.php?i=" + r; 
      }); 
     }; 
     document.getElementById("download").removeAttribute("disabled"); 
    }; 
    window.onFileChange = function(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 
      reader.onload = function(e) { 
       image = new Image(); 
       image.onload = function() { 
        var width = this.width; 
        var height = this.height; 
        if (width >= 400 && height >= 400) updatePreview(e.target.result); 
        else alert("Image should be atleast have 400px width and 400px height"); 
       }; 
       image.src = e.target.result; 
      } 
      reader.readAsDataURL(input.files[0]); 
     } 
    } 
    $(document).ready(function() { 
     $(".design").on("click", function() { 
      $("#fg").attr("src", $(this).attr("src")).data("design", $(this).data("design")); 
      $(".design.active").removeClass("active"); 
      $(this).addClass("active"); 
     }); 
    }); 

ich einen Frontend mit diesem Code erstellt habe. Aber ich kann nicht weiter gehen. Ich brauche upload.php Code, der auf meinen Server hochlädt und die Ausgabe an download.php sendet, wo ich Anteilknöpfe hinzufügen kann, um cropped iamge zu teilen. Bitte tun Sie etwas und teilen Sie den Code upload.php und den Code download.php mit, der mit diesem Javascript funktioniert. Danke vielmals!

Answer 1

Ich kann Ihnen nicht mit PHP helfen, aber ich habe nur ein paar Vorschläge, um Ihren Code Sie einen Klecks direkt von Croppie zurückkehren können, so dass Sie es nicht selbst bauen müssen

croppie.result({ 
    size: 'viewport', 
    type: 'blob' 
}).then(function(blob) { 
    ... 
    formData.append('image', blob, 'screenshot.png') 
    ... 
}) 

und auf Ihre onFileChange Funktion müssen Sie nicht den FileReader verwenden, können Sie einfach die

image.src = URL.createObjectURL(input.files[0]) 

verwenden