Image Editor Tool

19 posts, 0 answers
  1. $uren
    $uren avatar
    20 posts
    Member since:
    Apr 2011

    Posted 29 Dec 2011 Link to this post

    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..? 
  2. Rumen
    Admin
    Rumen avatar
    14419 posts

    Posted 29 Dec 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. $uren
    $uren avatar
    20 posts
    Member since:
    Apr 2011

    Posted 02 Jan 2012 Link to this post

    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 
  4. Rumen
    Admin
    Rumen avatar
    14419 posts

    Posted 04 Jan 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  5. Fit2Page
    Fit2Page avatar
    458 posts
    Member since:
    Feb 2007

    Posted 13 Mar 2012 Link to this post

    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
  6. $uren
    $uren avatar
    20 posts
    Member since:
    Apr 2011

    Posted 13 Mar 2012 Link to this post

    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
       
  7. Rumen
    Admin
    Rumen avatar
    14419 posts

    Posted 16 Mar 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. Andrew
    Andrew avatar
    6 posts
    Member since:
    Jul 2012

    Posted 10 Jul 2012 Link to this post

    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
  9. Rumen
    Admin
    Rumen avatar
    14419 posts

    Posted 13 Jul 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  10. Shubhadeep
    Shubhadeep avatar
    7 posts
    Member since:
    Aug 2013

    Posted 22 Apr 2014 Link to this post

    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.
  11. Vessy
    Admin
    Vessy avatar
    2326 posts

    Posted 23 Apr 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  12. Shubhadeep
    Shubhadeep avatar
    7 posts
    Member since:
    Aug 2013

    Posted 23 Apr 2014 in reply to Vessy Link to this post

    Thanks for your reply. But your solution is not working for me.
  13. Vessy
    Admin
    Vessy avatar
    2326 posts

    Posted 25 Apr 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  14. Avinash
    Avinash avatar
    1 posts
    Member since:
    Aug 2020

    Posted 19 Aug 2020 in reply to $uren Link to this post

    Thank you for sharing

     

  15. Vessy
    Admin
    Vessy avatar
    2326 posts

    Posted 19 Aug 2020 Link to this post

    Hi,

    You are welcome, Avinash :)

    Regards,
    Vessy
    Progress Telerik

  16. suman
    suman avatar
    2 posts
    Member since:
    May 2020

    Posted 25 Dec 2020 Link to this post

    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. 
  17. Doncho
    Admin
    Doncho avatar
    95 posts

    Posted 30 Dec 2020 Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  18. suman
    suman avatar
    2 posts
    Member since:
    May 2020

    Posted 2 days and 15 hours ago in reply to Doncho Link to this post

    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 ? 

     

     

  19. Doncho
    Admin
    Doncho avatar
    95 posts

    Posted 8 hours ago Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top