drupal 8 中的cropper API 中的数据从何而来，如何访问？

编程问答 2022-05-22

问题描述

在用户的个人资料中，我使用cropper api 来裁剪用户的图像。但是，我不确定如何获得该图像。

我目前正尝试在两个地方检索图像：

  1. 网站的标题（通过我的 .theme 文件的 account--menu.html.twig 文件）。

  2. 在群组模块中

对于header，本来我会通过这行代码取回原图：

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
    ];
}
}

这是将原始（未裁剪）图像检索到标题中。作物类型机器名称是 profile_picture 我试过 $user->profile_picture->entity->getFileUri() 但它返回 null。

在组的模块中，我已经正确显示了图像（再次未裁剪的图像），如下所示：

{% 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 %}

那么普遍，我如何显示图像的裁剪版本？

“作物 API”：

enter image description here

解决方法

您可能误解了模块 Crop API 和 Image Widget Crop 的工作原理。它们允许用户在上传过程中手动裁剪图像，如下所示： enter image description here

如果您只想以编程方式裁剪图像，则不需要上述模块。请按照以下步骤操作：

  1. 转到：管理菜单 > 配置 > 媒体 > 图像样式 > 添加图像样式（比如 profile_picture）
  2. 为该样式添加 Crop 效果并根据需要设置宽度、高度、锚点
  3. 在你的钩子函数中： 
    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
    ];
  }
}
drupal-8drupal-themingtwigtwig