Angular 多云使用重力

Question

呃，这很烦人。所以我正在尝试使用 Cloudinary for 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>

失败并出现错误：

If 'cl-image' is an Angular component and it has 'gravity' input, then verify that it is part of this module.

不好。所以我想因为上面 link 的例子使用了 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>

并得到这个错误：

If 'cl-transformation' is an Angular component and it has 'gravity' input, then verify that it is part of this module.

嗯，所以我改成了这样：

<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>

还是没有报错，就是对焦不准。有谁知道我做错了什么？

Answer 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

开工单

Angular 多云使用重力

Angular Cloudinary using gravity

cloudinary

angular