[CLOSED] [0.8.1] Rotate Ext.Image

  1. #1

    [CLOSED] [0.8.1] Rotate Ext.Image

    Hi, I am trying to rotate an Image Inside a Panel. See the Attachment. I am having problems, I dunno what its happening. The first time I click the Rotate Left Button It does what its expected to, and the myimage.ImageUrl calls the ImageHandler page nicely . But the second time nothing happens. The click Button event runs, but the myimage.ImageUrl property doesn't call my ImageHandler page.
    Attached Files
    Last edited by geoffrey.mcgill; Aug 17, 2010 at 9:25 PM. Reason: [CLOSED]
  2. #2
    Hi,

    It appears your .zip file is corrupted. For some reason it will not open.

    Can you post the .aspx code in a follow-up post.
    Last edited by geoffrey.mcgill; Aug 17, 2010 at 6:05 PM.
    Geoffrey McGill
    Founder
  3. #3

    Re:

    Hi, Here is the code:

    Default.aspx

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RotateImageDemo._Default" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
      
            <ext:ScriptManager ID="ScriptManager1" runat="server">
            </ext:ScriptManager>
            <ext:Window ID="_window" Border="false" Resizable="false" BodyBorder="false" Collapsible="false"
                runat="server" Plain="true" Icon="Application" Title="ImageViewer" ShowOnLoad="false" Width ="500px" Height="400px">
                <Body>
                    <ext:BorderLayout ID="_borderLayout1" runat="server">
                        <West Collapsible="true" Split="true" CollapseMode="Mini">
                            <ext:Panel ID="_leftPanel" BodyStyle="padding:6px;text-align:center;vertical-align:middle;"
                                AutoScroll="true" runat="server" Width="85">
                                <Body>
                                </Body>
                            </ext:Panel>
                        </West>
                        <Center>
                            <ext:Panel ID="_mainPanel" AutoScroll="true" BodyStyle="padding:6px;align:center;vertical-align:middle;"
                                runat="server">
                                <Body>
                                    <center>
                                        <ext:Image ID="_displayImage" runat="server">
                                        </ext:Image>
                                    </center>
                                </Body>
                            </ext:Panel>
                        </Center>
                        <East Collapsible="true" Split="true" CollapseMode="Mini">
                            <ext:Panel ID="_righPanel" BodyStyle="padding:6px;" runat="server" Width="110">
                                <Body>
                                    <ext:Button ID="_btnPrint" MinWidth="95" Icon="Printer" runat="server" Text="Print">
                                    </ext:Button>
                                    <ext:Button ID="_btnSave" MinWidth="95" Icon="Disk" runat="server" Text="Save">
                                    </ext:Button>
                                    <ext:Button ID="_btnZoomIn" MinWidth="95" Icon="MagnifierZoomIn" runat="server" Text="ZoomIn">
                                    </ext:Button>
                                    <ext:Button ID="_btnZoomOut" MinWidth="95" Icon="ZoomOut" runat="server" Text="ZoomOut">
                                    </ext:Button>
                                    <ext:Button ID="_btnReset" MinWidth="95" Icon="Reload" runat="server" Text="Reset Size">
                                    </ext:Button>
                                    <ext:Button ID="_btnRotateRight" MinWidth="95" Icon="ArrowRotateClockwise" runat="server"
                                        Text="Rotate Right">
                                    </ext:Button>
                                    <ext:Button ID="_btnRotateLeft" MinWidth="95" Icon="ArrowRotateAnticlockwise" runat="server"
                                        Text="Rotate Left">
                                    </ext:Button>
                                </Body>
                            </ext:Panel>
                        </East>
                        <South Collapsible="true" Split="true" CollapseMode="Mini">
                            <ext:Panel ID="_southPanel" runat="server" BodyStyle="padding:5px;" Height="32">
                                <Body>
                                    <center>
                                        <table border="0" width="auto" cellpadding="10" cellspacing="0">
                                            <tr>
                                                <td>
                                                    <ext:Button ID="_btnFirst" Icon="ResultsetFirst" MinWidth="80" runat="server">
                                                    </ext:Button>
                                                </td>
                                                <td>
                                                    <ext:Button ID="_btnPrevious" Icon="ResultsetPrevious" MinWidth="80" runat="server">
                                                    </ext:Button>
                                                </td>
                                                <td>
                                                    <ext:Button ID="_btnNext" Icon="ResultsetNext" MinWidth="80" runat="server">
                                                    </ext:Button>
                                                </td>
                                                <td>
                                                    <ext:Button ID="_btnLast" Icon="ResultsetLast" MinWidth="80" runat="server">
                                                    </ext:Button>
                                                </td>
                                            </tr>
                                        </table>
                                    </center>
                                </Body>
                            </ext:Panel>
                        </South>
                    </ext:BorderLayout>
                </Body>
            </ext:Window>
    
        </form>
    </body>
    </html>
    Default.aspx.cs

    using System;
    using Coolite.Ext.Web;
    
    namespace RotateImageDemo
    {
        public partial class _Default : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                _window.Show();
                _displayImage.ImageUrl = @"Images/image3.jpeg";
            }
            protected override void OnInit(EventArgs e)
            {
                base.OnInit(e);
                _btnRotateLeft.AjaxEvents.Click.Event += new ComponentAjaxEvent.AjaxEventHandler(BtnRotateLeftClickEvent);
            }
    
            private void BtnRotateLeftClickEvent(object sender, AjaxEventArgs e)
            {
                _displayImage.ImageUrl = "http://localhost/RotateImageDemo/ImageHandler.aspx?rotateLeft=yes" + "&path=Images//image3.jpeg";
            }
        }
    }
    ImageHandler.aspx.cs

    using System;
    using System.Collections.Generic;
    using System.Diagnostics;
    using System.Drawing;
    using System.Drawing.Imaging;
    using Image = System.Drawing.Image;
    
    namespace RotateImageDemo
    {
        public partial class ImageHandler : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (Request["rotateLeft"] == "yes")
                {
                    var path = Server.MapPath(Request["path"]);
                    var newImage = Image.FromFile(path);
                    newImage.RotateFlip(RotateFlipType.RotateNoneFlipXY);
                    Response.Clear();
                    Response.ContentType = "image/jpeg";
                    newImage.Save(Response.OutputStream, ImageFormat.Jpeg);
                    Response.OutputStream.Flush();
                    newImage.Dispose();
                }
            }
        }
    }
    Of course if you want this code to work. You would have to add a folder to your solution called images and some image called image3.jpeg
  4. #4
    Hello!

    The click Button event runs, but the myimage.ImageUrl property doesn't call my ImageHandler page
    This is because of there is caching in the browser. You can avoid this behavior using this code:

    private void BtnRotateLeftClickEvent(object sender, AjaxEventArgs e)
    {
        Random r = new Random();
        _displayImage.ImageUrl = "http://localhost:1297/ImageHandler.aspx?rotateLeft=yes" + "&path=Images/image3.JPG" + "&" + r.Next().ToString();
    }
  5. #5
    Quote Originally Posted by Daniil View Post
    Hello!


    This is because of there is caching in the browser. You can avoid this behavior using this code:

    private void BtnRotateLeftClickEvent(object sender, AjaxEventArgs e)
    {
        Random r = new Random();
        _displayImage.ImageUrl = "http://localhost:1297/ImageHandler.aspx?rotateLeft=yes" + "&path=Images/image3.JPG" + "&" + r.Next().ToString();
    }
    Ya, this was my first thought as well.

    A cache buster is required. Using a millisecond, or tick, or even GUID in the URL will crack the caching.
    Geoffrey McGill
    Founder
  6. #6

    Re:

    Yup the fix works nicely. Ty.

    By the way, I tried this code instead of adding the random, but it didn't work.


    
    Response.Cache.SetCacheability(HttpCacheability.NoCache);
    
    <%@ OutputCache Location="None" %>
  7. #7
    Hello!

    I tried it too. I'm not sure why it doesn't make sense...
    Also I tried
    Response.Cache.SetExpires(DateTime.Today.AddDays(-1));
    with the same result.

    So, it's good that we have at least one effective way to crack cache using random value, ticks, etc.:)

Similar Threads

  1. Replies: 1
    Last Post: May 16, 2012, 12:57 PM
  2. [CLOSED] Ext:Image: How I can change the image when mouse over?
    By supera in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: May 11, 2012, 11:10 AM
  3. [CLOSED] ext:Image - How I can show a menu when click in ext:Image?
    By supera in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: May 10, 2012, 8:56 PM
  4. [CLOSED] Component image support rotate?
    By stoque in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jan 16, 2012, 11:00 AM
  5. How to rotate a grid column header?
    By AmitM in forum 1.x Help
    Replies: 11
    Last Post: Jun 08, 2011, 2:29 PM

Posting Permissions