Angular Cloudinary 使用重力

Posted

技术标签:

【中文标题】Angular Cloudinary 使用重力【英文标题】:Angular Cloudinary using gravity 【发布时间】: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"   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"   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"   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"   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"   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"   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"   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"   crop="fill" attr.gravity="gravity">
    </cl-image>
</div>

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

【问题讨论】:

【参考方案1】:

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

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

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

<cl-transformation
  crop="crop"
  attr.
  attr.gravity="gravity"
>

CodeSandbox demo here

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

【讨论】:

以上是关于Angular Cloudinary 使用重力的主要内容,如果未能解决你的问题,请参考以下文章

Angular:Cloudinary 错误 “消息”:“cloud_name 已禁用”

使用变量时,Angular Cloudinary 宽度不起作用

如何在 Angular 中动态嵌入来自 Cloudinary 的第三方 javascript 小部件?

我可以在不将图像上传到 cloudinary 的情况下转换图像吗?

Angular cloudinary 自动播放具有响应宽度/高度的视频

在 React 中使用 Cloudinary 小部件