javascript结合canvas实现图片旋转效果


Posted in Javascript onMay 03, 2015

我们在微博上可以对图片进行向左转向右转等旋转操作,让用户可以从不同的视角欣赏图片效果。本文将结合实例为您讲解如何使用Javascript结合相关技术来实现图片的旋转效果。我们使用HTML5的canvas标签可对图片进行旋转操作,对于ie6,7,8不支持HTML5的浏览器,我们使用IE特有的滤镜效果来实现图片旋转。

HTML

我们在页面中放置一张图片,在图片的上方放置两个按钮,通过onclick事件调用rotate()函数来控制图片向左向右旋转。

<div id="tool"> 
   <a href="#" id="arr_left" onclick="rotate('myimg','left')">向左</a> 
   <a href="#" id="arr_right" onclick="rotate('myimg','right')">向右</a> 
</div> 
<div id="img"> 
   <img src="demo.jpg" width="460" height="305" alt="" id="myimg" /> 
</div>

Javascript

function rotate(obj,arr){ 
  var img = document.getElementById(obj); 
  if(!img || !arr) return false; 
  var n = img.getAttribute('step'); 
  if(n== null) n=0; 
  if(arr=='left'){ 
    (n==0)? n=3:n--; 
  }else if(arr=='right'){ 
    (n==3)? n=0:n++; 
  } 
  img.setAttribute('step',n); 
  ... 
}

我们写了个自定义函数rotate(),其中参数obj表示要旋转的图片对象的id,参数arr表示旋转方向,固定两个值:left(向左)和right(向右)。我们设置变量n是为了记录上下左右四种旋转状态,点击旋转按钮时可以保证持续的旋转的状态,即每次旋转是在上次旋转操作后的基础上再次旋转。

然后,我们要根据浏览器的不同进行不同的处理,对于IE系浏览器,可以使用他们特有的滤镜来实现旋转效果,虽然我们不建议使用滤镜,但为了兼容IE老版本,我们不得不重操这把旧刀。

function rotate(obj,arr){ 
  ... 
  //对IE浏览器使用滤镜旋转 
  if(document.all) { 
    img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')'; 
  // 对现代浏览器写入HTML5的元素进行旋转: canvas 
  }else{ 
    ... 
  } 
}

代码中,我们使用document.all判断是否为IE浏览器,如果是则使用滤镜,而对于firefox和chrome这样的现代浏览器,我们使用canvas来实现旋转效果。

function rotate(obj,arr){ 
  ... 
  // 对现代浏览器写入HTML5的元素进行旋转: canvas 
  }else{ 
    var c = document.getElementById('canvas_'+obj); 
    if(c== null){ 
      img.style.visibility = 'hidden'; 
      img.style.position = 'absolute'; 
      c = document.createElement('canvas'); 
      c.setAttribute("id",'canvas_'+obj); 
      img.parentNode.appendChild(c); 
    } 
    var canvasContext = c.getContext('2d'); 
    switch(n) { 
      default : 
      case 0 : 
        c.setAttribute('width', img.width); 
        c.setAttribute('height', img.height); 
        canvasContext.rotate(0 * Math.PI / 180); 
        canvasContext.drawImage(img, 0, 0); 
        break; 
      case 1 : 
        c.setAttribute('width', img.height); 
        c.setAttribute('height', img.width); 
        canvasContext.rotate(90 * Math.PI / 180); 
        canvasContext.drawImage(img, 0, -img.height); 
        break; 
      case 2 : 
        c.setAttribute('width', img.width); 
        c.setAttribute('height', img.height); 
        canvasContext.rotate(180 * Math.PI / 180); 
        canvasContext.drawImage(img, -img.width, -img.height); 
        break; 
      case 3 : 
        c.setAttribute('width', img.height); 
        c.setAttribute('height', img.width); 
        canvasContext.rotate(270 * Math.PI / 180); 
        canvasContext.drawImage(img, -img.width, 0); 
        break; 
    }; 
  } 
}

代码中,我们创建canvas元素对象,并将图片赋予canvas对象,当变量n处于不同的状态(上下左右四个方向)时,使用canvas重新对图像进行绘制。

当然,图片的旋转效果实现还有一种解决方案,绕开html5,针对各不同的浏览器,比如firefox下面可以用-moz-transform: rotate(); webkit可以用-webkit-transform: rotate(); 但这并不如html5的canvas实现的效果好。

以上所述就是本文给大家分享的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Array对象方法参考
Oct 03 Javascript
filemanage功能中用到的common.js
Apr 08 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
Javascript函数式编程语言
Oct 11 Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
修改npm全局安装模式的路径方法
May 15 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
Dec 03 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
浅谈javascript语法和定时函数
May 03 #Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 #Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 #Javascript
jQuery中 attr() 方法使用小结
May 03 #Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 #Javascript
jQuery的几个我们必须了解的特点
May 03 #Javascript
jQuery的css() 方法使用指南
May 03 #Javascript
You might like
php短网址和数字之间相互转换的方法
2015/03/13 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
JavaScript浏览器选项卡效果
2010/08/25 Javascript
js 页面关闭前的出现提示的实现代码
2011/05/25 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
Python获取apk文件URL地址实例
2013/11/01 Python
简单谈谈python中的多进程
2016/11/06 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
python数据爬下来保存的位置
2020/02/17 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
如何通过python计算圆周率PI
2020/11/11 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
国际书籍零售商:Wordery
2017/11/01 全球购物
西安众合通用.net笔试题
2013/03/18 面试题
幼儿园迎新生欢迎词
2015/09/30 职场文书