avatar 头像

URL API 

选择图片后的event listener：

addListener: function () {

  this.$avatarView.on('click', $.proxy(this.click, this));

  this.$avatarInput.on('change', $.proxy(this.change, this));

  this.$avatarForm.on('submit', $.proxy(this.submit, this));

右边三张图片的预览，cropper.js:

  prototype.initPreview = function () {

    var url = this.url;

保存后post到服务器的数据片段：

------WebKitFormBoundaryFolCQ6Pod3D2Sysg

Content-Disposition: form-data; name="avatar_data"

{"x":187.5,"y":99.00000000000001,"height":792,"width":792,"rotate":0}

sitelogo.js:

    ajaxUpload: function () {

      var url = this.$avatarForm.attr('action'),

          data = new FormData(this.$avatarForm[0]),

          _this = this;

      $.ajax(url, {

        headers: {'X-XSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}, 

        type: 'post',

        data: data,

剪裁modal：

    click: function () {

      this.$avatarModal.modal('show');

      this.initPreview();

    },

lv1=mynote lv2= type=todo

剪裁模块按需加载

SHA-1: 52701e31646bd753bda2b84de7c139c5469c58d9

* 修改头像不要初始图片

SHA-1: 4b3c8f6cf40f4d5a77aac3f41a38582da61459c2

* 更新头像上传部分的代码：用前端生成裁剪和缩小后的图片数据(base64)传给后端保存。

SHA-1: e2354340e612ec20be20b84582669302bf4700c8

* 【更新】- 头像插件完美解决问题，旋转角度生成已经解决。

SHA-1: e5c73be25f7d59ead6b0f8e4052c4a4fd16c5df2

* 【bug】- 修复头像重传异常为首次图像的问题

lv1= lv2= type=

学习HTML5 Canvas这一篇文章就够了

https://blog.csdn.net/u012468376/article/details/73350998

旋转变换（一）旋转矩阵

https://www.cnblogs.com/zhoug2020/p/7842808.html

x′=xcosθ−ysinθ 

y′=xsinθ+ycosθ 

写成矩阵的形式是：

核心：获取旋转前的坐标；坐标系旋转而非canvas旋转