JSFiddle - React, Tailwind, and code Playground

by jonjieviduya

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.js"></script>
<div class="container">
		<div class="panel-heading">Select Profile Image</div>
		<div class="panel-body">
			<input type="file" name="upload_image" id="uploadImage">
      <br><br>
			<div id="uploaded_image"></div>
		</div>
	</div>
  
  

<div>
  <div id="imageDemo"></div>
  <button class="btn btn-success" id="btnUpload">Update</button>
  <input type="text" value="" id="base64Image">
</div>

JavaScript

let $options = {
    enableExif: true,
    showZoomer: false,
    viewport: {
      width:570,
      height:300,
      type:'square' //circle
    },
    boundary:{
      width: 570,
      height: 300
    }
};
  
  let $hasImage = true;
  if($hasImage){
  	$options['url'] = 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Jean-baptiste_corot%2C_corso_di_un_fiume%2C_1845-55_ca.jpg/1200px-Jean-baptiste_corot%2C_corso_di_un_fiume%2C_1845-55_ca.jpg';
    
  }
  
  $image_crop = $('#imageDemo').croppie($options);

  $('#uploadImage').on('change', function(){
  	readFile(this);
    
    var reader = new FileReader();
    reader.onload = function (event) {
      $image_crop.croppie('bind', {
        url: event.target.result
      }).then(function(){
        // After selecting image
      });
    }
    reader.readAsDataURL(this.files[0]);
    //$('#uploadimageModal').modal('show');
  });

$('#btnUpload').on('click', function (event) {
	$image_crop.croppie('result', {
		type: 'base64',
		format: 'jpeg',
		//type: 'canvas',
		size: 'viewport'
		//size: {width: 150, height: 200}
	}).then(function (response) {
		$('#base64Image').val(response);
	});
});



function readFile(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      
      reader.onload = function (e) {
        result = e.target.result;
        arrTarget = result.split(';');
        tipo = arrTarget[0];
        validFormats = ['data:image/jpeg', 'data:image/png'];
        if (validFormats.indexOf(tipo) == -1){
        	alert('Accept only .jpg o .png image types');
          $('#uploadImage').val('');
        	return false;
        }
      }
      
      reader.readAsDataURL(input.files[0]);
    }
}