0

There is a plugin for jquery https://github.com/acornejo/jquery-cropbox. I just don't understand how to extract this cropped image and put it into $_FILES(php), so I can save it to my server folder.

James Parsons
  • 6,097
  • 12
  • 68
  • 108
barmaxon
  • 199
  • 1
  • 15
  • "obtain the resulting cropped image as a Data URL or a binary blob to upload it to the server". Their example shows a download... see `img.getDataURL()`, you just need to post that to server instead. Maybe [read this](https://stackoverflow.com/questions/11511511/how-to-save-a-png-image-server-side-from-a-base64-data-string). – ficuscr Jun 06 '18 at 17:22
  • You can check an easy tutorial at https://www.webmotionuk.com/php-jquery-image-upload-and-crop/ and https://coderszine.com/crop-image-and-upload-using-jquery-and-php/ – Rohit.007 Jun 06 '18 at 17:30

1 Answers1

0

You can do it by DATA property of the image.

To do the said process (loading a preview of the image file), HTML5's FileReader API.

Using the FileReader API is actually simple, and it can be done like so:

Javascript

var logo = document.getElementById("logo").files[0]; // will return a File object containing information about the selected file
// File validations here (you may want to make sure that the file is an image)

var reader = new FileReader();
reader.onload = function(data) {
  // what you want to do once the File has been loaded
  // you can use data.target.result here as an src for an img tag in order to display the uplaoded image
  someImageElement.src = data.target.result; // assume you have an image element somewhere, or you may add it dynamically
}
reader.readAsDataURL(logo);

You can place this code inside your onchange event handler, and I guess you won't be needing AJAX in here.

Then when the form gets submitted, the image data can be obtained in its usual place, in the $_FILES array.

Rohit.007
  • 3,414
  • 2
  • 21
  • 33