Sharing my photo-crop plugin

demo
23

Hello sir!

I tried to solve the problem using the Blob solution you suggested but it didn’t work, Therefore, I changed the way to solve the problem; instead I opted to just pass the image coordinates to the server for cropping (via ImageMagick) - That worked, But I had to use a different plugin to have access to that functionality.

There’s a huge needed within the Ionic community to have a crop plugin that works out of the box with minimal effort; I hope you keep working on yours and make this happen, would be amazingly cool!
-J

24

Hi @jlstr,

Thank you for your feedback. First of all I completely agree with you. There is absolutely the need for a solid cropper that is easy to get up and running. From what I know there are not many good alternatives. My focus has shifted away a little bit from hybrid development but I am trying to update the plugin every so often.

I am curious why my suggestion didn’t work. Could you tell me why or what went wrong? I dug up some code that worked for me in the past that transforms the canvas to a BLOB before sending it. It uses the blue-imp canvas-to-blob polyfill, but you might as well craft your own from the Mozilla page. Integrating this in the library might be worth exploring. It needs some more testing because I no longer have a working example ready. When I do, I will put it on the README page for easier integration.

  var formData = new FormData();
  formData.append('image', window.dataURLtoBlob(canvas.toDataURL('image/jpeg', 85)));

It uses the following options. The content-type undefined explicitly removes the default content-type.

var http_options = {
  url: 'http://....',
  method: 'post',
  headers: {
     'Content-Type': undefined
  },
  data: formData
}

$http(http_options).then(...)

Other options, for example the cordova-file-transfer plugin are worth looking into. Once my thesis is completed I will try to create some better examples to get the whole integration process as smooth as possible.

There is currently a roadmap that addresses one of your issues. It aims to expose the properties from the cropper on jr-crop instance. However this would require a change in the API because now only the modal gets returned, rather than the instance. On the short-term I could create a flag in the options that changes the output in the resolved promise from a canvas to the new coordinates. For obvious reasons I would rather see it working as it should be so I hope this will get it to work.

If you could please comment on the roadmap that would be great. I really require input on what is needed before I start doing any major work.

25

any interest in porting to ionic2?

27

Absolute fantastic! works perfect for me in ios and android. easy to install as well. I choose the toDataURL option and send everything to my php backend.

In case somebody would like to use my finished PHP code to handle the base64 image and save to your server.

<?

	header('Content-Type: application/json; charset=utf-8');
	
	$_POST = json_decode(file_get_contents('php://input'), true);
    $image = $_POST['IMAGE'];
    
        list($type, $image) = explode(';', $image);
        list(, $image)      = explode(',', $image);
        $image = base64_decode($image);

        // chose a folder on your server and a filename for your image before this point and dont forget to give the /upload folder permission 755 
        $filename = '/upload/myimage.jpg';
        $filename_temp = $_SERVER['DOCUMENT_ROOT'].$filename;
        file_put_contents($filename_temp, $image);

        //define image link and give it back to your application
        $file_url_complete = 'https://www.your_domain.com'.$filename;
        $output = array("IMG_URL"=>$file_url_complete);

    // OUTPUT
    echo json_encode($output); // all done

?>

I changed my crop() function to send everything to the php file above and get back the image url from your server as response.

  $scope.image = 'img/alan_new.jpg';    

        $scope.crop = function(image) {
    $jrCrop.crop({
      url: image,
      width: 300,
      height: 300
    }).then(function(canvas) {

  $scope.avatar = canvas.toDataURL("image/jpeg", 0.8);    
      
      $http({
      url: 'https://www.your_domain.com/json_mobile_image_upload.php',
      method: 'post',
      headers: {
        'Content-Type': undefined
      },
      data: { IMAGE: $scope.avatar }
    }).then(function(response) {
      
      console.log(JSON.stringify(response.data, null, 4));
      
    });
  
   $ionicModal.fromTemplateUrl('views/common/image_upload.html', function(modal) {
    $scope.modal = modal;

    modal.show().then(function() {
      document.querySelector('.cropped-canvas').appendChild(canvas);
    });
  });
    });
   };

Of course this is pretty raw still and you need to add your handling for the actual response and if something went wrong on your server but I guess this is easy enough to adapt. How ever I hope this helps another newbie like me to use this great plugin with php backend server.

good luck with it and thanks to @jorami for this plugin!

28

Can jr-crop work with a base64 image? For example when using the cordova-plugin-camera it returns a base64 image.

If anyone has an example it would be appreciated. Thanks

Here is an example of the cordova-plugin-camera implementation.

takePhoto() {
    Camera.getPicture({
        destinationType: navigator.camera.DestinationType.DATA_URL,
        sourceType: navigator.camera.PictureSourceType.CAMERA,
        allowEdit: false,
        encodingType: navigator.camera.EncodingType.JPEG,
        targetWidth: 400,
        targetHeight: 400,
        quality: 75,
        saveToPhotoAlbum: false,
        correctOrientation: true
    }).then(imageData => {
        this.zone.run(() => {
            this.base64Image = "data:image/jpeg;base64," + imageData;
        });
    }, error => {
        console.log("ERROR -> " + JSON.stringify(error));
        alert("ERROR: " + JSON.stringify(error));
    });
}
29

You can use the camera plugin with jr-crop easy…

Just use it like this…

// we try to get the image from a camera
	var options = {
		destinationType: Camera.DestinationType.FILE_URL,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 400,
targetHeight: 400,
quality: 75,
saveToPhotoAlbum: false,
correctOrientation:true
	};
	$cordovaCamera.getPicture(options)
		.then(function(imageURI) {
			
			//console.log('camera data: ' + angular.toJson(data));
			//$scope.pictureUrl = 'data:image/jpeg;base64,' + data;
			
			var image = document.getElementById('myImage');

    console.log('CAMERA FOTO URL:' +imageURI);
    
    $scope.crop(imageURI);
		
		}, function(error) {
			console.log('camera error: ' + angular.toJson(error));
		});
   
    }; // end of edit profile foto

and than the rest of my code form before with the crop function. You can send all to the server and handle the rest with my php script above. This conclude the entire process from taking the photo until server upload via PHP

30

Great plugin, i was looking for a plugin which let me put many pics next to each other or in square

31

Please add grid box over the part which is being cropped OR over the image view.

32

Hello guys,

I am a bit confused on how I should use this npm import on Ionic 2 https://github.com/JrSchild/jr-crop/pull/44

33

Hello Sir,
can you provide the demo to implement it in ionic.

Thanks for help.

34

Does it work on Android and Ios?

35

Good Evening dear Forum,
looks very cool with the cat.
Sorry in advance I am not very good with forums. I just waned to test a finished App with which was build with ionicjs. I even pay for it in the App-Store - if someone has a recommendation to experience the “haptic” and maybe point me to an App with a few buttons, lists and some native iOS11 elements?
Many thanks and a good evening, leo

36

Is there any support for ionic 3 ?