Как заставить @ 2x соглашение об именовании Apple для изображений сетчатки работать на приложение с рельсовым интерфейсом?

Question

Я работаю над рельсами бэкэнда нативного приложения.

В собственном приложении изображения сетчатки (с высоким разрешением) автоматически загружаются в соответствии с соглашением об именах @2x.

Например, вы можете иметь два изображения с именами image.png и image@2x.png (версия того же изображения с более высоким разрешением). Если приложение работает на iPhone 3gs, автоматически загружается image.png. Если приложение используется на iPhone 4, image@2x.png будет загружено автоматически.

Это соглашение @2x не работает для неродных веб-приложений в соответствии с тем, что я прочитал и увидел в действии.

Кажется, что соглашение Apple @2x не работает для изображений, предоставляемых бэкэндом Rails. Я знаю, что медиа-запросы могут помочь с этим, но мне интересно, есть ли какой-то способ обойтись для того, чтобы iPhone 4 автоматически загружал @2x изображений из веб-приложения вместо не высокого разрешения.

Answer 1

Я предлагаю следующее:

В вашем приложении rails создайте разные версии изображений при загрузке.

Затем в приложении iOS вы можете взглянуть на scaleсвойство UIScreen и определить, какое изображение загрузить:

if ([[UIScreen mainScreen] scale] == 2.0f){
  //load retina image
} else {
  //load non-retina image
}

Answer 2

Драгоценный камень HiSRC прекрасно работает: https://github.com/haihappen/hisrc-rails

Он использует то же соглашение о присвоении имен, что и Apple (@ 2x для изображений сетчатки), и автоматически использует правильное.

Я использовал это вв сочетании с CarrierWave , создающим две миниатюрные версии при загрузке:

version :retina_thumb do
  process :resize_to_fill => [200, 200]
  def full_filename (for_file = model.photo.file)
    "thumb@2x.jpg"
  end
end

version :thumb, :from_version => :retina_thumb do
  process :resize_to_fill => [100, 100]
  def full_filename (for_file = model.photo.file)
    "thumb.jpg"
  end
end

И на ваш взгляд:

<%= responsive_image_tag user.photo_url(:thumb).to_s %>

Еще один камень, который я пробовал, был Чистые глаза, но я не мог заставить его работать ...

Answer 3

Что вы думаете об этом подходе:

Загрузка необработанного файла с высоким разрешением, а затем просто сгенерируйте 3 разных размера.Вот для модели Icon, которую я хочу реализовать:

  has_attached_file :attachment,
  storage: :s3,
  s3_credentials: Rails.configuration.aws,
  s3_protocol: :https,
  s3_host_name: 's3.amazonaws.com',
  url: ':s3_domain_url',
  path: ':class/:attachment/:id_partition/:style_:basename.:extension',
  styles: {
    '@3x_thumb': '192x192>',
    '@2x_thumb': '128x128>',
    'thumb': '64x64>'
  },
  convert_options: { 
    all: '-strip', 
    '@3x_thumb': '-quality 100 -interlace Plane', 
    '@2x_thumb': '-quality 100 -interlace Plane', 
    'thumb': '-quality 100 -interlace Plane'
    },
  :s3_headers => { 'Cache-Control' => 'max-age=3600' }

Я не уверен, какие опции преобразования верны, но проблема с именами и размерами решена.

Answer 4

Я упаковал решения как драгоценный камень https://github.com/jhnvz/retina_rails

Все, что вам нужно сделать, это:

1. Добавьте gem 'retina_rails' в свой Gemfile.
2. Выполнить bundle install.
3. Добавьте //= require retina в свой файл манифеста Javascript (обычно находится в app / assets / javascripts / application.js).

Carrierwave

1. Добавьте include RetinaRails::CarrierWave в конец вашего загрузчика

   class ExampleUploader < CarrierWave::Uploader::Base
   
     version :small do
       process :resize_to_fill => [30, 30]
     end
   
     include RetinaRails::CarrierWave
   
   end
   

Скрепка

1. Добавьте include RetinaRails::Paperclip в конец вашего загрузчика

   class ExampleUploader < ActiveRecord::Base
   
     has_attached_file :image,
       :styles => {
          :original => ["800x800", :jpg],
          :big => ["125x125#", :jpg]
        }
   
     include RetinaRails::Paperclip
   
   end
   

Драгоценный камень автоматически генерирует версии сетчатки (добавляет @ 2x к имени файла) на основе определенных вами версий в загрузчике. Js проверяет, есть ли у пользователей отображение на сетчатке и, если да, добавляет @ 2x к имени файла изображения.

Также опубликовал этот ответ в: Как генерировать jpeg-изображения с поддержкой Retina (iPad) (прогрессивные или чересстрочные) с помощью CarrierWave?

Answer 5

Я написал камень для рельсов Это должно решить проблему