Question

我在Rails上开发，我的应用程序在heroku上。

我使用cropper.js和carrierwave让用户选择，裁剪并将图片上传到s3。发布的步骤与Instagram非常相似。

我知道有a way to directly upload an image to s3，但在使用cropper.js时，这种方式在某些浏览器上无效。

然后我决定使用carrierwave，但是，由于间接上传，这需要花费大量时间上传。

为了缩短这段时间，我想在背景上进行上传工作。我知道载波直接或载波背景的存在，但我不认为它们适用于heroku或裁剪后的画布。

目前，我的代码如下;

有谁知道如何让这些交易工作背景，让用户移动到下一页而无需等待完成上传？

在我看来，

<%= form_for @post, :url => { :controller => :posts, :action => :create } , :id => 'myform' } do |f|%>

  <div class="field" >
  <%= f.label("Item image") %>
  <%= f.file_field :image_name, accept: 'image/jpg,image/jpeg,image/png,image/gif', :id => "image" %>
  <%= f.hidden_field :remote_image_url %>

  <div class="preview"><img id="crop_img" /></div>
  <div class="clear_float"></div>

  <%= f.hidden_field :designer_id, :value => current_user.id %>
  <div class="clear_float"></div>

  <%= f.label("comment") %>
  <%= f.text_area :detail %>

  <%= f.submit("post", :id => '_submit', "data-disable-with" => "uploading...") %>
<% end %>

在我的javascript中，

  $('#_submit').on('click', function(){
   // get cropped image data
   var canvas = $('#crop_img').cropper('getCroppedCanvas');
   var canvas_data = canvas.toDataURL();
   $("#post_image_name").val(""); 
   $("#post_remote_image_url").val(canvas_data);
   $("#myform").submit();
});

在我的控制器中，

class PostsController < ApplicationController
 ...
  def new
    @post = Post.new
  end

  def create
    post = params.require(:post).permit(
      :designer_id,
      :image_name,
      :remote_image_url,
      :detail
    )
    post[:image_name]= post[:remote_image_url]
    post[:remote_image_url] = ""
    @post = Post.new(post)
    if @post.save
      ...
    end
  end

  ...
  end

rails在背景上上传裁剪的图像（画布）

0 个答案: