Javascript与HTML5的canvas实现图片旋转效果

PHPABC Html5 1,049 次浏览 , 没有评论

我们在微博上可以对图片进行向左转向右转等旋转操作,让用户可以从不同的视角欣赏图片效果。本文将结合实例为您讲解如何使用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="http://www.phpabc.cn/uploads/2016/02/demo-1-1.jpg" alt="" id="myimg" height="305" width="460">   
    </div>


javascript

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

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

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

  代码中,我们创建canvas元素对象,并将图片赋予canvas对象,当变量n处于不同的状态(上下左右四个方向)时,使用canvas重新对图像进行绘制。关于canvas标签的使用,大家可以参照下本站文章:HTML5之画布Canvas,或者其他关于HTML5 Canvas 的文章。

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

    //*****************  
    //*****************  
    // 站长寒剑:代码是copy来的,有些地方是可以优化的,为了让大家能够看懂下面的代码,所以没有进行优化简写  
    //*****************  
    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);  
        //对IE浏览器使用滤镜旋转  
        if(document.all) {  
            img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')';  
            //HACK FOR MSIE 8  
            switch(n){  
                case 0:  
                    img.parentNode.style.height = img.height;  
                    break;  
                case 1:  
                    img.parentNode.style.height = img.width;  
                    break;  
                case 2:  
                    img.parentNode.style.height = img.height;  
                    break;  
                case 3:  
                    img.parentNode.style.height = img.width;  
                    break;  
            }  
        // 对现代浏览器写入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');  
            c.setAttribute('width', img.width);  
            c.setAttribute('height', img.height);  
 
            switch(n) {  
                default :  
                case 0 :  
                    canvasContext.rotate(0 * Math.PI / 180);  
                    canvasContext.drawImage(img, 0, 0);  
                    break;  
                case 1 :  
                    canvasContext.rotate(90 * Math.PI / 180);  
                    canvasContext.drawImage(img, 0, -img.height);  
                    break;  
                case 2 :  
                    canvasContext.rotate(180 * Math.PI / 180);  
                    canvasContext.drawImage(img, -img.width, -img.height);  
                    break;  
                case 3 :  
                    canvasContext.rotate(270 * Math.PI / 180);  
                    canvasContext.drawImage(img, -img.width, 0);  
                    break;  
            };  
        }  
    }

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go