Rails:从Cloudinary检索JPG而不是HEIC

Question

我目前正在开发一个使用ActiveStorage的Rails6应用程序，我试图将图像渲染为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 => :jpg , 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

在Rails6中，.key将返回Cloudfare的镜像ID。

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

Answer 2

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

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

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

Answer 3

看起来您正在将完整的url发送到cl_image_tag方法。

cl_image_tag只需要公共id来生成url。所以调用应该是：

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

当然，请确保将上面硬编码的public id更改为保存public 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自动优化图像