图片的旋转,缩放和拖拽

     由于之前公司项目的原因,我被要求完成一个头像上传功能，其中包括要实现上传图片的旋转,缩放和拖拽,更关键的是要用JS实现...

    作为一个不大喜欢用JS的人来说这是一个很严峻的挑战,不过随着项目的进行我的这个功能模块也算是完成（人都是被逼出来的）最终的版本能够支持IE，谷歌，火狐浏览器（兼容多浏览器不容易啊）

    下面仅提供核心思想和部分代码：
     

     拖拽:是使用网上现成的JS代码，在此基础上进行适当的修改即可满足自己的需求，最主要的就是判定拖拽的范围，上传的图片不能给拖没了，所以加上个范围限定，判断超出了这个范围便拖拽无效果。

    旋转与缩放要区分浏览器..

    旋转:IE浏览器下想要实现图片的旋转很简单只要调用IE提供的滤镜filter参数为一个旋转矩阵即可.谷歌和火狐浏览器图片显示用的是canvas标签而不是img标签所以图片的旋转需要用canvas标签相关的一些方法来实现（跟html5类似或者说就是html5,本人才疏学浅理解不透）,并且旋转相关的数据需要自己进行数学计算。

    缩放: IE下要实现图片的缩放很简单只要把img标签对应的width与length值增大或者缩小就可以,但是火狐和谷歌下的canvas标签是一个完全不同的处理方式。这是比较纠结的...详细可以看看代码.

    

    效果图如下：

    本身这个功能是在一个大项目中由于机密不能在大项目中展示运行,我后来自己简单的建了一个小项