画像を切り抜き、PHPでアップロード

私はトリミング画像のスクリプトを持っています。ユーザーが保存ボタンをクリックしたときにスクリプトがトリミング画像をアップロードするにはどうすればよいですか？ PHPをクロップされたイメージにしてサーバーにアップロードするにはどうしたらいいですか？画像を切り抜き、PHPでアップロード

ドキュメントはgithub - cropperjsにあります。保存ボタンをクリックしたときにトリミングしてアップロードする方法

<!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をトリミング画像を取得し、サーバーにアップロードするには？

_{は、その後、あなたが直接、画像のようにキャンバスを表示する、またはデータのURLを取得するためにHTMLCanvasElement.toDataURLを使用することができます。the readmeで}

、getCroppedCanvas()方法の説明は）トリミングされた画像をアップロード言及しますブラウザでこれらのAPIがサポートされている場合は、HTMLCanvasElement.toBlobを使用してblobを取得し、FormDataでサーバーにアップロードしてください。だからあなた例えば、ボタンラベル保存参照クロッパーが、それが唯一のDOMにロードされたコールバック（すなわち、window.addEventListener('DOMContentLoaded', function() {）のコールバック内で定義されて¹

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

。イベントデリゲートを使用することをお勧めします（後述のplunkerの例を参照）。クロッパーを参照するには、DOM読み込みコールバックの外で宣言する必要があります。

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

this plunkerのアクションで確認できます。これは、アップロードされたクロップされた画像を取得し、base64でエンコードされたバージョン（base64_encode()を使用）を返すだけのPHPコードを使用します。

plunker例で使用されるPHPコードは以下に記載されている。代わりにちょうどファイルのbase64でエンコードされたバージョンをエコーの、move_uploaded_file()ファイルをアップロードした後の情報を返すために使用することができる

<?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);

アップロードされたファイル（ファイル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でアップロード

答えて

関連する問題