Force File name and Directory for saving

[Art Handy]

Is there a way to hide the save textbox and simply force  the image to be saved as a specific file name to a specific directory? Also,  is there a way to set a maximun height and width, and or minimum height and width?

[Rumen]

Hello Art Handy,

1) The method that you will need is saveImageOnServer(fileName, overwrite) - http://www.telerik.com/help/aspnet-ajax/radimageeditor-client-side-api.html.

imageEditor.saveImageOnServer("",true); //saves the image on the server - it either overwrites the file or keeps both files

};

You can see how to implement a custom Save button in the following forum thread: http://www.telerik.com/community/forums/aspnet-ajax/image-editor/future-development.aspx.

2) You can override the default max and min values in the Resize dialog using the following JavaScript code:

<telerik:RadImageEditor ID="RadImageEditor1" runat="server" AllowedSavingLocation="Server" OnClientCommandExecuting="modifyCommand" ImageUrl="~/Images/Vucko.jpg">
  </telerik:RadImageEditor>
<script type="text/javascript">
    function modifyCommand(imageEditor, args)
    {
        var commandName = args.get_commandName();
        if (commandName)
        {
            waitForCommand(imageEditor, commandName, function (widget)
            {
                if (commandName == "Resize")
                {
                    setTimeout(function()
                    {
                        Telerik.Web.UI.ImageEditor.Resize.prototype.get_max = function() { return 100000; }
                        Telerik.Web.UI.ImageEditor.Resize.prototype.get_min = function() { return 1000; }
                    }, 1000);
                }
            });
        }
    }

    function waitForCommand(imageEditor, commandName, callback) {
        var timer = setInterval(function () {
            var widget = imageEditor.get_currentToolWidget();
            if (widget && widget.get_name() == commandName) {
                clearInterval(timer);
                callback(widget);
            }
        }, 100);
    }
    </script>

Regards,
Rumen
the Telerik team

[Art Handy]

In looking at the saveImageOnServer(fileName, overwrite) it says: Saves the image to the server in the same directory as the original image. If the user has uploaded the image from their local PC how do I save it in a specified directory on the server?                           

[Rumen]

Hello Art,

You can use the OnImageSaving server event of RadImageEditor to copy the image in the desired location.


Greetings,
Rumen
the Telerik team

[Art Handy]

I looked in the knowledgebase but there is not information as to the format of the data to put in the OnImageSaving parameter. Can you provide me with an example as to how the url is formated? Could I use something like: OnImageSaving="~/images" or do I have to write somekind of routine?

[Art Handy]

Im a sorry to be such a pain but I still need some assistance. When I use saveImageOnServer(FileName, True) Here is the code fragment:

Public Sub OCSImageEditor_ImageSaving(sender As Object, args As ImageEditorSavingEventArgs)
    Dim FileName As String = Server.MapPath("~/DailyLifePhotos/") & Replace(txtCaption.Text, Chr(32), Chr(95)) & Chr(95) & Session("SchoolYear") & ".png"
    sender.saveImageOnServer(FileName, True)
End Sub

 I get the following error:
System.MissingMemberException was unhandled by user code
  Message=Public member 'saveImageOnServer' on type 'RadImageEditor' not found.
  Source=Microsoft.VisualBasic
  StackTrace:
       at Microsoft.VisualBasic.CompilerServices.Symbols.Container.GetMembers(String& MemberName, Boolean ReportErrors)
       at Microsoft.VisualBasic.CompilerServices.NewLateBinding.CallMethod(Container BaseReference, String MethodName, Object[] Arguments, String[] ArgumentNames, Type[] TypeArguments, Boolean[] CopyBack, BindingFlags InvocationFlags, Boolean ReportErrors, ResolutionFailure& Failure)
       at Microsoft.VisualBasic.CompilerServices.NewLateBinding.LateCall(Object Instance, Type Type, String MemberName, Object[] Arguments, String[] ArgumentNames, Type[] TypeArguments, Boolean[] CopyBack, Boolean IgnoreReturn)
       at AdminOffice_PhotoUpload.OCSImageEditor_ImageSaving(Object sender, ImageEditorSavingEventArgs args) in C:\Users\Art\Documents\Visual Studio 2010\WebSites\Oglethorpe\AdminOffice\PhotoUpload.aspx.vb:line 34
       at Telerik.Web.UI.RadImageEditor.RaiseImageSavingEvent(ImageEditorSavingEventArgs savingEventArgs, Object eventKey)
       at Telerik.Web.UI.RadImageEditor.OnImageSaving(ImageEditorSavingEventArgs savingEventArgs)
       at Telerik.Web.UI.RadImageEditor.SaveEditableImage(EditableImage editableImage, ICacheImageProvider provider, String imageName, Boolean overwrite)
       at Telerik.Web.UI.RadImageEditor.ApplyServerOperation(Dictionary`2 data)
       at Telerik.Web.UI.RadImageEditor.LoadImageCallback(Object sender, RadXmlHttpPanelEventArgs e)
  InnerException:

[Rumen]

Hello Art Handy,

The saveImageOnServer is a client-side method and you cannot call it on the server:

<telerik:RadImageEditor  id="RadImageEditor1" runat="server"
    ImageUrl="~/Images/Vucko.jpg" onimagesaving="RadImageEditor1_ImageSaving"></telerik:RadImageEditor>
<input type="button" onclick="saveChangesInImageEditor();" value="Save Image Changes" />
<script type="text/javascript">
    function saveChangesInImageEditor() {
        var imEditor = $find("<%= RadImageEditor1.ClientID %>");
        imEditor.saveImageOnServer("", true);
    }
</script>

http://www.telerik.com/help/aspnet-ajax/radimageeditor-client-side-api.html.


If you want to save the modified image in another location see this forum thread:
http://www.telerik.com/community/forums/aspnet-ajax/image-editor/saveeditableimage.aspx

All the best,
Rumen
the Telerik team

[Guss]

Hi

So here is what I do:

• User click on their existing picture or blank pic placeholder
• I launch image editor in radwindow
• Now they can edit their pic, or upload a new and edit it.
• I on purpose left the save button from the toolbar, and added my own button that call RadImageEditor1_ImageSaving
• I only allow jpegs an also optimize and resize the image (I have 2000+ memners on the site and can;t afford each of them having a 1 - 2mb profile pic (you know regular non IT people, they just upload from their camera 12Mpixel photos)

(Still have to add the closing of the window, and default / existing image in the markup... and some other obvious parts not shown)

 

using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.IO;
using System.Linq;
using System.Web.Security;
using Telerik.Web.UI;
using Telerik.Web.UI.ImageEditor;

namespace YourAppHere.Profile
{
    public partial class PersonalInformation : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }

        protected void RadImageEditor1_ImageSaving(object sender, ImageEditorSavingEventArgs args)
        {
            MembershipUser mu = Membership.GetUser();
            string picpath = String.Format("~/Profile/Pictures/{0}.jpg", mu.UserName);
            Image optimizedimage = RezizeImage(args.Image.Image, 320, 320);
            optimizedimage.Save(MapPath(picpath), System.Drawing.Imaging.ImageFormat.Jpeg);
            args.Cancel = true;
        }

        protected void AsyncUpload1_FileUploaded(object sender, FileUploadedEventArgs e)
        {
            //Clear changes and remove uploaded image from Cache
            RadImageEditor1.ResetChanges();
            Context.Cache.Remove(Session.SessionID + "UploadedFile");
            using (Stream stream = e.File.InputStream)
            {
                byte[] imgData = new byte[stream.Length];
                stream.Read(imgData, 0, imgData.Length);
                MemoryStream ms = new MemoryStream();
                ms.Write(imgData, 0, imgData.Length);

                Context.Cache.Insert(Session.SessionID + "UploadedFile", ms, null, DateTime.Now.AddMinutes(20), TimeSpan.Zero);
            }
        }

        protected void RadImageEditor1_ImageLoading(object sender, ImageEditorLoadingEventArgs args)
        {
            //Handle Uploaded images
            if (!Object.Equals(Context.Cache.Get(Session.SessionID + "UploadedFile"), null))
            {
                using (EditableImage image = new EditableImage((MemoryStream)Context.Cache.Remove(Session.SessionID + "UploadedFile")))
                {
                    args.Image = image.Clone();
                    args.Cancel = true;
                }
            }
        }

        private System.Drawing.Image RezizeImage(System.Drawing.Image img, int maxWidth, int maxHeight)
        {
            if (img.Height < maxHeight && img.Width < maxWidth)
                return img;
            Double xRatio = (double)img.Width / maxWidth;
            Double yRatio = (double)img.Height / maxHeight;
            Double ratio = Math.Max(xRatio, yRatio);
            int nnx = (int)Math.Floor(img.Width / ratio);
            int nny = (int)Math.Floor(img.Height / ratio);
            Bitmap cpy = new Bitmap(nnx, nny, PixelFormat.Format32bppArgb);
            Graphics gr = Graphics.FromImage(cpy);
            gr.Clear(Color.Transparent);
            gr.InterpolationMode = InterpolationMode.HighQualityBicubic;
            gr.DrawImage(img,
                new Rectangle(0, 0, nnx, nny),
                new Rectangle(0, 0, img.Width, img.Height),
                GraphicsUnit.Pixel);
            gr.Dispose();
            img.Dispose();
            return cpy;
        }
    }
}

<script type="text/javascript">
      (function (global, undefined) {
          var demo = {};

          function OnClientFilesUploaded(sender, args) {
              $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest();
          }

          function serverID(name, id) {
              demo[name] = id;
          }

          global.serverID = serverID;
          global.OnClientFilesUploaded = OnClientFilesUploaded;
      })(window);

      function editProfilerPic() {
          var oWnd = $find("<%=RadWindow_ProfilePic.ClientID %>");
          oWnd.Show();
      }

      function saveChangesInImageEditor() {
          var imEditor = $find("<%= RadImageEditor1.ClientID %>");
          imEditor.saveImageOnServer("xxxxxx.jpg", true);
      }
  </script>


 <style type="text/css">
      .rieDialogs { z-index: 10000; }
      .rwWindowContent>div {overflow:hidden !important;}
      .RadImageEditor_Bootstrap {outline:none !important}
      .RadToolBar_Bootstrap_Horizontal {margin-right:10px !important;}
      table.tbl {width:100%; border-collapse:collapse; border:none; }
      table.tbl td {padding:0px; }
      table.tbl td.tblr {padding-right:5px; text-align:right;}
      input[type=button] {outline:none !important;}
  </style>


<telerik:RadWindow runat="server" ID="RadWindow_ProfilePic" Title="Profile Image Editor" ShowContentDuringLoad="false" Modal="true" Overlay="True"  Width="622px" Height="622px"  VisibleStatusbar="False" Behaviors="Close" Animation="Fade">
      <ContentTemplate>
          <div style="width:605px; height: 570px; overflow:hidden; padding-top:10px">
              <table class="tbl">
                  <tr>
                      <td>
                          <telerik:RadAsyncUpload ID="AsyncUpload1" runat="server" OnClientFilesUploaded="OnClientFilesUploaded" OnFileUploaded="AsyncUpload1_FileUploaded" MaxFileSize="1048576" AllowedFileExtensions="jpg" AutoAddFileInputs="false" Localization-Select="Upload"/>
                      </td>
                      <td class="tblr">
                          <input type="button" class="btn btn-default" onclick="saveChangesInImageEditor();" value="Save and Close"/>
                      </td>
                  </tr>
              </table>
              <asp:Label ID="Label1" Text="Size limit: 1 MB - File Types: Only jpg files allowed" runat="server" Style="font-size: 11px;" EnableViewState="false"></asp:Label>
              <telerik:RadImageEditor ID="RadImageEditor1" runat="server" Width="578" Height="485" ImageUrl="~/Profile/Pictures/test.jpg" OnImageLoading="RadImageEditor1_ImageLoading"  EnableResize="False" ShowAjaxLoadingPanel="True" UndoLimit="5" ToolBarPosition="Top" onimagesaving="RadImageEditor1_ImageSaving">
                  <Tools>
                      <telerik:ImageEditorToolGroup>
                          <telerik:ImageEditorToolStrip Text="Undo" CommandName="Undo"/>
                          <telerik:ImageEditorToolStrip Text="Redo" CommandName="Redo"/>
                          <telerik:ImageEditorTool Text="Reset" CommandName="Reset"/>
                      </telerik:ImageEditorToolGroup>
                      <telerik:ImageEditorToolGroup>
                          <telerik:ImageEditorTool Text="Crop" CommandName="Crop" IsToggleButton="true"/>
                          <telerik:ImageEditorTool Text="Resize" CommandName="Resize" IsToggleButton="true"/>
                          <telerik:ImageEditorTool Text="Zoom" CommandName="Zoom"/>
                          <telerik:ImageEditorTool Text="ZoomIn" CommandName="ZoomIn"/>
                          <telerik:ImageEditorTool Text="ZoomOut" CommandName="ZoomOut"/>
                      </telerik:ImageEditorToolGroup>
                      <telerik:ImageEditorToolGroup>
                          <telerik:ImageEditorTool Text="Brightness Contrast" CommandName="BrightnessContrast" IsToggleButton="true"/>
                          <telerik:ImageEditorTool Text="Greyscale" CommandName="Greyscale"/>
                          <telerik:ImageEditorTool Text="Hue Saturation" CommandName="HueSaturation" IsToggleButton="true"/>
                      </telerik:ImageEditorToolGroup>
                  </Tools>
              </telerik:RadImageEditor>
          </div>
      </ContentTemplate>
  </telerik:RadWindow>

[Guss]

I see there is not needed lines above..... the proportional resize and optimize code was copy-pasted from another project where I worked with transparent png, and now I just allow jpg, so lines like  gr.Clear(Color.Transparent); can obviously be removed as I work with jpg here.

 But, its very effective, high quality compression (non of any test photos ever greater than 12Kb) using only NET.

Personally, I think telerik supprot staff and the examples can be better example.... What the use of showing a sample event on image saving with code like   alert('the swave button was clicked').....  alert('the image was resized')

 Second, whats an image editor without compression options !!! Telerik, the image editor in not version 1 anymore, and adding buld in compression is surley not difficult.

[Vessy]

Hi Guss,

Thank you for sharing your solution with our community and for the given feedback.

We are trying to implement both simple and complicated examples, so they can be useful for bigger range of clients - from the ones that have just been introduced to the controls to the ones that are already in the process of implementing a real-life applications (e.g., how to upload an image or to save it to a custom location). Yet the most complex scenarios provided by us, including controls integration, can be found in our Sample applications and the Code library section of our side.

The latter is also the place where each user can upload a developed by himself custom scenario as, unfortunately, we cannot cover all kind of controls integrations in our demos. Furthermore, if you decide to upload your solution to the ImageEditor's Code Libraries and you will be granted with the corresponding amount of Telerik points.

As for the image compression functionality - I cannot help but agree that this would be a great feature for the ImageEditor. I have submitted your suggestion as a feature request into our Feedback portal and you can follow and vote the item here: feedback item. I have also updated you Telerik points as a small sign of gratitude for your involvement.

Regards,
Vessy
Telerik