mini_magick+jquery.Jcrop+jquery.form.min

jquery.Jcrop用于图片的裁剪；

jquery.form.min用于图片异步上传

views:

<%cache "#{my_photo}" do%>
<a href="#photoModal" data-toggle="modal">
      <img alt="<%= @name %>" id="myPhoto"  src="<%= my_photo %>" class="img_bg img-responsive">


</a>


<!-- Modal -->
<div class="modal fade" id="photoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <%= form_for @photo, url: {action:'create', controller:'photos'}, method: 'post', html: {multipart:true, id: 'photo_upload_form'} do |f| %>
      <div class="modal-body" id='modal-photo'>


            <%= f.file_field :photo,onchange:'upload(this)',id:'input_photo',class:'btn btn-default' ,style:"width:100%;border-width:0px;background:#eeeeee;"%>


            <div id="preview_photo">


            </div>
            <div class="clearfix"></div>


      </div>
      <div class="modal-footer">
        <div class="pull-right">
          <%= f.submit "确定",class:'btn btn-primary space2' %>
          <button type="button" class="btn btn-default space2" data-dismiss="modal" id="cancle">取消</button>
        </div>
      </div>
      <% end %>
    </div> <!-- /.modal-content -->
  </div>     <!-- /.modal-dialog -->
</div><!-- /.modal -->
    <%= javascript_include_tag 'ajax_image_crop_upload'%>
<%end%>

controller:

class PhotosController < ApplicationController
  require 'rubygems'
  require 'mini_magick'
  require 'curb'
  require 'fileutils'


  def create
    tmp_path='public/'+current_user['id'].to_s+'.jpg'
    tmp=params[:photo]
    x=params[:x].to_i
    y=params[:y].to_i
    h=params[:h].to_i
    w=params[:w].to_i
    image = MiniMagick::Image.open(tmp.path)
    image.crop "#{w}x#{h}+#{params[:x]}+#{params[:y]}"
    image.resize '150x210'
    image.write tmp_path
    @crop_photo='/'+current_user['id'].to_s+'.jpg'
    c = Curl::Easy.new(Settings.pic)
    c.multipart_form_post = true
    c.http_post(Curl::PostField.file('theFile', tmp_path))
    response=JSON.parse(c.body_str)
    @data=''
    if response['files']&&response['files'][0]['name']
      FileUtils.remove_file tmp_path
      uuid=response['files'][0]['name']
      pic_url=Settings.pic+uuid
      @data={flag:true,url:pic_url}
      if !current_user.doctor_id.nil?
        current_user.doctor.update_attributes(photo: uuid)
      elsif !current_user.patient_id.nil?
        current_user.patient.update_attributes(photo: uuid)
      end


    else
      @data={flag: false, url: ''}
    end
    #@data ={data:'123'}
    render json: @data
  end
end

js:

ajax_image_crop_upload:

/**
 * Created with JetBrains RubyMine.
 * User: git
 * Date: 14-2-17
 * Time: 下午9:34
 * To change this template use File | Settings | File Templates.
 */
var x, y, h, w;
var options;
//    上传图片兼容性
function getFullPath(obj) {
    if (obj) {
//ie
        if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
            obj.select();
            return document.selection.createRange().text;
        }
//firefox
        else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
            if (obj.files) {
                return obj.files.item(0).getAsDataURL();
            }
            return obj.value;
        }
        return obj.value;
    }
}
;


//裁剪图片
function cropPhoto(obj) {
    x = obj.x;
    y = obj.y;
    w = obj.w;
    h = obj.h;
//       当点击确定按钮时, 调用jquery.form.min上传图片,options作为参数上传
    options = {
        dataType: 'json',
        data: {x: x, y: y, w: w, h: h},
        beforeSubmit: showRequest,
        success: showResponse,
        error: showError
    }
}
;
function showRequest() {
    document.getElementById('preview_photo').innerHTML = "<div style='color:#0000FF'>正在上传...</div>";
}
;
function showResponse(responseText, statusText, xhr, $form) {
    $('#photoModal').modal('hide');
    document.getElementById('photo_upload_form').reset();
    document.getElementById('preview_photo').innerHTML = '';
    document.getElementById('myPhoto').src=responseText.url;
    document.getElementById('NavMyPhoto').src=responseText.url;
}
;
function showError() {
    document.getElementById('preview_photo').innerHTML = "<div style='color:#0000FF'>上传失败</div>";
}
;


//上传函数
function upload(file) {
    $('#preview_photo').html('<img id="crop_photo"/>');
    var input_img = document.getElementById("input_photo");
    var fReader = new FileReader();
    fReader.readAsDataURL(input_img.files[0]);
    fReader.onloadend = function (event) {
        var input_img_name = input_img.files[0].name
        var show_img = document.getElementById("crop_photo");
        show_img.src = event.target.result;  //path
        $('#crop_photo').Jcrop({
                boxWidth: 450,
                boxHeight: 0,
                onChange: cropPhoto,
                onSelect: cropPhoto,
                aspectRatio: 2.5 / 3.5,
                setSelect: [20, 68, 250, 350]
            }, function () {
                // Use the API to get the real image size
                var bounds = this.getBounds();
                boundx = bounds[0];
                boundy = bounds[1];
                // Store the API in the jcrop_api variable
                jcrop_api = this;


                // Move the preview into the jcrop container for css positioning
//                $preview.appendTo(jcrop_api.ui.holder);
            }
        );


    }




}


$(document).ready(function () {
    // jquery.form.min插件实现图片ajax提交
    $('#photo_upload_form').submit(function () {
        $(this).ajaxSubmit(options);
        return false;
    });
    //取消上传，清除modal的内容
    $('#cancle').click(function () {
        document.getElementById("photo_upload_form").reset();
        document.getElementById("preview_photo").innerHTML = '';
    });
})