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 的情况下转换图像吗?