如何添加Croppie結果上傳PHP，並將結果傳遞給其他PHP頁面

Question

我想開發一個應用程序，它從Facebook SDK或通過AJAX上傳和作物使用croppie.js獲取圖像，並上傳到我的服務器目錄。我是Ajax，jQuery和PHP的新手。我發現在互聯網上類似的應用程序執行我想。這裏是代碼的那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"); 
     }); 
    }); 

我已經創建了這個代碼前端相同的功能。但我不能去further.I需要upload.php的代碼上傳到我的服務器和輸出發送到的download.php在那裏我可以添加共享按鈕共享裁剪iamge。請不要needfull和共享可能upload.php的代碼和代碼的download.php與此JavaScript的工作。非常感謝！

Answer 1

我不能幫你用PHP，但我只是對你的代碼 幾點建議您可以直接從croppie返回一個blob，所以你不需要建立它自己

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

和您的onFileChange功能您不必使用FileReader，您可以只使用

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