Draw using ImageEditor

16 posts, 0 answers
  1. Patrick
    Patrick avatar
    5 posts
    Member since:
    Dec 2014

    Posted 25 Mar 2015 Link to this post

    Hi,

    I have an ImageEditor which I would one to allow user to draw on the image and save it as a new image.
    But with my below code, once I click on the pencil, it seems like the pencil is not working as I am unable to draw.
    I only have code on the aspx page as I do not know what code to put in aspx.cs page as the demo did not put any code.
    Can anyone help and let me know how can I do the above using ImageEditor?

    Thank you

    --ASPX--
    <telerik:RadImageEditor ID="RadImageEditor1" runat="server" ImageUrl="..\image\canvas.png"
    CanvasMode="Yes" >
    <Tools>
    <telerik:ImageEditorToolGroup>
    <telerik:ImageEditorTool CommandName="Save" />
    <telerik:ImageEditorTool CommandName="Undo" />
    <telerik:ImageEditorTool CommandName="Pencil" IsToggleButton="true" />
    </telerik:ImageEditorToolGroup>
    </Tools>
    </telerik:RadImageEditor>
  2. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 25 Mar 2015 Link to this post

    Hi Patrick,

    I have just answered your support ticket on the subject, for convenience I will paste my answer here as well:

    Can you verify that you are using the ImageEditor in IE10, without any compatibility mode? I am asking you that because the only possible reason I can think of causing the code below not to work is if the canvas mode is not supported in the used browser.

    I am attaching a test project to this message so you can examine its configurations on your side. Are you experiencing the same issue with it?


    Regards,
    Vessy
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Patrick
    Patrick avatar
    5 posts
    Member since:
    Dec 2014

    Posted 25 Mar 2015 in reply to Vessy Link to this post

    HI Vessy

    Thanks! It works now but I now have another issue which is saving the edited image as bit format directly onto MS SQL database. Is there a way that I can do it?
    Please also let me see some code sample like the above which is very helpful. Thanks again.
  5. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 26 Mar 2015 Link to this post

    Hi Patrick,

    You can save the edited image to a custom location like a data base by handling the ImageSaving server side event where the image data is available. I would suggest that you review the following live demo where this approach is used and described in details: Save Image to a Custom Location

    There is no a specific server-side method, you could use a standard memory stream in order to access the data of the edited image:
    protected void RadImgEdt_ImageSaving(object sender, Telerik.Web.UI.ImageEditorSavingEventArgs args)
    {
        Telerik.Web.UI.ImageEditor.EditableImage img = args.Image;
        MemoryStream ms = new MemoryStream();
        img.Image.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
        byte[] imageData =  ms.ToArray();
        //your logic for DB saving here
    }

    Regards,
    Vessy
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  6. Patrick
    Patrick avatar
    5 posts
    Member since:
    Dec 2014

    Posted 26 Mar 2015 in reply to Vessy Link to this post

    Hi Vessy,

    Great! Thanks! You are of great help.
    But there is still some queries that I would like to understand.

    In the attached I tried to download the image but it is giving me an error.
    how can I remove the download image option in the dialog?

    How can I not show the dialog box when I click on pencil or save? I would like the default to be used by the user. For example, When user select pencil, they cannot choose the color as well as the size ( the dialog box will be hidden). Same for the Save, When user click on save, I want it to be auto select save to server and automatically goes to my code behind.
    Is there a way to do the above?

    In below code(refer to line 26), I need to get the image type to store in the database. Currently I have to hard code the image type. May I ask how do I get the imagetype from the EditableImage?
    01.protected void RadImageEditor_ImageSaving(object sender, ImageEditorSavingEventArgs args)
    02.        {
    03. 
    04.            Telerik.Web.UI.ImageEditor.EditableImage img = args.Image;
    05.             
    06.            MemoryStream ms = new MemoryStream();
    07. 
    08.            img.Image.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
    09. 
    10.            byte[] imageFile = ms.ToArray();
    11.            int fileLength = imageFile.Length;
    12. 
    13.            //your logic for DB saving here
    14.            if (fileLength == 0)
    15.            {
    16.                lblError6.Text = "Error! No file to Upload";
    17.            }
    18.            else if (fileLength > 5 * (1024 * 1024))//max 5MB
    19.            {
    20.                lblError6.Text = "Error!" + "File size (" + fileLength / (1024 * 1024) + "mB) more than 5MB";
    21.            }
    22.            else
    23.            {
    24.                ms.Read(imageFile, 0, fileLength);
    25.                string fileName = "Signature";
    26.                string fileType = "image/x-png";
    27.                string jbId = ViewState["jbId"].ToString();
    28.                //insert into DB
    29.            }
    30.        }

  7. Patrick
    Patrick avatar
    5 posts
    Member since:
    Dec 2014

    Posted 26 Mar 2015 in reply to Vessy Link to this post

    Hi Vessy,

    I realised that the attached image ok button does not cause a postback.
    Is there a way that I can do a post back such that it can set the visibility of the ImageEditor as false and also call a Databind on a Image Result Grid to show the image that is save in the database?
  8. Patrick
    Patrick avatar
    5 posts
    Member since:
    Dec 2014

    Posted 26 Mar 2015 in reply to Patrick Link to this post

    Forgotten the attached
  9. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 30 Mar 2015 Link to this post

    Hi Patrick,

    Please, find my answers to the asked questions listed below:

    1 . You can remove the Donwload option from the Save dialog by modifying the Save.ascx dialog of the control. Details on the subject can be found here: Customize Built-in Dialogs

    Another possible approach can be to override the Save command, disabling the pop-up showing at all:
    Telerik.Web.UI.ImageEditor.CommandList.Save = function (imageEditor, commandName, args) {
        imageEditor.saveImageOnServer("", true);
    }

    2. Regarding the initial values of the Pencil command, you can set them by enabling the ImageEditor's external dialogs and modifying the initialize() method of the Pencil.ascx dialog in the following way:
    initialize: function ()
    {
        $IE.Pencil.callBaseMethod(this, "initialize");
      
        this.colorPicker = this._findControlFromParent("DrawColorPicker");
        this.sizeCombo = this._findControlFromParent("SizeCombo");
          
        this.onOpen();
        this.attachEventHandlers();
          
        this.colorPicker.set_selectedColor("#f00");
        this.sizeCombo.findItemByValue("10").select();
    }

    in the same dialog you can also define whether a textbox will be enabled or visible. The visibility of the Pencil dialog also can be controlled with the following style:

    div.RadDock.rieDialogs
    {
        display: none !important;
    }

    Please note, that the style above will be also applied to all RadImageEditor's dialogs as they are rendered in one and the same container.

    3. The RawFormat of the saved image is available in the ImageSaving event arguments object, so you parse it to ImageFormat( e.g., like shown here: Get ImageFormat from System.Drawing.Image.RawFormat):
    e.Image.Image.RawFormat

    Additionally, I would like to kindly ask you to open separate support tickets for each issue that you are experiencing so we can keep the consistency of the thread. Thank you for your understanding.

    Regards,
    Vessy
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  10. Radian
    Radian avatar
    11 posts
    Member since:
    Jul 2015

    Posted 15 Jul 2015 Link to this post

    Hi,

    How can save radimageeditor image to mysql database?

  11. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 17 Jul 2015 Link to this post

    Hi Radian,

    Once the Save command is fired, the edited image is send tot he server and can be accessed in the RadImageEditor's ImageSaving event. The following demo demonstrates how to access the edited image Bitmat in the ImageSaving event handler and save it to a custom location so you can use it as a base for your implementation:
    Save Image to a Custom Location

    Regards,
    Vessy
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  12. Radian
    Radian avatar
    11 posts
    Member since:
    Jul 2015

    Posted 20 Jul 2015 in reply to Vessy Link to this post

    thanks,

    i want to set radtileview in sequence either horizontally or vertically.  Cn u pls tell me. 

     

     

  13. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 23 Jul 2015 Link to this post

    Hello,

    I do not quite understand your question. If you are asking about the RadTileList control, you can check the features it offers in the demos of the control: http://demos.telerik.com/aspnet-ajax/tilelist/examples/overview/defaultcs.aspx

    If this does not help, you need to clarify which control you meant by radtileview as there is no control with that name in the UI for ASP.NET AJAX suite and describe in greater detail what you want to achieve so that I can get a better understanding of your scenario.

    Regards,
    Slav
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  14. Khin Myo
    Khin Myo avatar
    3 posts
    Member since:
    Jun 2016

    Posted 15 Jun Link to this post

    Hi,

    I have an ImageEditor which I would like to allow user to draw on the image. But with my below code, once I click on the pencil using chrome browser on the tablet, it seems like the pencil's focus point is not drawing correctly and it is not showing correct place. The changes of the drawing is displaying about one inch lower than what I drew. Please refer to the attached file. This problem is not happening desk top's browser and it is happening on the tablet's browser and phone's browser.

    I checked the following ways to investigate this problem.

     1.) I opened the below your demo link on the tablet & the phone and drew the image. The pencil focus point is drawing correctly and it's working fine.

           http://demos.telerik.com/aspnet-ajax/imageeditor/examples/drawing/defaultcs.aspx?show-source=true

    Is there any problem in my code below? Any one can help me to reply, please.

    ----ASPX----

    <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/MainMaster.Master" AutoEventWireup="true" CodeBehind="Testing.aspx.cs" Inherits="WorkOrder.Testing" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
        <div class="demo-container size-wide">
            <telerik:RadImageEditor RenderMode="Lightweight" ID="RadImageEditor1" runat="server" ImageUrl="~/Images/Car.jpg" Width="790" Height="430px">
                <Tools>
                    <telerik:ImageEditorToolGroup>
                        <telerik:ImageEditorTool CommandName="Save"></telerik:ImageEditorTool>
                        <telerik:ImageEditorToolSeparator></telerik:ImageEditorToolSeparator>
                        <telerik:ImageEditorToolStrip CommandName="Undo">
                        </telerik:ImageEditorToolStrip>
                        <telerik:ImageEditorToolStrip CommandName="Redo">
                        </telerik:ImageEditorToolStrip>
                        <telerik:ImageEditorTool CommandName="Reset"></telerik:ImageEditorTool>
                        <telerik:ImageEditorToolSeparator></telerik:ImageEditorToolSeparator>
                        <telerik:ImageEditorTool CommandName="Pencil"></telerik:ImageEditorTool>
                        <telerik:ImageEditorTool CommandName="DrawCircle"></telerik:ImageEditorTool>
                        <telerik:ImageEditorTool CommandName="DrawRectangle"></telerik:ImageEditorTool>
                        <telerik:ImageEditorTool CommandName="Line"></telerik:ImageEditorTool>
                    </telerik:ImageEditorToolGroup>
                </Tools>
            </telerik:RadImageEditor>
        </div>
    </asp:Content>

  15. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 20 Jun Link to this post

    Hi,

    If the demo works fine, but your app does not, the most likely reason is that your app is using an old version of our controls and you will need to upgrade to the latest (R2 2016 SP1 at the time of writing).

    Regards,

    Marin Bratanov
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  16. Khin Myo
    Khin Myo avatar
    3 posts
    Member since:
    Jun 2016

    Posted 21 Jun in reply to Marin Bratanov Link to this post

    Hi Marin,

    Thanks for your reply. I would like to know some more question. To get the latest version (R2 2016 SP1), I will need to purchase it again? (OR) Only one time purchase and free to get the upgrade version(s) after purchased?

    Thanks!

  17. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 22 Jun Link to this post

    Hello,

    To get the latest version you need to purchase a license. Once you do that, you get the upgrades for the term of the license for free. If you have any outstanding questions or you would like to get a quotation, feel free to write to sales@telerik.com.

    Regards,

    Marin Bratanov
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017