通过回形针（或可能 imagemagick/mini_magick）将 80% 缩放视为 100% 缩放

Question

我最初关注的是 rails 4 的 ruby​​ on rails 教程的第 3 版 (https://www.railstutorial.org)。在针对 rails 5 的教程第 4 版发布后，我更新到 rails 5，更新了我的 gemfile 中的所有内容以匹配教程中提到的更改，浏览了新教程中的差异，并在必要时进行了调整以修复问题.

几乎一切正常，但我调整了我的示例网站，以便用户可以上传自己的头像，而不是依靠在http://en.gravatar.com 上注册来上传头像。它们曾经完全按预期工作，但在更新所有内容后，80% 缩放的图像被视为 100% 缩放。我的意思是：我将中等大小的图像设置为 184x184 像素。如果您将浏览器视图缩小到 80%，头像将正确显示为 184x184 像素图像。但是，如果您在浏览器中保持默认缩放级别 100%，则出于某种原因，它们的大小为 230x230 像素。

经过大量测试和调整，这是我无法找出原因或解决方法的一个问题。以下是负责处理用户头像的代码，位于 app/models/user.rb：

  has_attached_file :avatar, :styles => { :tiny => "60x60!",
      :small  => "100x100!",
      :medium => "184x184!",
      :large => "200x200!" }, :default_url => "/assets/missing_:style.png",
  :convert_options => { :tiny => "-strip",
      :small => "-strip", 
      :medium => "-strip",
      :large => "-strip" }
  validates_attachment_content_type :avatar, content_type: /\Aimage\/.*\Z/
  validates_with AttachmentSizeValidator, attributes: :avatar, less_than: 2.megabytes

  before_post_process :check_file_size
  def check_file_size
    valid?
    errors[:avatar_file_size].blank?
    not avatar.size > 2.megabytes
  end

以下是有关上述格式中使用的感叹号的文档：http://www.imagemagick.org/Usage/resize/#noaspect（是的，我尝试使用反斜杠来保留感叹号，以防出现问题，但事实并非如此。）

这是我目前的 gemfile，尽管我在试图弄清楚所有这些时已经更改了好几次：

source 'https://rubygems.org'
  gem 'rails', '5.0.0.1'
  gem 'bcrypt', '3.1.11'
  gem 'faker', '1.6.6'
  gem 'carrierwave', '0.11.2' # Image uploader in test environment
  gem 'mini_magick', '4.6.1' # Image resizing
  gem 'fog', '1.38.0' # Image uploader in production environment
  gem 'will_paginate', '3.1.0'
  gem 'bootstrap-will_paginate', '0.0.10'
  gem 'bootstrap-sass', '3.3.6'
  gem 'puma', '3.4.0'
  gem 'sass-rails', '5.0.6'
  gem 'uglifier', '3.0.0'
  gem 'coffee-rails', '4.2.1'
  gem 'jquery-rails', '4.1.1'
  gem 'turbolinks', '5.0.1'
  gem 'jbuilder', '2.4.1'
  gem 'paperclip', '5.1.0' # For avatar uploading
  gem 'simple_form', '3.2.1'

group :development, :test do
  gem 'sqlite3', '1.3.12'
  gem 'byebug', '9.0.0', platform: :mri
end

group :development do
  gem 'web-console',           '3.1.1'
  gem 'listen',                '3.0.8'
  gem 'spring',                '1.7.2'
  gem 'spring-watcher-listen', '2.0.0'
end

group :test do
  gem 'rails-controller-testing', '0.1.1'
  gem 'minitest-reporters', '1.1.9'
  gem 'guard', '2.13.0'
  gem 'guard-minitest', '2.4.4'
end

group :production do
  gem 'pg', '0.18.4'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

以前有人遇到过这样的问题吗？

Answer 1

我注意到您在项目中同时使用了回形针和载波。我会尝试使用其中任何一个。我还建议只使用两种样式作为开始，稍后您可以在发现问题所在时添加更多样式。我在我的回形针项目中使用了下面这个简单的示例，这可能会对您有所帮助：

has_attached_file :avatar, :styles => { :medium => "300x300>", :thumb => "100x100#" }, :default_url => "/images/:style/missing.png"
validates_attachment_content_type :avatar, :content_type => /\Aimage\/.*\Z/     

在导航栏中打印头像（部分摘录）：

<li class="avatar"><%= image_tag(current_user.avatar.url(:thumb)) %></li>

CSS：

.avatar{
    background-color: white;
    border: 1px solid #d9d9d9;
    height: 60px;
    width: 60px;
    img { width: 100% }
}

显然我将缩略图裁剪为 100x100#，并在 css 中缩小了具有高度和宽度的头像以满足我的需要。

好读：https://github.com/thoughtbot/paperclip/wiki/Thumbnail-Generation

希望对你有帮助