Save DrawComponent Sprites as PNG

  1. #1

    Save DrawComponent Sprites as PNG

    Hello,

    Is it possible to export all sprites on a draw component surface to an image?

    Similar to the Chart.Save() method.

    Thanks!
  2. #2
    Please use the following javascript code
    Ext.draw.Surface.save(App.Draw1.surface, {type:"image/png"});
  3. #3
    Quote Originally Posted by Vladimir View Post
    Please use the following javascript code
    Ext.draw.Surface.save(App.Draw1.surface, {type:"image/png"});

    Thanks for the quick response.

    I've tried this before but get a type error - "Cannot read property 'items' of undefined".

    Here's an example of my drawsurface...

    <ext:Panel ID="Panel6" 
    runat="server" 
    Border="false" 
    Width="1050" 
    Height="509" 
    Layout="Absolute"
    ButtonAlign="Center">  
        <Items>                       
            <ext:DrawComponent ID="Canvas" Width="1050" Height="480" runat="server">
                <Items>
    
                <ext:Sprite Type="Circle" Radius="5" x="50" Y="50" Fill="#2e2e2e">
                </ext:Sprite>
    
                </Items>
            </ext:DrawComponent>    
        </Items>
    </ext:Panel>
  4. #4
    Please provide runable example
  5. #5
    Quote Originally Posted by Vladimir View Post
    Please provide runable example
    is this what you need?

    <form id="Form1" runat="server" visible="True">
    
    <ext:ResourceManager ID="ResourceManager1" runat="server" EnableViewState="true" AjaxViewStateMode="Enabled">
    </ext:ResourceManager>
    
    <ext:Panel ID="Panel6" 
    runat="server" 
    Border="false" 
    Width="1050" 
    Height="509" 
    Layout="Absolute"
    ButtonAlign="Center">  
        <Items>                       
            <ext:DrawComponent ID="Canvas" Width="1050" Height="480" runat="server">
                <Items>
    
                <ext:Sprite Type="Circle" Radius="5" x="50" Y="50" Fill="#2e2e2e">
                </ext:Sprite>
    
                </Items>
            </ext:DrawComponent>    
        </Items>
        <TopBar>
    <ext:Toolbar ID="Toolbar4" runat="server">
        <Items>
            <ext:Button ID="Button8" runat="server" Text="Example">
                <Listeners>
                <Click Handler="Ext.draw.Surface.save(App.Canvas.surface, {type:'image/png'});">
                </Click>
                </Listeners>
            </ext:Button>
          </Items>
        </ext:Toolbar>
    </TopBar>
    
    </ext:Panel>
    
    </form>
  6. #6
    Your sample works fine for me with latest code. May be it is already fixed
  7. #7
    Thanks, I was using 2.0 and it looks like it got resolved/changed since 2.1.

Similar Threads

  1. Replies: 1
    Last Post: Jul 27, 2011, 10:19 AM
  2. how to save a row in gridpanel
    By madhugumma in forum 1.x Help
    Replies: 0
    Last Post: Jul 15, 2009, 8:55 AM
  3. How to save the many data
    By wkcode in forum 1.x Help
    Replies: 1
    Last Post: Feb 28, 2009, 3:39 AM
  4. Save in database
    By flaviodamaia in forum 1.x Help
    Replies: 4
    Last Post: Nov 06, 2008, 7:16 AM

Tags for this Thread

Posting Permissions