2010-12-15 6 views
5

Nach ein wenig Nachforschungen habe ich mich entschieden Carrierwave und mini_magick auf meiner neuen rail3 App zu verwenden.Carrierwave und mini_magick finding widths & height

Ich habe es eingerichtet und es funktioniert perfekt. Wie auch immer, ich habe eine Frage: Ich möchte auf die Breite und Höhe zugreifen können, damit ich den HTML-Code richtig erstellen kann. Allerdings gibt es keinen Standard, um diese Informationen zu ziehen und aufgrund der Art und Weise, wie es die Daten speichert, bin ich nicht wirklich in der Lage, an die Datenbank anzuhängen.

Hat jemand irgendwelche Tipps oder Ideen? Ist es überhaupt möglich?

Antwort

14
class Attachment 
    mount_uploader :file, FileUploader 

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

Und es wie folgt verwenden:

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

Gerade für die Aufzeichnung habe ich eine ähnliche Lösung verwendet, aber Dateien mit Mongo GridFS verwenden, hier geht es:

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

Nachteil der Berechnung Image height/width mit RMagick oder MiniMagick in der Laufzeit:

  • Die CPU-Kapazität
  • Es erfordert Internet Bild zu erhalten und die Dimensionen zu berechnen.
  • Es ist ein langsamer Prozess

FYI können Sie auch das Bild Height, Width nach dem Bild berechnen unter Verwendung des load Ereignis mit dem <img>-Tag mit Hilfe von jQuery verbunden sind voll geladen.

Für Beispiel:

$(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'); 
    } 
} 

vorsichtig sein, denn load() nicht ausgelöst, wenn ein Bild bereits geladen ist. Dies kann leicht passieren, wenn sich ein Bild im Browser des Benutzers befindet cache.

Sie können überprüfen, ob bereits ein Bild geladen wurde, indem Sie $('#myImage').prop('complete') verwenden, das true zurückgibt, wenn ein Bild geladen wird.

Verwandte Themen