Uninote
Uninote
用户根目录
每日点滴
 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旋转

es-php-client

eson_todo

点赞(0) 阅读(222) 举报
目录
标题