Save Image to MySQL After crop Using ajax And PHP

Question

Below code crops the image after chosen from the local then provides a copy.

Is there a possible way to save the cropped image to MySQL as I have seen many articles but they use PHP for both server side and client side but as am using this to a mobile app where that allows JavaScript or Jquery in client side. And on server side am using PHP.

JSfiddel

HTML:

 <body ng-app="app" ng-controller="Ctrl">
      <div>Select an image file: <input type="file" id="fileInput" /></div>
      <div class="cropArea">
        <img-crop image="myImage" result-image="myCroppedImage"></img-crop>
      </div>
      <div>Cropped Image:</div>
      <div><img ng-src="{{myCroppedImage}}" /></div>
    </body>

JS:

angular.module('app', ['ngImgCrop'])
  .controller('Ctrl', function($scope) {
    $scope.myImage='';
    $scope.myCroppedImage='';

    var handleFileSelect=function(evt) {
      var file=evt.currentTarget.files[0];
      var reader = new FileReader();
      reader.onload = function (evt) {
        $scope.$apply(function($scope){
          $scope.myImage=evt.target.result;
        });
      };
      reader.readAsDataURL(file);
    };
    angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);
  });

There is no such thing as using php client side, browsers don't run php — charlietfl
– charlietfl, Commented Jul 11, 2015 at 13:14
@charlietfl this am not using this as a web app this is go in to b converted to a mobile application using phonegap. FYI: phone gap do not support php( that supports only HTML,CSS,JAVASCRITPS) ON CLIENT SIDE. — Shaik
– Shaik, Commented Jul 11, 2015 at 15:12
@vanarajcs sorry for late reply if you have not yet figured it out the first thing you have to do is let the user crop the image later the second image where the cropped is projected keep that in a hidden field pass that src to Mysql save is as a bloob and let me know if works — Shaik
– Shaik, Commented Sep 8, 2015 at 6:39

vanarajcs · Accepted Answer · 2015-09-10 06:55:15Z

1

Try this.

 $data = json_decode(file_get_contents('php://input'), true);

 $img = str_replace('data:image/png;base64,', '', $data['img']);

 $img = str_replace(' ', '+', $img);

 $data = base64_decode($img);

 $file = "images/4.jpg";

 file_put_contents($file, $data);

answered Sep 10, 2015 at 6:55

vanarajcs

9782 gold badges7 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Save Image to MySQL After crop Using ajax And PHP

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related