cropper：图片裁剪工具

1.图片裁剪工具；基本初始化使用；

$('#image').cropper({
  aspectRatio: 1 / 1, // 纵横比:正方形

  preview: '.img-preview' // 指定预览区的类名（css选择器字符串）
});

2.配合选择图片按钮，把cropper初始化的图片地址替换；

$("#file").change(function() {

  // 2.1.收集图片信息对象（不常用）回顾：formData 收集图片数据！fd.append("avatar",图片信息对象)
  let imgObj = this.files[0];

  // 2.2 把图片信息对象转化为临时地址字符串(了解)
  let src = URL.createObjectURL(imgObj);

  // 2.3 通过cropper插件把临时地址替换上! 页面中img比较已经经过cropper处理！（官方文档阅读）
  $('#image').cropper("replace", src);
});

3.配合cropper：如何把图片对象信息转化为base64图片流；

  // 1.准备数据：用插件 准备 base64位字符串；
  let canvas = $('#image').cropper('getCroppedCanvas', {
    width: 100,
    height: 100
  });
***  关键 let str = canvas.toDataURL('image/png');