[b]引用网址
[/b]
[url]http://duyouhua1214.iteye.com/blog/543007[/url]
[url]http://atomgiant.com/2006/07/19/resizing-images-with-minimagick/[/url]
[url]http://odyniec.net/projects/imgareaselect/usage.html[/url]
[url]http://odyniec.net/projects/imgareaselect/examples.html[/url]
1 install gem
2 envirmoment [#iacf9090]
3 layout
4 html 页面js代码
5 controller 简单代码
6 这样就能根据页面剪裁的范围 进行压缩
7 完毕
[/b]
[url]http://duyouhua1214.iteye.com/blog/543007[/url]
[url]http://atomgiant.com/2006/07/19/resizing-images-with-minimagick/[/url]
[url]http://odyniec.net/projects/imgareaselect/usage.html[/url]
[url]http://odyniec.net/projects/imgareaselect/examples.html[/url]
1 install gem
gem install mini_magick
2 envirmoment [#iacf9090]
require 'mini_magick'
3 layout
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Test
</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<%= javascript_include_tag :defaults %>
<script src="/javascripts/jquery-1.4.js"></script>
<script src="/javascripts/jquery.imgareaselect.js"></script>
<link rel="stylesheet" type="text/css" href="/stylesheets/imgareaselect-default.css" />
<script language="JavaScript">
// 下記2行を追加
jQuery.noConflict();
var j$ = jQuery;
</script>
</head>
<body>
<div id="container">
<div id="contents" class="clear-fix">
<%= yield %>
</div>
</div>
</html>
4 html 页面js代码
<img id="avatar" src="/images/bee.jpg"/>
<% form_tag '/test/upload_image' do -%>
<input id="x1" value="0" name="x1"/>
<input id="y1" value="0" name="y1"/>
<input id="x2" value="150" name="x2"/>
<input id="y2" value="150" name="y2"/>
<div><%= submit_tag 'Save' %></div>
<% end -%>
<script type="text/javascript">
j$(document).ready(function () {
var pos = initValue();
j$('#bee').imgAreaSelect({ aspectRatio: '1:1', x1: pos.x1,
y1: pos.y1,
x2: pos.x2,
y2: pos.y2, handles: true,
onSelectEnd: function (img, selection) {
j$('input[name=x1]').val(selection.x1);
j$('input[name=y1]').val(selection.y1);
j$('input[name=x2]').val(selection.x2);
j$('input[name=y2]').val(selection.y2);
} });
function initValue(){
var o = new Object();
var x = j$("bee").width();
var y = j$("bee").height();
var size = x >= y ? y : x;
size = size >= 100 ? 100 : size;
o.x1 = (x - size) / 2;
o.y1 = (y - size) / 2;
o.x2 = o.x1 + size;
o.y2 = o.y1 + size;
return o;
}
})
</script>
5 controller 简单代码
def upload_image
if request.post?
photo_name = "test.jpg"
avatar_100_100 = RAILS_ROOT + "/public/files/avatar/100_100/#{photo_name}"
avatar_64_64 = RAILS_ROOT + "/public/files/avatar/64_64/#{photo_name}"
avatar_50_50 = RAILS_ROOT + "/public/files/avatar/50_50/#{photo_name}"
avatar_40_40 = RAILS_ROOT + "/public/files/avatar/40_40/#{photo_name}"
mkdir_p_from_filepath(avatar_200_200)
mkdir_p_from_filepath(avatar_100_100)
mkdir_p_from_filepath(avatar_64_64)
mkdir_p_from_filepath(avatar_50_50)
mkdir_p_from_filepath(avatar_40_40)
width = params[:x2].to_i - params[:x1].to_i
height= params[:y2].to_i - params[:y1].to_i
img = MiniMagick::Image.open("#{RAILS_ROOT}/public/images/bee.jpg")
img.crop "#{width}x#{height}+#{params[:x1]}+#{params[:y1]}"
img.resize 100 and img.write avatar_100_100
img.resize 64 and img.write avatar_64_64
img.resize 50 and img.write avatar_50_50
img.resize 40 and img.write avatar_40_40
end
end
6 这样就能根据页面剪裁的范围 进行压缩
7 完毕