Angular Cloudinary 使用重力答案

【问题标题】：Angular Cloudinary using gravityAngular Cloudinary 使用重力
【发布时间】：2021-04-17 13:46:40
【问题描述】：

呃，这很烦人。因此，我尝试将Cloudinary 用于Angular，并且文档讨论了 gravity，这很棒。

https://cloudinary.com/documentation/angular_image_manipulation

所以我设置了一个测试：

<div style="height: 500px; width: 200px;">
    <cl-image public-id="brands/fiit_ymk1jy" height="200" width="500" crop="fill" gravity="faces">
    </cl-image>
</div>

这很有效，亲爱的。然后我想，如果我想做面部或中心会发生什么，这取决于一个变量。所以我添加了一些代码：

public gravity: string;

@Input() public useFace: boolean;

constructor() {
    this.gravity = this.useFace ? 'faces' : 'center';
}

我想我可以将我的 html 更新为：

<div style="height: 500px; width: 200px;">
    <cl-image public-id="brands/fiit_ymk1jy" height="200" width="500" crop="fill" [gravity]="gravity">
    </cl-image>
</div>

失败并出现错误：

如果 'cl-image' 是一个 Angular 组件并且它有 'gravity' 输入，那么验证它是这个模块的一部分。

不好。所以我想因为上面链接上的例子使用 cl_transformation 那么我也应该这样做。所以我这样做了：

<div style="height: 500px; width: 200px;">
    <cl-image public-id="brands/fiit_ymk1jy" height="200" width="500" crop="fill">
        <cl-transformation [gravity]="gravity"></cl-transformation>
    </cl-image>
</div>

得到了这个错误：

如果“cl-transformation”是一个 Angular 组件并且它有“gravity”输入，那么验证它是这个模块的一部分。

嗯，所以我改成这样了：

<div style="height: 500px; width: 200px;">
    <cl-image public-id="brands/fiit_ymk1jy" height="200" width="500" crop="fill">
        <cl-transformation gravity="faces"></cl-transformation>
    </cl-image>
</div>

哪个有效..... 所以我认为它一定与页面底部的内容有关，所以我将我的 html 更改为：

<div style="height: 500px; width: 200px;">
    <cl-image public-id="brands/fiit_ymk1jy" height="200" width="500" crop="fill" [attr.gravity]="gravity">
    </cl-image>
</div>

没有错误，但没有专注于面部。我在代码中改变了我的重力：

public gravity: string = "faces";

constructor() {}

再次运行它，仍然没有错误但没有聚焦。然后我将我的 html 更改为：

<div style="height: 500px; width: 200px;">
    <cl-image public-id="brands/fiit_ymk1jy" height="200" width="500" crop="fill">
        <cl-transformation [attr.gravity]="gravity"></cl-transformation>
    </cl-image>
</div>

同样，没有错误，但没有重点区域。所以我尝试了：

<div style="height: 500px; width: 200px;">
    <cl-image public-id="brands/fiit_ymk1jy" height="200" width="500" crop="fill">
        <cl-transformation attr.gravity="{{gravity}}"></cl-transformation>
    </cl-image>
</div>

没有错误，但没有再次集中注意力。所以我然后尝试了这个：

<div style="height: 500px; width: 200px;">
    <cl-image public-id="brands/fiit_ymk1jy" height="200" width="500" crop="fill" attr.gravity="{{gravity}}">
    </cl-image>
</div>

仍然没有错误，但仍然没有聚焦。有谁知道我做错了什么？

【问题讨论】：

标签： angular cloudinary

【解决方案1】：

在你的 app.component.ts 中，你可以像这样声明你的变量：

public imageHeight = "200";
public gravity = "faces";

然后在您的 app.component.html 中，在您的 cl-transformation 元素中，您可以使用关键字 attr.：

<cl-transformation
  crop="crop"
  attr.height="{{imageHeight}}"
  attr.gravity="{{gravity}}"
>

CodeSandbox demo here

还有一种可能是，我们的算法无论出于何种原因都没有在您的图像中检测到人脸。如果是这种情况，您可能不得不通过提供 x 和 y 坐标或将gravity 设置为"north" 或"south_east" 来求助于手动解决方法。如果您想讨论您的特定图像，您能否提供您的云名称和相关图像？如果你不想在这里透露这些，你可以随时在https://support.cloudinary.com开票

【讨论】：