Carrierwave i mini_magick znajdowanie szerokości i wysokości

Question

Po krótkim śledztwie postanowiłem użyć Carrierwave i mini_magick na mojej nowej aplikacji rail3.

Ustawiłem to i działa idealnie. Mam jednak jedno pytanie, czy chciałbym mieć dostęp do szerokości i wysokości, więc mogę poprawnie utworzyć kod HTML. Jednak nie ma domyślnego sposobu pobierania tych informacji i ze względu na sposób, w jaki przechowuje dane, nie jestem tak naprawdę jakbym mógł dodawać do bazy danych.

Czy ktoś ma jakieś wskazówki lub pomysły? Czy to możliwe?

Answer 1

class Attachment 
    mount_uploader :file, FileUploader 

    def image 
    @image ||= MiniMagick::Image.open(file.path) 
    end 
end 

i używać go tak:

Attachment.first.image['width'] # => 400 
Attachment.first.image['height'] # => 300 

Answer 2

Tylko dla przypomnienia, użyłem podobnego rozwiązania, jednak przy użyciu plików z Mongo GridFS, tu idzie:

def image 
    @image ||= MiniMagick::Image.read(Mongo::GridFileSystem.new(Mongoid.database).open(file.path, 'r')) 
    end 

Answer 3

Wada obliczania obrazu height/width przy użyciu RMagick lub MiniMagick w czasie wykonywania:

• Jego obciąża CPU
• Wymaga Internetu, aby uzyskać obraz i obliczyć wymiary.
• Jest to proces powolny

FYI Można również obliczyć obraz Height, Width po obrazu jest w pełni załadowany za pomocą zdarzenia load związanego z <img> tagu za pomocą jQuery.

Dla przykładu:

$(document).ready(function(){ 
    var $image = $('.fixed-frame img'); 
    $image.load(function(){ 
     rePositionLogo($image); 
    }); 

    if($image.prop('complete')){ 
    rePositionLogo($image); 
    } 

}); 

function rePositionLogo($image){ 
    var height = $image.height(); 
    var width = $image.width(); 
    if (width > height) { 
    $image.parents('.header').addClass('landscape'); 
    var marginTop = (105 - $image.height())/2; 
    $image.css('margin-top', marginTop + 'px') 
    }else{ 
    $image.parents('.header').addClass('portrait'); 
    } 
} 

Bądź ostrożny, ponieważ load() nie spowodują, gdy obraz jest już załadowany. Zdarza się to łatwo, gdy obraz znajduje się w przeglądarce użytkownika cache.

Można sprawdzić, czy obraz jest już załadowany za pomocą $('#myImage').prop('complete'), który zwraca true po załadowaniu obrazu.