头像裁剪上传功能实现

头像裁剪上传功能实现

主要实现一个如图的头像裁剪上传功能：

思路

设置固定宽高的div，用于头像裁剪的最终部分并设置其overflow属性为hidden，position设置为relative给之后拖拽canvas作为参照，然后通过监听input的onchange事件，利用canvas绘图，将图片绘制到canvas上，并将该canvas加到该div之中，并设置其position为absolute。然后通过对canvas进行mousedown,mousemove,mouseup三个事件的监听，计算好拖拽的边界值。

图片的展示

通过监听input的onchange事件，用FileReader读到选取图片的内容，在其onload事件中赋给一个image对象作为src，然后在image对象的onload事件中利用canvas的drawImage(img, width, height)绘制出画布，最后用oDIV.appendChild(canvas)加入到div之后，详情可以看前篇博客enter link description here

拖拽的实现

前提：设置了absolute，因为是通过改变被拖拽对象的top和left值，实现的拖拽。
三个事件及触发时的事件对象e：

• onmousedown : 鼠标被按下
• onmousemove: 鼠标移动