2010-12-15 19 views
5

Después de investigar un poco, decidí usar Carrierwave y mini_magick en mi nueva aplicación rail3.Carrierwave y mini_magick encontrar anchos y alto

Lo he configurado y funciona perfectamente. Sin embargo, tengo una pregunta: me gustaría poder acceder al ancho y alto, así puedo formar el html correctamente. Sin embargo, no hay ningún valor predeterminado para extraer esta información y debido a la forma en que almacena los datos, no estoy realmente de ninguna manera que pueda agregar contra el db.

¿Alguien ha tenido alguna sugerencia o idea? ¿Es posible?

Respuesta

14
class Attachment 
    mount_uploader :file, FileUploader 

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

y usarlo como esto:

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

Sólo para el registro, he utilizado una solución similar, sin embargo el uso de archivos con Mongo GridFS, aquí va:

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

Desventaja del cálculo de la imagen height/width utilizando RMagick o MiniMagick en tiempo de ejecución:

  • Su CPU
  • Se requiere Internet para obtener la imagen y calcular las dimensiones.
  • Es un proceso lento

FYI También puede calcular la imagen Height, Width después de la imagen se ha cargado completamente mediante el evento load asociado con la etiqueta <img> con la ayuda de jQuery.

Para el Ejemplo:

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

Sé cuidado, porque load() no activará cuando una imagen ya está cargado. Esto puede suceder fácilmente cuando una imagen está en el navegador del usuario cache.

Puede verificar si una imagen ya está cargada usando $('#myImage').prop('complete'), que devuelve true cuando se carga una imagen.

Cuestiones relacionadas