美文网首页
carrierwave自定义图片尺寸

carrierwave自定义图片尺寸

作者: DongHui | 来源:发表于2017-05-28 18:39 被阅读87次

在教程使用的carrierwave图片管理工具能够让我们上传一张图片获得不同尺寸的图片

class MyUploader < CarrierWave::Uploader::Base
  include CarrierWave::MiniMagick

  process resize_to_fit: [800, 800]

  version :thumb do
    process resize_to_fill: [200,200]
  end
  
  version :medium do
    process resize_to_fill: [400,400]
  end
end

但是同样的宽高比得出的都是四四方方的图片,如果要将图片设置成矩形该怎么办呢?比如:
在首页我要的是这个比例

在index页面我要的是这个比例:

而在show页面则是这样:

那该怎么做呢? 可能首先想到的是去把thumb和medium中的尺寸改成自己想要的,但是刷新页面发现什么都没有改变,还是老样子,为什么呢?

我们来看看官方的解释

When this uploader is used, an uploaded image would be scaled to be no larger than 800 by 800 pixels. A version called thumb is then created, which is scaled and cropped to exactly 200 by 200 pixels.
One important thing to remember is that process is called before versions are created. This can cut down on processing cost.

意思是当使Uploader时,首先就是运行这一行process resize_to_fit: [800, 800],将图片裁剪成一个固定尺寸;接着才会根据[800,800]的比例生成thumb和medium尺寸的图片。

这样看来,如果你已经建立了一个产品,那么当前图片的thumb和medium尺寸的图片已经生成了,临时更改的尺寸只能在下一个新建产品中才能有效。

注意: 在设置resize_to_fit: [width,height]的时候,如果只想固定某一个值,比如让宽度固定在1000,高度不设限,那么就可以用一个极大值代替高度,例如: [100,10000]

同样,version版本数量是完全可以自定义的,只需要在image_tag中使用相对应的URL即可,例如:定义了一个

version :small do
  process resize_to_fill: [200, 100]
end

那么只需使用<%= image_tag(event.image.small.url) %>即可。

觉得有用,麻烦看看我们的作品聚聚, 能够支持一票更好啦!!!

相关文章

网友评论

      本文标题:carrierwave自定义图片尺寸

      本文链接:https://www.haomeiwen.com/subject/dhphfxtx.html