web图片如何翻转

web中，用asp：image控件展示的图片，需要能垂直翻转180°，请问该如何做？
想到两种思路:
1、直接改图片原文件，但可能难度较大；2、显示时给用户个按钮，点击按钮时，翻转图片。请问具体该怎么实现。

解决方案 »

  1.   

    大致确定了原因，是放在了updatepanel中，导致，请问该怎么办？
      

  2.   

    参见
    http://www.1lou.net/school/Javascript/0513143H010.html
      

  3.   


    <html>
    <head>  
    <title></title>    
    <script type="text/javascript">
    function rotateImage(HTMLControlID,degree) {   
       if(window.navigator.userAgent.indexOf('MSIE') > -1)
       {
    //处理IE浏览器
           var imageToRotate = document.getElementById(HTMLControlID);       imageToRotate.style.filter= "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')";  
          var deg2radians = Math.PI * 2 / 360; 
           var degreeToRotate =degree // 旋转度数;  
        rad = degreeToRotate * deg2radians ;         
        costheta = Math.cos(rad);          
        sintheta = Math.sin(rad);    
         
        imageToRotate.filters.item(0).M11 = costheta;          
        imageToRotate.filters.item(0).M12 = -sintheta;         
        imageToRotate.filters.item(0).M21 = sintheta;          
        imageToRotate.filters.item(0).M22 = costheta;  
     
    var w=document.getElementById(HTMLControlID).width;
    var h=document.getElementById(HTMLControlID).height;

    document.getElementById(HTMLControlID).width=h;
    document.getElementById(HTMLControlID).height=w;
    n+=1;
    if(n<2)
    {
    rotateImage(HTMLControlID,degree);
    }
    else
    {
    n=0;
    }

      }      
    }           
    </script>
    </head><body>
    <table width="100%" height="100%" border="0">
    <tr><td>
    <A href="javascript:rotateImage('imgRotate' , 90);">旋转90度</A>
    <A href="javascript:rotateImage('imgRotate' , 180);">旋转180度</A>
    <A href="javascript:rotateImage('imgRotate' , 270);">旋转270度</A>
    <A href="javascript:rotateImage('imgRotate' , 360);">原图</A></td></tr>
    <tr><td>
     <canvas id="canvas" ><img id="imgRotate" src="bd8dcf53-3c57-49cd-8221-0ffc03a155dc.jpg" />
    </canvas></td></tr></table>
    </body>
    </html>
    <script>
    var n=0;
    </script>
      

  4.   


    <html>
    <head>
    <title></title>
    <script type="text/javascript">
    function rotateImage() {
    imageToRotate = document.getElementById('imgRotate');  
    imageToRotate.style.filter= "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')";
    window.setTimeout("rotate()",100);
    }
    var imageToRotate;
    var degreeToRotate=0;
    function rotate(){
    var deg2radians = Math.PI * 2 / 360;
    degreeToRotate++;
    degreeToRotate=degreeToRotate%360;  
    rad = degreeToRotate * deg2radians ;
    costheta = Math.cos(rad);
    sintheta = Math.sin(rad);
    imageToRotate.filters.item(0).M11 = costheta;
    imageToRotate.filters.item(0).M12 = -sintheta;
    imageToRotate.filters.item(0).M21 = sintheta;
    imageToRotate.filters.item(0).M22 = costheta; 
    window.setTimeout("rotate()",100);
    }
    </script>
    </head>
    <body onload="rotateImage();">
    <br />  
    <canvas id="canvas" width="800" height="600">
    <img id="imgRotate" src="http://www.baidu.com/img/logo-yy.gif" />
    </canvas>
    </body>
    </html>
      

  5.   

    回楼上的几位，js最大的问题是放在updatepanel里用不了，或者很难用。有什么好的解决方法？
      

  6.   

    updatepanel有个更新模式设置为Always
      

  7.   

    http://topic.csdn.net/u/20100703/13/e57f5fd0-be70-4ccc-8f97-2854d5339d59.html?15741
      

  8.   

    updatepanel有什么好的？选择技术要根据自己的情况选择，当updatepanel可用可不用的时候，可以不要用了。
    updatepanel会导入很多js代码，影响页面加载进度