Draw using ImageEditor

[Patrick]

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>

[Vessy]

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

 

 

[Patrick]

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.

[Vessy]

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

 

 

[Patrick]

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.        }

[Patrick]

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?

[Patrick]

Forgotten the attached

[Vessy]

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

 

 

[Radian]

Hi,

How can save radimageeditor image to mysql database?

[Vessy]

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

[Radian]

thanks,

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

 

 

[Slav]

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

[Khin Myo]

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>

[Marin Bratanov]

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

[Khin Myo]

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!

[Marin Bratanov]

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 [e-mail].

Regards,

Marin Bratanov
Telerik