avatar 头像
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: 1074797dd96bd738bf464ef90066942344a4ebe9
* 更新头像上传部分的代码：用前端生成裁剪和缩小后的图片数据(base64)传给后端保存。
lv1= lv2= type=
avatar canvas + base64 version
学习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旋转
