头像裁剪上传功能实现

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

思路

设置固定宽高的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: 鼠标移动
onmouseup: 鼠标弹起
e.clientX : 鼠标当前的X坐标
e.clientY : 鼠标当前的Y坐标

思路：

在鼠标按下时记录下当前坐标为（x1，y1），然后在鼠标移动时记录当前坐标为（x2，y2），因为鼠标位置不变，可以很快得出拖拽后的位置的top值和left值应为最初按下时的top，left值加上偏移量。
头像裁剪上传功能实现

附加：

这只是实现了拖拽，但是很多时候，拖拽是有一个边界的，就比如，在这个例子中它的限制就是canvas必须在div以内，如图：
头像裁剪上传功能实现

图片的变化

思路

根据原点的位置，等比例变换canvas的宽高。

布局

由一个圆div和一条div构成，首先，"横条"设置了positon为relative，然后给"圆"div设置为absolute,根据（（圆的|left值|/横条div的宽度）+ 1）这个倍率来改变canvas的宽高。

图片的截取

思路

通过canvas相对外部div的定位，利用canvcas的
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

img 规定要使用的图像、画布或视频。
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
width 可选。要使用的图像的宽度。（伸展或缩小图像）
height 可选。要使用的图像的高度。（伸展或缩小图像）

分析之后，可以得到如下图：头像裁剪上传功能实现
即，要裁剪的部分即为(canvas, -left, -right, div_width, div_height, 0, 0, div_width, div_height)，然后利用canvas.toblob()方法，将该画布转为blob对象，给后台传过去就算是裁剪上传成功啦！

头像裁剪上传功能实现