Where does the data go from the cropper API in drupal 8 and how do you access it?

Question

Within the user's profile, I'm utilizing the cropper api to get the user's image cropped. However, I'm not sure how I am able to obtain that image.

I'm currently attempting to retrieve the image in two places:

1. The site's header (through my .theme file for the account--menu.html.twig file).

2. In the groups module

For the header, originally I would retrieve the original image through this line of code:

function kropotkin_preprocess_menu__account(&$variables)
{

$uid = \Drupal::currentUser()->id();

if($uid > 0)
{
    $user = \Drupal\user\Entity\User::load($uid);

    if (!$user->user_picture->isEmpty()) {
      $picture = file_create_url($user->user_picture->entity->getFileUri());
    }else{
      $picture = 'nothing here';
    }

    // Set variables
    $variables['comradery'] = [
        'profile_picture' => $picture
    ];
}
}

This is retrieving the original (uncropped) image into the header. The crop type machine name is profile_picture I have tried $user->profile_picture->entity->getFileUri() but it returned null.

Within the group's module I already have images being displayed properly (again uncropped images) like so:

{% for contributor, child in content.field_project_contributor if contributor|first != '#' %}
                        <a href="{{ path('entity.user.canonical', {'user': child["#options"].entity.id}) }}" class="mr-_5">
                            <div class="image-profile image-profile-md">
                                <img src="{{ file_url(child['#options'].entity.user_picture.entity.fileuri) }}" alt="">
                            </div>
                        </a>
                    {% endfor %}

So universally, how do I display the cropped version of the image?

The "crop API" :

Answer 1

You are probably misunderstanding how modules Crop API and Image Widget Crop work. They allow the user to crop the image manually during upload like this:

If all you want is to crop the image programmatically, you don't need the above modules. Follow these steps:

1. Go to: Admin menu > Configuration > Media > Image styles > Add image style (let's say profile_picture)
2. Add Crop effect for that style and set Width, Height, Anchor as you want
3. In your hook function:

   use Drupal\image\Entity\ImageStyle;
   
   function kropotkin_preprocess_menu__account(&$variables) {
     $uid = \Drupal::currentUser()->id();
     if ($uid > 0) {
       $user = \Drupal\user\Entity\User::load($uid);
       if (!$user->user_picture->isEmpty()) {
         $uri = $user->user_picture->entity->getFileUri();
         $picture = ImageStyle::load('profile_picture')->buildUrl($uri);
       } else {
         $picture = 'nothing here';
       }
   
       // Set variables
       $variables['comradery'] = [
         'profile_picture' => $picture
       ];
     }
   }