Is it possible to place form controls, eg Signature control, tick boxes,etc.. in RadImageEditor?

https://www.telerik.com/forums/create-signature-with-imageeditor

Alan

A large uploaded image is not saved properly after cropping in disabled CanvasMode. Instead of saving the cropped part of the image, the control is saving the original image resized to fit the cropped part size.

The issue is reproducible both by using the Save dialog (Save image on server) or the saveImageOnServer() method.

Steps to reproduce:

1. Open http://demos.telerik.com/aspnet-ajax/imageeditor/examples/imageupload/defaultcs.aspx in IE8
2. Upload the attached image
3. Crop a part of it
4. Save the image on server

Result: The original image is resized with the crop-box dimensions.

After the LIB (2013.1.423) the Save (on server) functionality of the ImageEditor doesn't work properly and throws a javascript error.

For the time being you can hardcode the "touch-action:none" style to the ImageEditor:

<telerik:RadImageEditor ID="RadImageEditor" runat="server" style="touch-action:none;"></telerik:RadImageEditor>

The mouse position coordinates of the ImageEditor (can be seen in its bottom Statusbar) are not updated properly after zooming (Crtl+Mouse scroll over the image). Moving the mouse pointer outside the ImageEditor's viewport and bringing it back forces the control to recalculate the mouse position properly.

Video: http://screencast.com/t/BB7UzCwj0zz

Steps to reproduce:
1. Open http://demos.telerik.com/aspnet-ajax/imageeditor/examples/overview/defaultcs.aspx
2. Choose a specific point of the image and check its position (the x and y coordinates shown in the ImageEditor's status bar)
3. Zoom-in the image by pressing Ctrl and Mouse scroll
4. Navigate to the same point

Actual: The x and y coordinates are changed
Expected: The x and y coordinates of the point are the same as before the zooming

JS error is thrown when a Responce.Redirect() is made after editing an image in RadImageEditor.



Steps to reproduce:

1. Run the following code:

        <telerik:RadImageEditor ID="ImageEditorControl" runat="server" RenderMode="Classic"
            Width="790px" Height="430px" ImageUrl="~/Images/bhp-500l.jpg">
        </telerik:RadImageEditor>
        <asp:Button ID="Button3" runat="server" Text="Redirec" OnClick="Button3_Click" />

    Protected Sub Button3_Click(sender As Object, e As EventArgs) Handles Button3.Click
        Response.Redirect("https://www.google.bg/")
    End Sub


2. Open the Pencil tool and draw something on the image

3. Click the Redirect button

Result: A JavaScript error is thrown.

When the CanvasMode of the ImageEditor is enabled, the JPG images are saved as PNG.

Steps to reproduce:

1. Open the following online demo: http://demos.telerik.com/aspnet-ajax/imageeditor/examples/canvassupport/defaultcs.aspx

2. Use the configurator above the ImageEditor to enable the CanvasMode

3. Save the image, choosing the "Download image" option

4. The image, which original format is JPG is saved as a PNG (with increased size)

A video, demonstrating the issue is available here: http://screencast.com/t/FL3Gs6soz7F

The new version allows shape resizing on the image editor. 

However this is not working in a stable fashion. Here is the list of steps to replicate

a. Draw a rectangle
b. Hold the central marker to drag the rectangle. it moves slightly and then nothing happens
c. Try holding any other marker to move the rectangle it does not work

When the command dialogs from two ImageEditors on a page are opened consecutively, the second dock is rendered with wrong position. The issue most probably comes from the fact the second dock element (ToolsPanel) is appended to its parent ImageEditor, but not to the form.

Assuring that each dock is appended to the form element can be used as a temporary workaround of the issue:

        <telerik:RadImageEditor ID="RadImageEditor1" runat="server" Width="680" Height="450" OnClientDialogLoaded="ClientDialogLoaded"
            ImageUrl="waterpool.jpg">
        </telerik:RadImageEditor>
        <telerik:RadImageEditor ID="RadImageEditor2" runat="server" Width="680" Height="450" OnClientDialogLoaded="ClientDialogLoaded"
            ImageUrl="waterpool.jpg">
        </telerik:RadImageEditor>
        <script>
            function ClientDialogLoaded(imageEditor, args) {
                setTimeout(function () {
                    $telerik.$("#<%=form1.ClientID %>").append($get(imageEditor.get_id() + "_ToolsPanel"));
                }, 0);
            }
        </script>

Adding ImageEditor inside a RadPanel breaks the RadPanels designer. The problematic behavior can be observed with the following configuration:

        <telerik:RadPanelBar ID="RadPanelBar1" Runat="server">
            <Items>
                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem1">
                    <ContentTemplate>
                        <telerik:RadImageEditor ID="RadImageEditor1" runat="server" ImageUrl="~/Images/Jellyfish - Copy.jpg"></telerik:RadImageEditor>
                        <asp:Button runat="server" ID="dasd" />
                        <telerik:RadEditor ID="RadEditor1" runat="server"></telerik:RadEditor>
                    </ContentTemplate>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelBar>

When the page is zoomed in iOS and Android devices, lines drawn are displaced downwards and to the right. Displacement increases with image zooming.

Configurations tested:
- iOS + Safari;
- Android + Chrome;

When the cropping box is resized through one of its left corners, the position of the cropping box is changed at all. The issue could be reproduced in all browsers. http://screencast.com/t/PDns6kPb

When you set Lightweight render mode via web.config, the image editor appears broken.

You can use the following setup in web.config as a workaround for the time being. Note that all instances of the RadToolBar will be rendered in Classic mode.
 <appSettings>
      ....
      <add key="Telerik.Web.UI.RenderMode" value="Auto" />   
      <add key="Telerik.Web.UI.ToolBar.RenderMode" value="Classic" />
       ....
</appSettings>

In the latest release (Q1 2016) it is possible to resize and drag the crop box in ImageEditor to negative bounds in IE.

Video: http://screencast.com/t/b1SyzOWBGb