关于ie10图片旋转,该如何解决

2013-09-06

关于ie10图片旋转ie10中不能旋转，老ie貌似可以htmlhead/headbodydiv styletext-align:center

关于ie10图片旋转
ie10中不能旋转，老ie貌似可以


<html>
<head>
</head>
<body>
<div style="text-align:center;"><input type=button value="旋转图片" onclick="rotate(document.getElementById('_picview'));"/></div>
        <div>
        <img src="http://imgsrc.baidu.com/forum/pic/item/4d2a62d0f703918f7b682dac503d269759eec42c.jpg"  id="_picview" width=680 height=860/>
        </div>
</body>
</html>
<script language="javascript">
    var isIE = (document.all) ? 1 : 0;    
    alert(isIE);
    var i = 1;
    function rotate(image) {
        var object = image.parentNode;
        if (isIE==1) {        
            image.style.filter = "progid:dXImagetransform.Microsoft.basicImage(rotation=" + i + ")";
            i++;
            if (i > 4) { i = 1 };
        }
        else {
            try {
                var canvas = document.createElement('canvas');
                if (canvas.getContext("2d")) {
                    object.replaceChild(canvas, image);
                    var context = canvas.getContext("2d");
                    context.translate(176, 0);
                    context.rotate(Math.PI * 0.5);
                    context.drawImage(image, 0, 0);
                } 
 
            } catch (e) { }
        }
    } 
</script>

图片
[解决办法]
好吧，我承认语法上还有问题，应该是：

<html>
<head>
</head>
<body>
    <div style="text-align:center;"><input type=button value="旋转图片" onclick="rotate(document.getElementById('_picview'));"/></div>
        <div>
            <img src="http://imgsrc.baidu.com/forum/pic/item/4d2a62d0f703918f7b682dac503d269759eec42c.jpg"  id="_picview" width=680 height=860/>
        </div>
<script language="javascript">
    var i = 1;
    function rotate(image) {
        var object = image.parentNode;
        i++;
        if (i > 4) { i = 1 };
        if (typeof(FileReader) !== "undefined") {
            switch(i)
            {
                case 1: image.style.cssText = "-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);transform:rotate(0deg);-o-transform:rotate(0deg);"; break;
                case 2: image.style.cssText = "-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);transform:rotate(90deg);-o-transform:rotate(90deg);"; break;
                case 3: image.style.cssText = "-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);transform:rotate(180deg);-o-transform:rotate(180deg);"; break; 
 
                case 4: image.style.cssText = "-webkit-transform: rotate(270deg);-moz-transform: rotate(270deg);transform:rotate(270deg);-o-transform:rotate(270deg);"; break;
            }
        } else
            image.style.filter = "progid:dXImagetransform.Microsoft.basicImage(rotation=" + i + ")";
    } 
</script> 
</body>
</html>

热点排行

Bad Request.

JavaScript

关于ie10图片旋转,该如何解决