Uninote
Uninote
用户根目录
每日点滴

<!DOCTYPE html> <html><head><meta http-equiv='Content-Type' content='text/html; charset=utf8'><title>avatar 头像</title> <script> var g_resRoot = '../../__res/'; var g_json_outline = '{"children":[{"children":[],"level":1,"lvNumber":"1","text":"avatar canvas + base64 version"}],"level":0,"lvNumber":"","text":"avatar 头像"}'; </script> <link rel='stylesheet' type='text/css' href='../../__res/common.css'><style>.s0{color:#000000;} .s1{color:#000000;} .s2{color:#c80000;} .s3{color:#000000;} .s4{color:#0000ff;} .s5{color:#000000;} .s6{color:#000000;} .s7{color:#000000;} .s8{color:#000000;} .s9{color:#0000ff;} .s10{color:#0000ff;} </style> </head><body> <script src='../../__res/util.js'></script><div id='outline'> <li><a href='#ol_0' style='font-weight:bold; font-size:22px'>avatar 头像</a></li> <li> <a href='#ol_1' >avatar canvas + base64 version</a></li> </div>

<pre id='ol_0' class='title'>avatar 头像</pre> <pre><d class='s0'></d></pre> <pre><d class='s0'><a href='..\js/api.html#f3daa90d-2a8b-48b4-a01c-349b7bdf6f5d'>URL API </a></d></pre> <pre><d class='s1'></d></pre> <pre><d class='s1'>选择图片后的event listener:</d></pre> <pre><d class='s1'>addListener: function () {</d></pre> <pre><d class='s1'> this.$avatarView.on('click', $.proxy(this.click, this));</d></pre> <pre><d class='s1'> </d><d class='s2'>this.$avatarInput.on('change', $.proxy(this.change, this));</d></pre> <pre><d class='s1'> this.$avatarForm.on('submit', $.proxy(this.submit, this));</d></pre> <pre><d class='s1'> </d></pre> <pre><d class='s1'>右边三张图片的预览,cropper.js:</d></pre> <pre><d class='s1'> prototype.initPreview = function () {</d></pre> <pre><d class='s1'> var url = this.url;</d></pre> <pre><d class='s0'></d></pre> <pre><d class='s1'>保存后post到服务器的数据片段:</d></pre> <pre><d class='s1'>------WebKitFormBoundaryFolCQ6Pod3D2Sysg</d></pre> <pre><d class='s1'>Content-Disposition: form-data; name="</d><d class='s2'>avatar_data</d><d class='s1'>"</d></pre> <pre><d class='s1'></d></pre> <pre><d class='s1'>{"x":187.5,"y":99.00000000000001,"height":792,"width":792,"rotate":0}</d></pre> <pre><d class='s1'></d></pre> <pre><d class='s2'>sitelogo.js:</d><d class='s1'></d></pre> <pre><d class='s1'> ajaxUpload: function () {</d></pre> <pre><d class='s1'> var url = this.$avatarForm.attr('action'),</d></pre> <pre><d class='s1'> data = </d><d class='s2'>new FormData</d><d class='s1'>(this.$avatarForm[0]),</d></pre> <pre><d class='s1'> _this = this;</d></pre> <pre><d class='s1'></d></pre> <pre><d class='s1'> $.ajax(url, {</d></pre> <pre><d class='s1'> headers: {'X-XSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}, </d></pre> <pre><d class='s1'> type: 'post',</d></pre> <pre><d class='s1'> data: data,</d></pre> <pre><d class='s3'></d></pre> <pre><d class='s3'>剪裁modal:</d></pre> <pre><d class='s3'> click: function () {</d></pre> <pre><d class='s3'> this.$avatarModal.modal('show');</d></pre> <pre><d class='s3'> this.initPreview();</d></pre> <pre><d class='s3'> },</d></pre> <pre><d class='s1'></d></pre> <t id='0e905724-f430-4138-8565-6975299e0261'> <pre class='tnd_head'>lv1=mynote lv2= type=todo</pre> <pre><d class='s3'>剪裁模块按需加载</d></pre> </t> <pre><d class='s4'></d></pre> <pre><d class='s5'>SHA-1: 52701e31646bd753bda2b84de7c139c5469c58d9</d></pre> <pre><d class='s5'>* </d><d class='s6'>修改头像不要初始图片</d></pre> <pre><d class='s5'>SHA-1: 1074797dd96bd738bf464ef90066942344a4ebe9</d></pre> <pre><d class='s5'>* </d><d class='s6'>更新头像上传部分的代码:用前端生成裁剪和缩小后的图片数据</d><d class='s7'>(base64)</d><d class='s6'>传给后端保存。</d></pre> <pre><d class='s1'></d></pre> <t id='045427a0-5294-4018-a378-766772868115'> <pre class='tnd_head'>lv1= lv2= type=</pre> <h1 id='ol_1'>avatar canvas + base64 version</h1> <pre><d class='s8'></d></pre> <pre><d class='s8'>学习HTML5 Canvas这一篇文章就够了</d></pre> <pre><d class='s8'><a href='https://blog.csdn.net/u012468376/article/details/73350998'>https://blog.csdn.net/u012468376/article/details/73350998</a></d></pre> <pre><d class='s8'></d></pre> <pre><d class='s8'>旋转变换(一)旋转矩阵</d></pre> <pre><d class='s8'><a href='https://www.cnblogs.com/zhoug2020/p/7842808.html'>https://www.cnblogs.com/zhoug2020/p/7842808.html</a></d></pre> <pre><d class='s8'>x′=xcosθ−ysinθ </d></pre> <pre><d class='s8'>y′=xsinθ+ycosθ </d></pre> <pre><d class='s8'>写成矩阵的形式是:</d></pre> <pre><d class='s8'><img src='..\pic\ec374495d01ab3c34ff642716e972781.jpg' /></d><d class='s8'></d></pre> <pre><d class='s9'></d></pre> <pre><d class='s10'>核心:获取旋转前的坐标;坐标系旋转而非canvas旋转</d><d class='s9'></d></pre> </t> </d></pre> </body></html>

es-php-client

eson_todo

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