新手问题问一下有没有上传之前就进行裁减好图片的'gem'啊，我现在用的 paperclip，每次都要先上传，才能进行图片的裁减，感觉特别不方便

tianlitao · 2014年10月27日 · 最后由 tianlitao 回复于 2014年10月29日 · 4023 次阅读

有没有知道的，或者用什么方法可以实现在上传之前进行裁减的，裁减完成之后在进行上传服务器

Rei #1 2014年10月27日

得找 js 库。

hz_qiuyuanxin #2 2014年10月27日

有一种方法，就是把图片和裁剪参数一起上传，那么就要实现，在浏览器端能够直接打开图片。有这么一个库帮你做好了底层的工作，moxie

其中有两个关键的对象：mOxie.Image 和 mOxie.FileInput

mOxie.FileInput 可以让你绑定一个按钮，然后打开文件选择框，然后得到文件，然后再用 mOxie.Image 来加载并显示到页面中。

以下是一部分代码，包含了表单的提交，对于裁剪预览的插件使用的是 jquery.cropper

var $browseButton   = $("#fire-photo-modal")
  , $imageInput     = $("#image-input")
  , $imagePreview   = $("#image-preview")
  , $imageCropModal = $("#upload-client-photo-modal")
  , $uploadLogoForm = $("#upload-logo-form")
  , geometryParam   = "200x200+0+0"

mOxie.Env.swf_url = "/files/Moxie.swf";

var preloader = new mOxie.Image()
  , currentId = null;

// 显示图片，并初始化裁图程序
preloader.onload = function() {
  var $image = $(new Image());

  $image.data("originWidth", preloader.width);
  $image.data("originHeight", preloader.height);
  $image.attr("src", preloader.getAsDataURL("image/png"));
  $image.attr("id", "image-id-" + currentId);

  $image.load();

  $imagePreview.html($image);

  $image.cropper({
    aspectRatio: 9/9,
    minWidth: 100, minHeight: 100,
    data: { x: 0, y: 0, width: 200, height: 200 },
    preview: "#image-crop-preview",
    done: function(data) { geometryParam = data.width + "x" + data.height + "+" + data.x + "+" + data.y; }
  });
}

var fileInput = new mOxie.FileInput({
  runtime_order: 'html5,flash,silverlight,html4',
  browse_button: "fire-photo-modal",
  accept: [{title: "图片", extensions: "jpg,gif,png"}]
})

fileInput.onchange = function(e) {
  var file = e.target.files[0];

  if (!file) {
    return false;
  } else if (file.size > 1048576) { // 图片不能大于1MB
    alert("请选择小于1MB的图片(jpg,gif,png)");
    file.destroy();
    return false;
  }

  if (currentId) {
    var $image = $("#image-id-" + currentId);
    $image.cropper("destroy");
    $image.remove();
  }

  currentId = file.uid;
  preloader.load(file);           // 加载选择的图片文件
  $imageCropModal.modal('show');  // 显示裁剪图片的弹出框
}

fileInput.init();

$("#crop-modal-return-btn").on("click", function(e){ $imageCropModal.modal("hide"); });
$("#crop-modal-submit-btn").on('click', function(e){
  var $this = $(e.target)

  if ($this.attr("disabled")) {
    return false;
  } else {
    $this.html("保存中");
    $this.attr("disabled", "disabled");
  }

  var xhr = new mOxie.XMLHttpRequest()
    , formData = new mOxie.FormData()
    , params = $uploadLogoForm.serializeArray()

 //  将图片和裁剪参数一并提交
  formData.append("client[image_url]", preloader.getAsBlob("image/png"));
  formData.append("client[crop_geometry]", geometryParam);

  for (var i=0; i<params.length; i++) {
    formData.append(params[i].name, params[i].value);
  }

  xhr.open($uploadLogoForm.attr("method"), $uploadLogoForm.attr("action"));
  xhr.responseType = "json";
  xhr.onload = function() {
    $this.html("保存");
    $this.removeAttr("disabled");
    if (xhr.status == 200) {
      $fillClientProfileForm.find("[name='logo']").val("pass");
      $browseButton.css("background", "url(" + xhr.response["image_url"] + ") 0 0 / 120px 120px no-repeat");
      $browseButton.html('');
      $imageCropModal.modal('hide');
    } else if (xhr.status == 400) {
      alert("服务器发生错误，...");
      console.dir(xhr.response);
    } else {
      alert("服务器发生错误，...")
      console.dir(xhr.response);
    }
  }
  xhr.send(formData);
});