头像裁剪上传功能实现
主要实现一个如图的头像裁剪上传功能:
思路
设置固定宽高的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: 鼠标移动