我有一个社交媒体网站，我更新代码

Any One just add a one Function live cropping my profile pic then update

When i click update profile pic button then a popup come and then upload pic then cropping this upload pic then finally date into the database

Contant.phtml is the main index page:

<div class="user-avatar flip">
  <div class="user-avatar-uploading-container">
    <div class="user-avatar-uploading-progress">
      <i class="fa fa-spinner fa-spin fa-spin progress-icon" data-icon="spin"></i>
    </div>
  </div>
  <img id="updateImage-<?php echo $wo['user_profile']['user_id']?>" class="pointer" alt="<?php echo $wo['user_profile']['name']?> Profile Picture" src="<?php echo $wo['user_profile']['avatar']?>" onclick="Wo_OpenProfilePicture('<?php echo $wo['user_profile']['avatar_org']?>');" />
  <?php if($IsOwner === true) { ?>
    <form action="#" method="post" class="profile-avatar-changer">
      <div class="input-group">
        <span class="input-group-btn">
          <span class="btn btn-upload-image btn-file">
           <i class="fa fa-camera"></i>
            <input type="file" name="avatar" accept="image/x-png, image/jpeg" onchange="Wo_UpdateProfileAvatar();">
          </span>
        </span>
      </div>
      <input type="hidden" name="user_id" id="user-id" value="<?php echo $wo['user_profile']['user_id'];?>">
    </form>
  <?php } ?>
</div>

It's a little bit complex process, you have to follow 2 things-

1. Javascript code for allowing users to zoom in and track the position of image from where to crop (x1,y1) (x2,y2) (x3,y3) (x4,y4) and scaled ratio.
2. Then you can use these dimension in image processing tools like ffmpeg or imagemagic.