您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

js实现图片旋转的三种方法_javascript技巧

2026/2/12 14:29:29发布17次查看
1 使用jqueryrotate.js实现
示例代码:
复制代码 代码如下:
测试结果:chrome下效果正常,旋转后img对象仍为img对象;ie8下效果正常,但旋转后img对象变为下面对象,由于对象变化,若旋转后仍按原来方法获取img对象,则会报js错误。欲获取image对象,可根据class获取。如果图像旋转后,不进行其它操作,则可用此方法。若进行其它操作,如放大、缩小图像,则此方法实现较复杂。
复制代码 代码如下:
2 使用microsoft提供的matrix对象
示例代码:
复制代码 代码如下:
测试结果:chrome下效果正常,但旋转后img对象变为canvas对象;ie8下效果正常,旋转后img对象仍为img对象。matrix()参数较多,使用时需较多计算。
3 使用microsoft提供的basicimage对象
示例代码:
复制代码 代码如下:
测试结果:chrome下不能旋转;ie8下效果正常,旋转后img对象仍为img对象。basicimage()仅一个参数。
查看这三种方法的代码会发现,本质上是一种解决方案:chrome下使用canvas对象实现,ie8下使用vml或者matrix()或basicimage()实现。本人近期改造一个组件:其中涉及到旋转、放大图片,由于jqueryrotate.js在ie8下会生成一个新的对象,导致放大图片前选择图片时,需要进行特殊处理。后决定对chrome、ie8分开处理,chrome下使用jqueryrotate实现,ie8下使用basicimage()实现,保证了代码的简洁性和可读性。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product