Image Editor Tool

[$uren]

Link : http://www.customink.com/lab/#shared

Hi..!

I need to create a web based Image Editor with the options available in above link.
Could anyone help me out..? 

[Rumen]

Hi,

I examined the provided page and noticed that this is not exactly an Image Editor but a set of different controls. For example the control does not updates the t-shirt color by creating a new image, but it loads an already available image according to the selected by the user color. You can see this video for more information: http://screencast.com/t/WnzdoSGiCkf. We have similar demos with RadColorPicker: http://demos.telerik.com/aspnet-ajax/colorpicker/examples/appscenario1/defaultcs.aspx
http://demos.telerik.com/aspnet-ajax/colorpicker/examples/appscenario3/defaultcs.aspx

Could you please tell us exactly which feature(s) of this product do you want to see offered by RadImageEditor?

Kind regards,
Rumen
the Telerik team

[$uren]

Hello Admin..!

I need
Ability to add text, clip art.
Ability to upload custom images(like logos).
Ability to save the created images .
Ability to specific images size for designing.
Ability to drag and drop images already in the Graphics Library or (Folder).

Regards
G.Surendar 

[Rumen]

Hello,

Straight to the requests:

• Ability to add text, clip art. - the ability to add text is already offered by RadImageEditor. You can see this demo: Add Text. You can also see how to add a custom dialog which will allow you to insert custom image inside the edited image: Implement Custom Dialog and Insert Image Built-in Dialog.
• Ability to upload custom images(like logos) - you can upload image as shown in the Default Example RadAsyncUpload.
• Ability to save the created images - RadImageEditor offers a save dialog to save the modified image. Just press the Save icon on the toolbar to load the Save dialog.
• Ability to specific images size for designing  - you can use the Resize dialog of RadImageEditor to resize the edited image.
• Ability to drag and drop images already in the Graphics Library or (Folder) - I think that the following demo could be helpful for your scenario: Using Custom Content Provider.

Greetings,
Rumen
the Telerik team

[Fit2Page]

Hi $uren,

I was wondering if you ever continued with the RadImageEditor as a base for the t-shirt designer.
I am challenged to build a greetingcard designer, i want to use RadImageEditor, would this be a good way to go?

Marc

[$uren]

Hello Fit2Page..!
         RadControls Support only standard customization like         
                Ability to add text, clip art.
                Ability to upload custom images(like logos) 
                Ability to save the created images
                Ability to specific images size for designing                 Ability to drag and drop images already in the Graphics Library or (Folder)

If u want more than this you can go for JQuery or Javascript ...

     Regards
       Suren
   

[Rumen]

Hi Marc,

My suggestion is to review the live demos of RadImageEditor which demonstrate the supported functionality and features of the image editing control.

Best regards,
Rumen
the Telerik team

[Andrew]

I've been researching the RadImageEditor functionality on your demo site and can't seem to find any information about whether or not the editor can handle editing multiple images at once.

I'm developing a project which requires the following:

• Drag & drop multiple images from a listview into the RadImageEditor (one at a time though)
• Resize images dynamically by clicking and dragging handles on the image's corners and sides
• Be able to arrange images on layers i.e. bring an image on top or put it behind another in the editor
• Be able to save the completed design to the server. The completed design is made up of multiple images that have been positioned by the user.

Does the RadImageEditor currently support these requirements? If not, are they planned in a future release?

Thanks,
Andrew

[Rumen]

Hello Andrew,

Thank you for your feature requests.

RadImageEditor is a web image editor and it is limited by the browser and its JavaScript engine. The requested features are not offered out-of-the box, because they are typical only for the flash or desktop based Image Editors.

Our developers are currently working on providing Canvas support for RadImageEditor, which could enable the implementation of some of the requested features.

All the best,
Rumen
the Telerik team

[Shubhadeep]

Dear All,
How can I set my fit to the Image Editor? Suppose My Image size is 1080/825 and I am setting Image Editor size to 800/400. When Image Editor showing that Image It is not coming full at the editor. How can I fit image to the Image Editor? Please help me.

[Vessy]

Hi Shubhadeep,

You can make the image fit the view port size by using the ImageEditor's zoomBestFit() method. This can be done in the handler of the control's Client-side ImageLoad event in a similar way:

<telerik:RadImageEditor ID="RadImageEditor1" runat="server" Width="680" Height="450" ImageUrl="~/Images/Chrysanthemum.jpg" OnClientImageLoad="OnClientImageLoad">
</telerik:RadImageEditor>
<script type="text/javascript">
    function OnClientImageLoad(imageEditor, args) {
        imageEditor.zoomBestFit();
    }
</script>

I hope this helps.

Regards,
Vessy
Telerik

 

 

[Shubhadeep]

Thanks for your reply. But your solution is not working for me.

[Vessy]

Hello Shubhadeep,

Maybe I did not understand the exact scenario properly - please, excuse me for that.

Could you, please describe in more details what you want to achieve and how it differs from the zoomBestFit() functionality?

Regards,
Vessy
Telerik

 

 

[Avinash]

Thank you for sharing

 

[Vessy]

Hi,

You are welcome, Avinash :)

Regards,
Vessy
Progress Telerik

[suman]

I just wonder, can we use image Editor control dialog (Insert Image) from browse from local computer ? or customize, I did try many other way but its seems after upload image from local computer or file browser no way to resize and move. my problem is attached. I need to use image editor for drawing purpose. if any suggestion appreciate. 

[Doncho]

Hi Suman,

By design the ImageEditor can load only images stored either in the application root folder or on a standard web server, loaded through URL. For example:

<telerik:RadImageEditor runat="server" ID="RadImageEditor1" ImageUrl="~/Images/image.jpg">
</telerik:RadImageEditor>

<telerik:RadImageEditor runat="server" ID="RadImageEditor2" ImageUrl="http://www.startyourbusinessmag.com/wp-content/uploads/2013/09/url-4.jpeg">
</telerik:RadImageEditor>

One possible option for inserting a local image could be to load the image as a binary string in the ImageEditor's ImageLoading event in a way, similar to the one used in this live demo: Upload and Edit Image.

Please also note that the inserted image can only be placed and moved inside the boundaries of the existing canvas with the currently edited image. You can test the inserting functionality by inserting an image from a live URL (it should be accessible from the application) in the Overview demo.

Kind regards,
Doncho
Progress Telerik

[suman]

I use some other way to achieve my goal, but its seem I stuck again. after i call script from button

 function CallImage() {
        $find("<%= RadImageEditor1.ClientID %>").fire("InsertImage");

        $find("<%= RadImageEditor1.ClientID %>").add_dialogLoaded(function (editor, args) {
            var widget = args.get_widget();
            widget._txtSrc.value = "https://images.medicinenet.com/images/featured/detail_heart4.jpg";
            widget._okBtnHandler();
            
        });

    }

  I can able to resize and set image , but when i want open tools(Circle, Line, Text) its not opening.  

did i done any mistake ? 

 

 

[Doncho]

Hi Suman,

I can see that the dialogLoaded client-side event that is wired dynamically, remains wired after the execution of the initial JavaScript logic for inserting the image. As result, the anonymous event listener will proceed to fire when loading a dialog for drawing a line or for typing a text and that could lead to unexpected behavior.

I would suggest you define a separate function for the event listener and remove the subscription to the event after the execution of the initial logic:

function CallImage() {
    var imageEditor = $find("<%= RadImageEditor1.ClientID %>");
    imageEditor.fire("InsertImage");
    imageEditor.add_dialogLoaded(onDialogLoaded);
}

function onDialogLoaded(sender, args) {
    var widget = args.get_widget();
    widget._txtSrc.value = "https://images.medicinenet.com/images/featured/detail_heart4.jpg";
    widget._okBtnHandler();
    sender.remove_dialogLoaded(onDialogLoaded);
}

Please try the suggested above and let me know if the issue remains.

Kind regards,
Doncho
Progress Telerik

[suman]

Hi, many thanks to you for supporting my issue, its worked when no update panel present but  it does not work under update panel, can you please guide me how does this work under update panel.

1. I did try inside content panel <telerik:RadScriptBlock ID="radscript1" runat="server">

<script type="text/javascript">put ur script here.</script></telerik:RadScriptBlock>

2. I also did try <radAjaxManager> 

but I saw dialog not opening when call the script.

If you also can suggest me Image saving to server side after edit  would be great for me. 

basically we never try before telerik Image editor, so I had 0 knowledge on this particular control. other controls are very much customizable and powerful. 

Thank you so much for attending my issue. 

 

 

 

 

 

[Doncho]

Hi Suman,

The reason for the experienced issue is that RadImageEditor internally uses AJAX and thus in result you get nested update panels, which is an inherently problematic scenario, check out the related Common Issues section.

To avoid this issue you will need to set the UpdateMode of the UpdatePanel to "Conditional":

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <telerik:RadImageEditor runat="server" ID="RadImageEditor1" ImageUrl="ninja-kendoka.png">
        </telerik:RadImageEditor>
    </ContentTemplate>
</asp:UpdatePanel>

As for saving the image on the server, please review the implementation in our Save Image to a Custom Location demo.

I hope this will help!

Kind regards,
Doncho
Progress Telerik