由于之前公司项目的原因,我被要求完成一个头像上传功能,其中包括要实现上传图片的旋转,缩放和拖拽,更关键的是要用JS实现...
作为一个不大喜欢用JS的人来说这是一个很严峻的挑战,不过随着项目的进行我的这个功能模块也算是完成(人都是被逼出来的)最终的版本能够支持IE,谷歌,火狐浏览器(兼容多浏览器不容易啊)
下面仅提供核心思想和部分代码:
拖拽:是使用网上现成的JS代码,在此基础上进行适当的修改即可满足自己的需求,最主要的就是判定拖拽的范围,上传的图片不能给拖没了,所以加上个范围限定,判断超出了这个范围便拖拽无效果。
旋转与缩放要区分浏览器..
旋转:IE浏览器下想要实现图片的旋转很简单只要调用IE提供的滤镜filter参数为一个旋转矩阵即可.谷歌和火狐浏览器图片显示用的是canvas标签而不是img标签所以图片的旋转需要用canvas标签相关的一些方法来实现(跟html5类似或者说就是html5,本人才疏学浅理解不透),并且旋转相关的数据需要自己进行数学计算。
缩放: IE下要实现图片的缩放很简单只要把img标签对应的width与length值增大或者缩小就可以,但是火狐和谷歌下的canvas标签是一个完全不同的处理方式。这是比较纠结的...详细可以看看代码.
效果图如下:
本身这个功能是在一个大项目中由于机密不能在大项目中展示运行,我后来自己简单的建了一个小项