`
duyouhua1214
  • 浏览: 236794 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

基于jquery和mini_magick的图片裁剪

阅读更多

jquery imgAeraSelect插件地址:http://odyniec.net/projects/imgareaselect/
原理很简单,就是将鼠标框住的区域两个定点坐标值传回服务器端,在服务器端用image magick处理。
由于rmagick存在内存泄露问题。这里选择了mini_magick。mini_magick是一个非常小的库,源代码不过300行。主要是通过调用系统命令行来处理图片。只要系统安装了image magick就可以。

view:主要是加四个隐藏域来传递裁剪区域。在form提交时候一起传递到服务器。

Html代码 复制代码
  1. <input id="x1" type="hidden" value="0" name="x1"/>  
  2.         <input id="y1" type="hidden" value="0" name="y1"/>  
  3.         <input id="x2" type="hidden" value="150" name="x2"/>  
  4.         <input id="y2" type="hidden" value="150" name="y2"/>  
<input id="x1" type="hidden" value="0" name="x1"/>
        <input id="y1" type="hidden" value="0" name="y1"/>
        <input id="x2" type="hidden" value="150" name="x2"/>
        <input id="y2" type="hidden" value="150" name="y2"/>


初始化裁剪框在待处理图片的中央和一些验证:

Js代码 复制代码
  1.   
  2.   
  3. <script type="text/javascript">   
  4.     $(document).ready(function(){   
  5.       var pos = initValue();   
  6.   
  7.   
  8.       $('#avatar').imgAreaSelect({aspectRatio: '1:1',   
  9.         x1: pos.x1,   
  10.         y1: pos.y1,   
  11.         x2: pos.x2,   
  12.         y2: pos.y2,   
  13.         handles: true,   
  14.           
  15.         onSelectEnd: function (img, selection) {   
  16.           $('input[name=x1]').val(selection.x1);   
  17.           $('input[name=y1]').val(selection.y1);   
  18.           $('input[name=x2]').val(selection.x2);   
  19.           $('input[name=y2]').val(selection.y2);   
  20.         }   
  21.       });   
  22.     });   
  23.   
  24.     function initValue(){   
  25.       var o    = new Object();   
  26.       var x    = $("#avatar").width();   
  27.       var y    = $("#avatar").height();   
  28.       var size = x >= y ? y : x;   
  29.       size     = size >= 100 ? 100 : size;   
  30.       o.x1 = (x - size) / 2;   
  31.       o.y1 = (y - size) / 2;   
  32.       o.x2 = o.x1 + size;   
  33.       o.y2 = o.y1 + size;   
  34.       return o;   
  35.     }   
  36.   
  37.   
  38.   
  39.     function checkImage(){   
  40.       var image_name = $("#photo").val();   
  41.       var reg = /\.png|jpeg|jpg|bmp|gif$/i   
  42.       if (reg.test(image_name)){   
  43.         return true;   
  44.       }else if(image_name == "") {   
  45.         alert("没有选择图片!");   
  46.         return false;   
  47.       }else{   
  48.         alert("图片格式不正确!");   
  49.         return false;   
  50.       }   
  51.     }   
  52.        
  53.   </script>  
<script type="text/javascript">
    $(document).ready(function(){
      var pos = initValue();


      $('#avatar').imgAreaSelect({aspectRatio: '1:1',
        x1: pos.x1,
        y1: pos.y1,
        x2: pos.x2,
        y2: pos.y2,
        handles: true,
       
        onSelectEnd: function (img, selection) {
          $('input[name=x1]').val(selection.x1);
          $('input[name=y1]').val(selection.y1);
          $('input[name=x2]').val(selection.x2);
          $('input[name=y2]').val(selection.y2);
        }
      });
    });

    function initValue(){
      var o    = new Object();
      var x    = $("#avatar").width();
      var y    = $("#avatar").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;
    }



    function checkImage(){
      var image_name = $("#photo").val();
      var reg = /\.png|jpeg|jpg|bmp|gif$/i
      if (reg.test(image_name)){
        return true;
      }else if(image_name == "") {
        alert("没有选择图片!");
        return false;
      }else{
        alert("图片格式不正确!");
        return false;
      }
    }
    
  </script>



后台处理,主要就是做以下几件事情:
1.把上传来的照片压缩到200x200
2.通过content-type判断图片是否合法。以防用户自己改扩展名。
3.把gif和png格式转换成jpg,不然在裁剪时候后出问题。
4.裁剪
5.把裁剪后图片缩放成几种比例

Ruby代码 复制代码
  1.   
  2. def upload_avatar   
  3.     if request.post?   
  4.       avatar_200_200 = RAILS_ROOT + "/public/files/avatar/200_200/"  
  5.       photo_name     = "#{current_user.hash_id}.jpg"  
  6.          
  7.       avatar_100_100 = RAILS_ROOT + "/public/files/avatar/100_100/"  
  8.       avatar_64_64   = RAILS_ROOT + "/public/files/avatar/64_64/"  
  9.       avatar_50_50   = RAILS_ROOT + "/public/files/avatar/50_50/"  
  10.       avatar_40_40   = RAILS_ROOT + "/public/files/avatar/40_40/"  
  11.   
  12.   
  13.       if params[:commit] == "上传照片"  
  14.         #TODO Validate Image Size!   
  15.         #TODO 增加白色背景,以防不规则图片!   
  16.            
  17.         photo = params[:photo]   
  18.            
  19.         raise "image type Error!" if photo.content_type !~ /^image\/.*?jpeg|jpg|png|bmp|gif$/i   
  20.         Dir.chdir avatar_200_200   
  21.   
  22.         img  = MiniMagick::Image.from_blob(photo.read)   
  23.         img.format("jpg"if photo.content_type =~ /gif|png$/i   
  24.            
  25.         img.resize "200x200"  
  26.         img.write photo_name   
  27.   
  28.         redirect_to request.referer   
  29.       elsif params[:commit] == "保存设置"  
  30.            
  31.            
  32.         Dir.chdir avatar_200_200   
  33.         if File.exist?(photo_name)   
  34.           width = params[:x2].to_i - params[:x1].to_i   
  35.           height= params[:y2].to_i - params[:y1].to_i   
  36.   
  37.           img = MiniMagick::Image.open(photo_name)   
  38.              
  39.           img.crop "#{width}x#{height}+#{params[:x1]}+#{params[:y1]}"  
  40.            
  41.           img.resize 100 and Dir.chdir avatar_100_100 and img.write photo_name   
  42.           img.resize 64  and Dir.chdir avatar_64_64   and img.write photo_name   
  43.           img.resize 50  and Dir.chdir avatar_50_50   and img.write photo_name   
  44.           img.resize 40  and Dir.chdir avatar_40_40   and img.write photo_name   
  45.         end  
  46.       end  
  47.     end  
  48.   end  
def upload_avatar
    if request.post?
      avatar_200_200 = RAILS_ROOT + "/public/files/avatar/200_200/"
      photo_name     = "#{current_user.hash_id}.jpg"
      
      avatar_100_100 = RAILS_ROOT + "/public/files/avatar/100_100/"
      avatar_64_64   = RAILS_ROOT + "/public/files/avatar/64_64/"
      avatar_50_50   = RAILS_ROOT + "/public/files/avatar/50_50/"
      avatar_40_40   = RAILS_ROOT + "/public/files/avatar/40_40/"


      if params[:commit] == "上传照片"
        #TODO Validate Image Size!
        #TODO 增加白色背景,以防不规则图片!
        
        photo = params[:photo]
        
        raise "image type Error!" if photo.content_type !~ /^image\/.*?jpeg|jpg|png|bmp|gif$/i
        Dir.chdir avatar_200_200

        img  = MiniMagick::Image.from_blob(photo.read)
        img.format("jpg") if photo.content_type =~ /gif|png$/i
        
        img.resize "200x200"
        img.write photo_name

        redirect_to request.referer
      elsif params[:commit] == "保存设置"
        
        
        Dir.chdir avatar_200_200
        if File.exist?(photo_name)
          width = params[:x2].to_i - params[:x1].to_i
          height= params[:y2].to_i - params[:y1].to_i

          img = MiniMagick::Image.open(photo_name)
          
          img.crop "#{width}x#{height}+#{params[:x1]}+#{params[:y1]}"
        
          img.resize 100 and Dir.chdir avatar_100_100 and img.write photo_name
          img.resize 64  and Dir.chdir avatar_64_64   and img.write photo_name
          img.resize 50  and Dir.chdir avatar_50_50   and img.write photo_name
          img.resize 40  and Dir.chdir avatar_40_40   and img.write photo_name
        end
      end
    end
  end



效果预览:

 

来源:http://www.iteye.com/topic/541141

分享到:
评论

相关推荐

    Ruby-MiniMagickImageMagick或GraphicsMagick命令行的一个ruby封装

    gem 'mini_magick' ``` 然后运行`bundle install`来安装MiniMagick。 **使用MiniMagick处理图像** MiniMagick的核心操作是`read`、`write`和`process`方法。`read`用于加载图像,`write`用于保存修改后的图像,而`...

    mojo_magick:Ruby的狗简单ImageMagick接口

    使用它添加到您的Gemfile gem 'mojo_magick'在您的ruby代码中要求它require 'mojo_magick'去镇上! 查看几个简单的例子图像调整大小获取图像的大小(假设图像为“ 120wx222h”) dimensions = MojoMagick::get_image...

    mini_magick_crop

    该自述文件通常会记录启动和运行应用程序所需的所有步骤。 您可能要讲的内容: Ruby版本 系统依赖 配置 数据库创建 数据库初始化 如何运行测试套件 服务(作业队列,缓存服务器,搜索引擎等) 部署说明 … 如果...

    PascalMagick-0.4.zip_magick_neversis

    这个库,名为“Magick Neversis”,是专门用于图像处理和操作的工具集,它为开发人员提供了一种高效、灵活的方式来处理各种图像格式和执行复杂的图像操作。 Magick,源自ImageMagick,是一个广泛使用的开源图像处理...

    simple_magick:超级超简单的 ImageMagick 包装器

    gem 'simple_magick' 然后执行: $ bundle 支持的版本 Ruby 2.0.0 或更高版本 用法 require 'simple_magick' if SimpleMagick . imagemagick_installed? image = SimpleMagick :: Image . new ( '/path/to/src_...

    breakpoint_magick:获取VS代码断点

    例子# Import thingsfrom breakpoint_magick import GetVSCodeBreakpoints# Get a list with VS Code breakpointsbreak_point_list = GetVSCodeBreakpoints ()# Example of processing to new formatprint ( "# ...

    dummy_magick:生成用于开发的虚拟镜像文件

    gem 'dummy_magick' end 然后执行: $ bundle 用法 ## # Generate a dummy image file # # @param width [Integer] The width of the image. # @param height [Integer] The height of the image. # @param ...

    Magick++实现图片压缩

    在IT领域,图片处理是一项常见的任务,而"Magick++实现图片压缩"的主题涉及到了图像处理库Magick++的应用,特别是在图像压缩和锐化方面的技术。Magick++是ImageMagick库的一部分,它提供了一个C++接口来处理各种图像...

    Magick.NET类库,.net平台操作图片

    Magick.NET是一个强大的开源类库,专为.NET平台设计,用于处理和操作图像。这个类库使得.NET开发者能够轻松地进行各种复杂的图像处理任务,包括转换、裁剪、旋转、调整大小、添加特效以及应用滤镜等。Magick.NET不仅...

    Magick++_tutorial.pdf

    Magick++ 提供了非常丰富的方法来操作图像,例如调整图像大小、裁剪、旋转、改变图像的对比度和亮度、应用滤镜效果、添加文本和图像水印等等。此外,Magick++ 还支持许多图像格式的读取和写入,这使其成为一个非常...

    Magick 图片处理

    【标题】"Magick 图片处理"涉及到的核心技术是ImageMagick,这是一款开源的跨平台图像处理工具,用于在命令行中进行各种图像操作,包括但不限于图片转换、编辑、合成以及添加水印等。ImageMagick的强大功能使得它在...

    Magick.NET图像操作库

    Magick.NET库是基于ImageMagick开源项目构建的,ImageMagick是一个广泛使用的命令行工具集,而Magick.NET则将其功能无缝集成到.NET环境中。 **主要特性:** 1. **多格式支持**:Magick.NET 支持众多图像文件格式,...

    Magick++.cpp

    linux下采用开源库Magick++实现图片合成,图片添加中英文字体:需要自己下载编译Magick++,如下为部分代码,下载可看完整代码 #include &lt;Magick++.h&gt; #include &lt;Magick++/Image.h&gt; #include &lt;Magick++/Drawable.h&gt; ...

    Magick++ api文档

    - **Web 应用**:Web 服务器可以利用 Magick++ 实时生成图表、图形和注释图片等动态内容。 - **移动应用**:开发人员可以使用 Magick++ 来处理用户上传的照片,实现滤镜效果、尺寸调整等功能。 - **自动化工具**:...

    C# Magick.NET

    这个库允许开发者在C#环境中轻松地执行复杂的图像操作,如转换、裁剪、调整大小、添加滤镜、读取和写入元数据等。它基于ImageMagick,一个广泛使用的跨平台开源图像处理工具。 Magick.NET 的核心类是 `MagickImage`...

    valor-dual:一个简单的图像大小调整器,可将图像转换为不同的分辨率并将其推入AWS S3存储桶

    检查系统上是否安装了上述gem $ gem list #安装要将valor-dual安装到系统中,请运行$ sudo gem install valor-dual #用法首先,在您的项目中需要mini_magick,aws-sdk,uri gem和YAML。 require "mini_magick...

    rtesseract, 用于超立方体识别的ruby 库.zip

    rtesseract, 用于超立方体识别的ruby 库 rtesseract 用于超立方体识别的ruby 库。要求:要正常工作,需要使用 rtesseract:超正方体- 程序ImageMagick - 程序RMagick或者 mini_magick -

    administrate-field-active_storage:在administrate中支持活动存储

    将administrate-field-active_storage和mini_magick到您的Gemfile中(第6条): gem 'administrate-field-active_storage' gem "image_processing" 对于rails 5.x,请使用以下命令 gem 'administrate-f

    C# Magick.NET 7.4.3.0-Q8-AnyCPU

    Magick.NET是一个开源的图像处理库,基于ImageMagick项目,允许开发者在C#环境中轻松地处理图像。"Q8"代表了该版本使用的是8位颜色深度,意味着它可以处理256种颜色级别的图像,适合大多数日常应用场景。"AnyCPU"则...

    c# magick.Net-7.4.3.0源码 source

    Magick.NET将其功能带入.NET世界,为C#和.NET Framework开发者提供了丰富的API,用于执行复杂的图像操作,如裁剪、缩放、旋转、颜色调整以及各种特效添加。 二、源码分析 1. 图片签名:在图像处理领域,签名通常指...

Global site tag (gtag.js) - Google Analytics