基于jquery和mini_magick的图片裁剪

klfo

浏览: 149379 次
性别:
来自: 北京

最近访客更多访客>>

yokoboy

maojieming

阿拉拉

十口文

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ruby on rails

jQuery Rails J#JavaScript .net

   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 完毕

分享到：

Google App Engine and others | ruby gem相关命令使用

2010-09-15 11:07
浏览 1475
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

基于jquery和mini_magick的图片裁剪

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

基于jquery和mini_magick的图片裁剪

评论

发表评论

相关推荐

Google App Engine and others

ruby gem相关命令使用

深入理解alias, alias_method和alias_method_chain

Rails 3 特点

Fix N+1 Queries

query-reviewer sql explain and review in the page

request-log-analyzer log分析工具

IE7 Bug导致Rails Session保存失败

Rails保存记录而不更新时间戳

how to generate qrcode on ror

rmagick ror 上 安装

Update Rails to 2.2.2 (Rails 2.2.2)

Use helpers in controllers or models

open-flash-chart

rake db:migrate

rss maker

acts_as_authenticated

validates

rails で model の変更を監視するプラグイン

exception_notification

最近访客更多访客>>

request-log-analyzer　log分析工具

rmagick ror 上安装