利用cropper插件来做一个头像上传功能

发表于 | 阅读次数:
阅读时长 ≈ 3

cropper这个插件真的做的蛮强大的，我开始绕了个圈子，用crop方法自己来对接预览图效果，总不如意，结果发现他提供了一个 “preview”接口，直接对应上，预览效果居然万事ok，自己只需要写上传部分代码就可以了，那还有啥费劲的？

实现效果如下图，借我家小宝图片一试：

cropper效果图

功能实现目标

  • 点击上传，然后图片在图片区域显示，顺便可视化三张预览缩微图
  • 可以旋转和翻转调整图片
  • 最后点击“截取结果”，直接生成base64位图片代码

剩下的图片数据上传就没什么好说了。

当然这个里面用了canvas和一些转码的方法，不用说，只兼容ie9+，对我们很多项目，尤其是手机端项目肯定是够了。

下面是主要实现说明：

cropper部分

图片：

1
<div class="imgbox"><img class="cropper-hidden" id="image" src="images/picture.jpg" height="720" width="1280" alt="Picture"></div>

对应脚本：

1
2
3
4
5
6
7
8
9
10
var imgage = document.getElementById('#image');
var cropper = new Cropper(image, {
  viewMode :1,
  aspectRatio : 1,
  zoomable : false,
  // checkOrientation : false,
  preview : '.preview',
  ready : function () {
  }
});

cropper具体参数请参考官方API：https://github.com/fengyuanchen/cropperjs

上传部分

当然首先我们要有个上传控件：

1
<input type="file" id="up" />

对应JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$("#up").change(function() {//上传控件事件
  var file = this.files[0]; //获取file对象
  if(!/image\/\w+/.test(file.type)){//图片格式基础验证
    alert("文件必须为图片！");
    return false;
  }
  var  blobUrl = getObjectURL(file);//file转成url,blob格式
  cropper.replace(blobUrl);
});

function getObjectURL (file) {//file转成url,blob格式
  var url = null;
  if (window.createObjectURL != undefined) {
    url = window.createObjectURL(file);
  } else if (window.URL != undefined) {
    url = window.URL.createObjectURL(file);
  } else if (window.webkitURL != undefined) {
    url = window.webkitURL.createObjectURL(file);
  }
  return url;
}

图片操作部分

旋转镜像就不提了，照官方方法套上就行，就只说说生成base64：

1
2
3
4
5
6
$('.s-op-getCanvas').click(function () {//通过cropper提供的转canvas方法，再转成base64位图片，兼容 ie9+
    var result = me.cropper.getCroppedCanvas({ width: 200, height: 200,imageSmoothingQuality:'medium'});//设置导出的图片属性，具体参数参考官方API
    window.console && console.log(result);
    imgData = result.toDataURL('image/jpg');//获取convas转换后的base64位码
    $("#img-result").attr("src",imgData);//显示在页面里
});

整个就ok了

具体示例地址： 猛击这里

伸手党直接下载： 猛击这里

其他就不解释，人实在太懒，需要就拿去用，对上格式，改改代码就行。