Rails4 Paperclip 集成美图秀秀 Web API 实现图片在线处理

meitu_xiuxiu_api.html.erb

#本文目的：
# 实现新图片的添加、已添加图片的美化和拼图

#参考美图秀秀API
# http://open.web.meitu.com/products/#M2
# http://open.web.meitu.com/products/#M3

#最重要的这个文件
# views/site_images/_meitu_load.html.erb:
   <script type="text/javascript">
     var ready2;
     ready2 = function() {
       xiuxiu.embedSWF("meituContent",<%= @editor_type %>,"100%","100%");
       /*第1个参数是加载编辑器div容器，第2个参数是编辑器类型(1为美化，2为拼图)，第3个参数是div容器宽，第4个参数是div容器高*/
       <% if @site_image.present? %>//如果是修改图片
         xiuxiu.setUploadURL("http://www.xxx.com/site_images/meitu_upload?id=<%= @site_image.id %>");
       <% else %>//如果是新添加图片
         xiuxiu.setUploadURL("http://www.xxx.com/site_images");
       <% end %>
       //设置裁剪时候比例可见
       xiuxiu.setLaunchVars("sizeTipVisible", 1);
       //显示‘打开图片’按钮
       xiuxiu.setLaunchVars("subBrowseBtnVisible", 1);
       //设置以Form形式上传数据, 选择这个才能实现paperclip文件上传
       xiuxiu.setUploadType(2);
       xiuxiu.setUploadDataFieldName("site_image[image]");
       //设置额外参数， 加载到Form表单中
       xiuxiu.setUploadArgs({ "site_image[site_page_id]": <%= @site_page.id %> });
       xiuxiu.onInit = function ()
       {
         //修改图片时候才加载图片，新添加图片则留空
         <% if @site_image.present? %>
           xiuxiu.loadPhoto("<%= @site_image.image.url %>");
         <% end %>
       }
       xiuxiu.onUploadResponse = function (data)
       {
         //上传完成后处理事件：1. ajax替换图片列表，2.关闭美图Modal窗
         //data的值为图片ID，由controller返回
         <% if @site_image.present? %>//如果是修改图片, 则替换原图片
           $("#site_image_" + data + " img")[0].src = 'http://xxx.qiniudn.com/site_images/' + data + '/original.jpg?imageMogr/thumbnail/120x120%3E/quality/80" thumbnail="120x120&gt;';
           $("#site_image_alert_" + data).html("更新成功！");
         <% else %>//如果是新添加图片，则将新图片追加到图片列表
           $("#site_images").append('<li class="site_image" id="site_image_' + data + '"> <table> <tr> <td width="50%"> <img alt="Original" class="img-responsive" quality="80" src="http://xxx.qiniudn.com/site_images/' + data + '/original.jpg?imageMogr/thumbnail/120x120%3E/quality/80" thumbnail="120x120&gt;" /> </td> <td> <span class="handle"><i class="fa fa-long-arrow-up"> </i>上下排序<i class="fa fa-long-arrow-down"> </i></span> </td> </tr> <tr> <td> <a class="btn btn-danger btn-xs" data-confirm="确定要删除吗?" data-method="delete" data-remote="true" href="/site_images/' + data + '" rel="nofollow">删除</a> <a class="btn btn-warning btn-xs" data-remote="true" data-target="#meituModal" data-toggle="modal" href="/site_images/meitu_load?id=' + data + '&editor_type=1">美化</a><a class="btn btn-warning btn-xs" data-remote="true" data-target="#meituModal" data-toggle="modal" href="/site_images/meitu_load?id=' + data + '&editor_type=2">拼图</a> </td> <td> <span id="site_image_alert_' + data + '"></span> </td> </tr> </table></li>');
         <% end %>
         //关闭美图休息Modal框
         close_modal();
       }
       xiuxiu.onClose = function (id)
       {
         close_modal();  //关闭美图休息Modal框
       }
     };
   
     function close_modal(){
       //关闭Modal框
       $('.modal.in').modal('hide');
       $('.modal-backdrop.in').hide();
       //清空modal内容
       $('.meitu-body').html('');
     }
   
     //#turbolinks style
     $(document).ready(ready2);
     $(document).on('page:load', ready2);
   </script>
   
   <div id="meituContent">
     <h1>美图秀秀加载中...</h1>
   </div>


#上面文件是在图片列表中别调用
# site_stemps/image_list.html.erb

  <!-- meituModal start-->
  <div id="meituModal" class="modal <%= ie_browser? ? '' : 'fade' %>">
    <div class="modal-dialog" style="width: 50%; margin: 0 auto;">
      <div class="modal-content">
        <div class="modal-body meitu-body"  style="height: 500px; padding-top: 0px;">
         <p class="text-center"><i class="fa fa-spinner fa-spin"></i> 正在加载...</p>
        </div><!-- End modal-body -->
      </div><!-- End modal-content -->
    </div><!-- End modal-dialog -->
  </div>
  <!-- meituModal end-->
  
  <%= link_to "+ 点击这里添加图片", meitu_load_site_images_path(site_page_id: @site_page.id), class: 'btn btn-active', 'data-toggle' => 'modal', 'data-target' =>'#meituModal', :remote => true  %>
 
# 这里有个meitu_load_site_images_path, 去routes.rb查看：

  resources :site_images do 
    collection {get :meitu_load}
    collection {post :meitu_upload}
  end
  
# 然后去看controllers/site_images_controller.rb

   class SiteImagesController < ApplicationController
     #skip CSRF on create for Meitu show show， 否则报错ActionController::InvalidAuthenticityToken， 422 (Unprocessable Entity) 
     skip_before_filter :verify_authenticity_token, only: [:create, :meitu_upload]
   
     #get 用于展示模态框
     def meitu_load
       @site_page = SitePage.find_by(id: params[:site_page_id])
       @site_image = SiteImage.find_by(id: params[:id])
       @site_page ||=  @site_image.try(:site_page)
       #editorType int， 为要嵌入的编辑器类型（1为轻量编辑，2为轻量拼图，3为完整版，5为头像编辑器，默认值1）
       @editor_type = params[:editor_type]
       @editor_type ||= 1
     end
   
     #post 用于保存修改
     def meitu_upload
       @site_image = SiteImage.find_by(id: params[:id])
       not_found if @site_image.nil?
       #替换图片
       @site_image.image = params[:site_image][:image]
       @site_image.save!
       @site_image.reload
   
       respond_to do |format|
         format.js
         format.html
       end
     end
     ...
   end
   
#接着去看下他们的views

# views/site_images/meitu_load.js.erb:

   $(".meitu-body").html('<%= j render "site_images/meitu_load" %>')
   #可以看的这里是在调用最上面那个文件：views/site_images/_meitu_load.html.erb:
   
# views/site_images/meitu_upload.js.erb

   <%= @site_image.id %>
   
# 最后我们看看图片列表的渲染：
   #site_stemps/image_list.html.erb:
   <ul id="site_images" data-update-url="<%= sort_site_images_url %>">
      <%= render @site_images %>
   </ul>
   <%= will_paginate @site_images %>
   
   #site_images/_site_image.html.erb:
   <li class="site_image" id="site_image_<%= site_image.id %>">
     <%=qiniu_image_tag site_image.image.url, :thumbnail=>'180x180>', :quality => 80, class: 'img-responsive' %>
     <%=link_to "删除", site_image, data: { confirm: '确定要删除吗?' }, :method=>:delete, :remote => true, class: "btn btn-danger btn-xs"%>
     <%=link_to "美化", meitu_load_site_images_path(id: site_image.id, editor_type: 1), class: 'btn btn-warning btn-xs', 'data-toggle'=>'modal', 'data-target' =>'#meituModal', :remote => true %>
     <%=link_to "拼图", meitu_load_site_images_path(id: site_image.id, editor_type: 2), class: 'btn btn-warning btn-xs', 'data-toggle'=>'modal', 'data-target' =>'#meituModal', :remote => true %>
   </li>

#好了，最后别忘了把crossdomain.xml文件上传到七牛云存储下和服务器网站根目录下。