Rails：从Cloudinary检索JPG而不是HEIC

Question

我目前正在使用ActiveStorage在Rails 6应用程序上工作，我正在尝试将图像渲染为jpg。我正在使用Cloudinary渲染图像。我正在尝试在我的Web应用程序中支持.HEIC图像。用户可以将HEIC图片上传到Cloudinary，但我希望我的应用程序将图片呈现为jpg

[渲染图像时，我看到浏览器正在渲染浏览器不支持的HEIC图像。

ActiveStorage将映像上传到云：

Redirected to http://res.cloudinary.com/XXXXXXXXX/image/upload/xxxxxxxxxxxq3r4.HEIC
Completed 302 Found in 24ms (ActiveRecord: 16.1ms | Allocations: 2588)
[ActiveJob] [ActiveStorage::AnalyzeJob] [ac0d5880-xxxxxxxxxxxxxxxxxxxxxxxxxx]   Cloudinary Storage (338.6ms) Downloaded file from key: kjpith3bxxxxxxxxxxxxxxxx
[ActiveJob] [ActiveStorage::AnalyzeJob] [ac0d5880-a243-4fef-xxxxxxxxxxxxxxxxxxxx] Skipping image analysis because ImageMagick doesn't support the file

但是，我尝试使用以下方法将视图中的图像渲染为jpg。

<%= cl_image_tag(url_for(post.image), :format => :png , class: "card-home__img") %>

但是图像仍从该URL调用HEIC图像格式：

https://res.cloudinary.com/artsyspace/image/upload/v1584732132/wbnknx9ighl6p4ok072u7kd8r5og.heic

而不是调用jpg

https://res.cloudinary.com/artsyspace/image/upload/v1584732132/wbnknx9ighl6p4ok072u7kd8r5og.jpg

如何配置Cloudinary和ActiveStorage以渲染图像或将图像转换为jpg？

Answer 1

[很奇怪，the documentation in one place说参数是fetch_format，而another显示了使用format的示例。

最坏的情况是，如果您在使用cl_image_tag帮助程序时遇到问题，则可以编写自己的URL来构造带有.png扩展名的URL。

https://res.cloudinary.com/artsyspace/image/upload/v1584732132/wbnknx9ighl6p4ok072u7kd8r5og.jpg

Answer 2

似乎您要将完整的URL发送到cl_image_tag方法。

cl_image_tag仅需要公共ID即可生成网址。因此调用应为：

<%= cl_image_tag("wbnknx9ighl6p4ok072u7kd8r5og", :format => :png , class: "card-home__img") %>

当然，请确保将上面的硬编码公共ID更改为包含公共ID的变量。]​​>

您可以在上传的响应中获取资源的公共ID。

以及关于Cloudinary的format和fetch_format之间的区别的一个注释：

format将更改资源的扩展名，即

Cloudinary::Utils.cloudinary_url('sample', :format => "png")
将产生https://res.cloudinary.com/demo/image/upload/sample.png

使用fetch_foramt时，将使用相关标志更改格式，即

Cloudinary::Utils.cloudinary_url('sample', :fetch_format => "png")
将产生https://res.cloudinary.com/demo/image/upload/f_png/sample

在这种情况下，两者都将产生相同的png图像，但是使用fetch_format将允许使用Cloudinary的最佳功能之一，该功能是使用:fetch_format => "auto"自动优化图像：https://res.cloudinary.com/demo/image/upload/f_auto/sample