Javascript实现canvas图片旋转

HTML5 herman 701浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

这两天我把我的博客:业余草xttblog升级了https,更新的文章可能不是很多。今天为大家分享一下使用Javascript实现canvas图片旋转。

论坛中有很多人问我关于 Canvas 问题,Canvas现在研究的人很多,但是基于Canvas的应用目前还不是很多,主要是国内的 ie 低版本浏览器用户太多。但是这些都毫不影响我们队 HTML5 的热情。

一般在注册页面,我们上传图片时,会进行一些图片剪贴,旋转等功能。使用HTML5的canvas标签可对图片进行旋转操作,对于ie6,7,8不支持HTML5的浏览器,我们使用IE特有的滤镜效果来实现。

下面是demo的运行效果:

Canvas 编辑图片

HTML 代码很简单,如下:

<div id="tool"> 
     <a href="#" id="arr_left" onclick="rotate('myimg','left')">向左</a> 
     <a href="#" id="arr_right" onclick="rotate('myimg','right')">向右</a> 
</div> 
<!-- 操作菜单,业余草:www.xttblog.com -->
<div id="img"> 
     <img src="demo.jpg" width="460" height="305" alt="" id="myimg" /> 
</div> 

最重要的旋转方法rotate的实现代码如下:

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); 
    ... //业余草:www.xttblog.com
	//对IE浏览器使用滤镜旋转 
    if(document.all) { 
        img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')'; 
    // 对现代浏览器写入HTML5的元素进行旋转: canvas 
    }else{ 
        ... 
    } 
} 

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

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

源代码已共享在github:https://github.com/xmt1139057136/imgRotate

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » Javascript实现canvas图片旋转