Question

66

Crop Image and upload with php

rated 0 times [ 71] [ 5] / answers: 1 / hits: 18821 / 7 Years ago, tue, march 14, 2017, 12:00:00

I have a crop image script. How can the script upload the cropped image when the user clicks the save button? How can I make the PHP the cropped image and upload to server?

The documentation is here on 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>

	

    <div>

      <img id=image src=https://fengyuanchen.github.io/cropperjs/images/picture.jpg alt=Picture>

    </div>

	<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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

daja

Add To Favorites

Follow

Total Points: 407

Total Questions: 103

Total Answers: 103

Location: Ghana

Member since Sun, Mar 27, 2022

2 Years ago

daja questions

1 How to delete a file in antd Upload component

Tue, Dec 21, 21, 00:00, 2 Years ago

1 map() with async vs promise.all()

Thu, Apr 23, 20, 00:00, 4 Years ago

1 React useEffect (with []) is called every time I change page (React Router)

Fri, Oct 25, 19, 00:00, 5 Years ago

1 Detect URL change in querystring

Fri, Sep 6, 19, 00:00, 5 Years ago

1 How to query relations with Knex.js?

Tue, Jul 23, 19, 00:00, 5 Years ago

View All

answered 7 Years ago jaydon · Accepted Answer

how to crop and upload when click save button? , How to make the php get the cropped image and upload to server?

In the readme, the description of method getCroppedCanvas() mentions uploading a cropped image:

_{After then, you can display the canvas as an image directly, or use HTMLCanvasElement.toDataURL to get a Data URL, or use HTMLCanvasElement.toBlob to get a blob and upload it to server with FormData if the browser supports these APIs.}¹

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

    }

  });

});

So for your example, the button labeled save references cropper but that is only defined inside the callback of the DOM-loaded callback (i.e. window.addEventListener('DOMContentLoaded', function () {). I would recommend using an event delegate (see example plunker mentioned below) but if you wanted to reference cropper it would need to be declared outside the DOM-loaded callback.

var cropper;

window.addEventListener('DOMContentLoaded', function () {

    //assign cropper:

    cropper = new Cropper(image, { ...

You can see it in action in this plunker. It utilizes a PHP code that merely takes the uploaded cropped image and returns the base64 encoded version (using base64_encode()).

The PHP code used in the plunker example is listed below:

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

Instead of just echoing the base64-encoded version of the file, move_uploaded_file() could be used to upload the file and then return information about the uploaded file (e.g. file ID, path, etc).

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

¹_{(https://github.com/fengyuanchen/cropperjs#user-content-getcroppedcanvasoptions)}