Rails回形针作物保存率

时间:2016-05-25 06:24:29

标签: ruby-on-rails image paperclip

如何在裁剪图像时节省比例?

我使用回形针,我的图像样式blog_article_main是940x400x,它可以正常工作。

但是当我裁剪图像比率时会发生变化。

我的剪草机

module Paperclip
  class Cropper < Thumbnail
    def transformation_command
      if crop_command
        crop_command + super.join(' ').sub(/ -crop \S+/, '').split(' ') 
      else
        super
      end
    end

    def crop_command
      target = @attachment.instance if @attachment
      if target.cropping?
        ["-crop", "#{target.crop_w}x#{target.crop_h}+#{target.crop_x}+#{target.crop_y}"]
      end
    end
  end
end

我的js

javascript:
  $(function () {
    $('#cropbox').Jcrop({
      onChange: update_crop,
      onSelect: update_crop,
      bgColor: 'black',
      bgOpacity: .2,
      setSelect: [100, 100, 400, 400],
      //aspectRatio: 16 / 9,
      maxSize:[940,400]
    });
  });
  function update_crop(coords) {
    var rx = 100/coords.w;
    var ry = 100/coords.h;
    $('#preview').css({
      width: Math.round(rx * "#{@photo.photo_geometry(:blog_article_main).width}" ) + 'px',
      height: Math.round(ry *  "{#@photo.photo_geometry(:blog_article_main).height}" ) + 'px',
      marginLeft: '-' + Math.round(rx * coords.x) + 'px',
      marginTop: '-' + Math.round(ry * coords.y) + 'px'
    });
    var ratio = "#{@photo.photo_geometry(:original).width}"  /  "#{@photo.photo_geometry(:blog_article_main).width}" ;
    $("#crop_x").val(Math.round(coords.x * ratio));
    $("#crop_y").val(Math.round(coords.y * ratio));
    $("#crop_w").val(Math.round(coords.w * ratio));
    $("#crop_h").val(Math.round(coords.h * ratio));



  }

并且比图像裁剪后的比率更改

 def photo_geometry(style = :original)
    @geometry ||= {}
    @geometry[style] ||= Paperclip::Geometry.from_file(self.image(style))
  end


@photo.photo_geometry(:blog_article_main)=> 940x851

原始图片enter image description here

我想如何裁剪enter image description here

之后enter image description here

0 个答案:

没有答案