Rails 用户头像 (Avatar Upload) 剪切上传方案整合

kooglezhang · 2016年08月01日 · 最后由 thinkphper 回复于 2016年08月22日 · 5208 次阅读

在开发个人网站的时候，遇到一个问题，就是用上传头像剪切后再重新上传，用户只需要提供图片，而不用手动在自己电脑上用其他的软件作为预处理后再点击上传，可以随意剪切成自己满意的大小

前端图片 Js 剪切使用 Cropbox

图片剪切部分 Js

<script type="text/javascript">
  $(window).load(function() {
    var options =
    {
      thumbBox: '.thumbBox',
      spinner: '.spinner',
      // imgSrc: 'images/avatar.png'
    }
    var cropper = $('.imageBox').cropbox(options);
    $('#upload-file').on('change', function(){
      var reader = new FileReader();
      reader.onload = function(e) {
        options.imgSrc = e.target.result;
        cropper = $('.imageBox').cropbox(options);
      }
      reader.readAsDataURL(this.files[0]);
      this.files = [];
    })
    $('#btnCrop').on('click', function(){
      var img = cropper.getDataURL();
      $('.cropped').attr('style','display:block');
      $('.cropped').html('');
      $('.cropped').append('<br><img src="'+img+'" align="absmiddle" class="tu_yuan">');
      $('.cropped').append('<img src="'+img+'" align="absmiddle" class="tu_fang">');
      $('#data').val(img);
      $('#tijiao').removeAttr('style');
    })
    $('#btnZoomIn').on('click', function(){
        cropper.zoomIn();
    })
    $('#btnZoomOut').on('click', function(){
        cropper.zoomOut();
    })
  });
  $(document).on('page:fetch',   function() { NProgress.start(); });
  $(document).on('page:change',  function() { NProgress.done(); });
</script>

重新剪切后的图片数据需要在后端作为编码处理

def create_avatar
  file = Base64.decode64(params[:avatar]['data:image/png;base64,'.length .. -1])
  file_name = "img_#{Cattle.rand_string_name(20)}.png"
  file_path = "#{Rails.root}/public/uploads/#{file_name}"
  File.open(file_path,'wb+') do |item|
    item.write(file)
  end
  current_user.avatar = Cattle.upload_yun(file_name,file_path)
end

将剪切后的图片缓存到系统，然后将文件上传至 CDN，保存返回的 url 链接下图是图片剪切后的效果

想体验的朋友可以戳 http://koogle.cc 到个人用户中心

4 个赞

yan1667 #1 2016年08月04日

能解释下后端裁剪的意思么？或者给个案例托管的 url 我自己下来看，谢谢。

kooglezhang #2 2016年08月08日

#1 楼 @yan1667 就是用 Cropbox 在页面将图片剪切好，这个时候剪切后的图片是一长串的图片编码，在后端需要将这些编码写到文件 png 文件里，这个时候才算成功剪切，然后将它存储到你的云端即可

yan1667 #3 2016年08月10日

#2 楼 @kooglezhang 前面我都懂什么意思 def create_avatar file = Base64.decode64(params[:avatar]['data:image/png;base64,'.length .. -1]) file_name = "img_#{Cattle.rand_string_name(20)}.png" file_path = "#{Rails.root}/public/uploads/#{file_name}" File.open(file_path,'wb+') do |item| item.write(file) end current_user.avatar = Cattle.upload_yun(file_name,file_path) end 这段代码什么意思，就是不知道如何将 base64 位存进去

martin91 #4 2016年08月10日

#3 楼 @yan1667

def create_avatar
    file = Base64.decode64(params[:avatar]['data:image/png;base64,'.length .. -1])   # 将 Base64 编码的参数用 Base64 解码，得到数据的二进制表示，也就是图片本身的二进制数据
    file_name = "img_#{Cattle.rand_string_name(20)}.png" # 声明一个随机的文件名
    file_path = "#{Rails.root}/public/uploads/#{file_name}"  # 确定文件保存路径
    File.open(file_path,'wb+') do |item|  # 跟聚文件路径创建新文件
      item.write(file)   # 将前面的二进制数据写到文件里，这个时候的文件就是一个完整的图片文件了
    end
    current_user.avatar = Cattle.upload_yun(file_name,file_path)   # 将前面的图片文件与用户记录关联。
  end