网站地图

JS实现图片旋转代码

2012年12月1日 | 分类: html&&js&&css | 标签: ,

JS实现图片旋转代码，兼容firefox、IE和Chrome：



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
function rotate(o,p){ 

    var img = document.getElementById(o); 

    if(!img || !p) return false; 

    var n = img.getAttribute('step'); 

    if(n== null) n=0; 

    if(p=='right')

    { 

        (n==3)? n=0:n++; 

    }

    else if(p=='left')

    { 

        (n==0)? n=3:n--; 

    } 

    img.setAttribute('step',n); 

    /MSIE 

    if(document.all) 

    { 

        img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')'; 

        /HACK FOR MSIE 8 

        switch(n){ 

            case 0: 

                imgimg.parentNode.style.height = img.height; 

                break; 

            case 1: 

                imgimg.parentNode.style.height = img.width; 

                break; 

            case 2: 

                imgimg.parentNode.style.height = img.height; 

                break; 

            case 3: 

                imgimg.parentNode.style.height = img.width; 

                break; 

        } 

    /DOM 

    }

    else

    { 

        var c = document.getElementById('canvas_'+o); 

        if(c== null){ 

            img.style.visibility = 'hidden'; 

            img.style.position = 'absolute'; 

            c = document.createElement('canvas'); 

            c.setAttribute("id",'canvas_'+o); 

            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; 

        } 

    } 

}

用法：



1
2
3
4
5
6
7
8
9
10
11
<html>

<body>

<img src="text.jpg" id="img" />

<button value="左转" id="left" />

<button value="右转" id="right" />

<script type="text/javascript">

getElementById("left").onclick = function (){rotate("img", "left")};

getElementById("right").onclick = function (){rotate("img", "right")};

</script>

<body>

</html>
发表评论 | Trackback
目前还没有任何评论.