如何在裁剪图像时节省比例?
我使用回形针,我的图像样式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