裁剪圖像並使用php上傳

我有一個裁剪圖像腳本。當用戶點擊保存按鈕時，腳本如何上傳裁剪圖像？我該如何將PHP裁剪後的圖像上傳到服務器？裁剪圖像並使用php上傳

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 
    <title>Cropper.js</title> 
 
    <!-- <link rel="stylesheet" href="dist/cropper.css"> --> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.css" /> 
 
    
 
    <style> 
 
    .container { 
 
     max-width: 640px; 
 
     margin: 20px auto; 
 
    } 
 

 
    img { 
 
     max-width: 100%; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 

 
    <div class="container"> 
 
    <h1>Cropper with a range of aspect ratio</h1> 
 
\t 
 
    <div> 
 
     <img id="image" src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" alt="Picture"> 
 
    </div> 
 
\t <button onclick="cropper.getCroppedCanvas()">Save</button> 
 
    </div> 
 

 
    <!-- <script src="dist/cropper.js"></script> --> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.js"></script> 
 
    <script> 
 
    window.addEventListener('DOMContentLoaded', function() { 
 
     var image = document.querySelector('#image'); 
 
     var minAspectRatio = 1.0; 
 
     var maxAspectRatio = 1.0; 
 
     var cropper = new Cropper(image, { 
 
     ready: function() { 
 
      var cropper = this.cropper; 
 
      var containerData = cropper.getContainerData(); 
 
      var cropBoxData = cropper.getCropBoxData(); 
 
      var aspectRatio = cropBoxData.width/cropBoxData.height; 
 
      var newCropBoxWidth; 
 

 
      if (aspectRatio < minAspectRatio || aspectRatio > maxAspectRatio) { 
 
      newCropBoxWidth = cropBoxData.height * ((minAspectRatio + maxAspectRatio)/2); 
 

 
      cropper.setCropBoxData({ 
 
       left: (containerData.width - newCropBoxWidth)/2, 
 
       width: newCropBoxWidth 
 
      }); 
 
      } 
 
     }, 
 
     cropmove: function() { 
 
      var cropper = this.cropper; 
 
      var cropBoxData = cropper.getCropBoxData(); 
 
      var aspectRatio = cropBoxData.width/cropBoxData.height; 
 

 
      if (aspectRatio < minAspectRatio) { 
 
      cropper.setCropBoxData({ 
 
       width: cropBoxData.height * minAspectRatio 
 
      }); 
 
      } else if (aspectRatio > maxAspectRatio) { 
 
      cropper.setCropBoxData({ 
 
       width: cropBoxData.height * maxAspectRatio 
 
      }); 
 
      } 
 
     } 
 
     }); 
 
    }); 
 
    </script> 
 
    <!-- FULL DOCUMENTATION ON https://github.com/fengyuanchen/cropperjs --> 
 
    <!-- My question is: How do i get the cropped image and upload via php ? --> 
 
    
 
</body> 
 
</html>

來源

2017-03-14 Otávio Barreto

檢查這一點。我已經面對這一點，它已經過測試。 http://stackoverflow.com/questions/11132841/php-jquery-image-crop-and-upload/23787221#23787221 –

這是另一個腳本，我想用這個腳本來做到這一點https://github.com/fengyuanchen/cropperjs –

如何裁剪和上傳後，點擊保存按鈕？，如何讓PHP獲得裁剪圖像並上傳到服務器？

在the readme，的方法getCroppedCanvas()描述）提到上傳裁剪後的圖像：

_{然後後，可以直接顯示在畫布作爲圖像，或使用HTMLCanvasElement.toDataURL得到一個數據URL ，或者使用HTMLCanvasElement.toBlob來獲取blob，並在瀏覽器支持這些API的情況下使用FormData將其上傳到服務器。}¹

cropper.getCroppedCanvas().toBlob(function (blob) { 
    var formData = new FormData(); 

    formData.append('croppedImage', blob); 

    // Use `jQuery.ajax` method 
    $.ajax('/path/to/upload', { 
    method: "POST", 
    data: formData, 
    processData: false, 
    contentType: false, 
    success: function() { 
     console.log('Upload success'); 
    }, 
    error: function() { 
     console.log('Upload error'); 
    } 
    }); 
});

因此，對於你例如，按鈕標記節省引用農作物但僅在DOM加載回調（即window.addEventListener('DOMContentLoaded', function() {）的回調內部限定。我會建議使用事件代理（請參閱下面提到的示例plunker），但如果您想引用截取器它將需要在DOM加載的回調之外進行聲明。

var cropper; 
window.addEventListener('DOMContentLoaded', function() { 
    //assign cropper: 
    cropper = new Cropper(image, { ...

您可以在this plunker的行動中看到它。它利用一個PHP代碼，只需要上傳的裁剪圖像並返回base64編碼版本（使用base64_encode()）。

在plunker例子中使用的PHP代碼如下：

<?php 
$output = array(); 

if(isset($_FILES) && is_array($_FILES) && count($_FILES)) { 
    $output['FILES'] = $_FILES; 

    //this is where the cropped image could be saved on the server 
    $output['uploaded'] = base64_encode(file_get_contents($_FILES['croppedImage']['tmp_name'])); 
} 
header('Content-Type: application/json'); 
echo json_encode($output);

而不只是呼應文件的base64編碼版本，move_uploaded_file()可以用來上傳文件，然後返回有關信息上傳的文件（例如文件ID，路徑等）。

move_uploaded_file($_FILES['croppedImage']['tmp_name'], '/path/to/save/cropped/image');

_{（https://github.com/fengyuanchen/cropperjs#user-content-getcroppedcanvasoptions）}

來源

2017-03-15 17:03:47

這很酷你解決它的方式，謝謝！ –

我會這麼做的！ –

裁剪圖像並使用php上傳

回答

相關問題