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)
usingSystem;usingSystem.Drawing;usingSystem.Drawing.Drawing2D;usingSystem.Drawing.Imaging;usingSystem.IO;usingSystem.Linq;usingSystem.Web.Security;usingTelerik.Web.UI;usingTelerik.Web.UI.ImageEditor;namespaceYourAppHere.Profile{ publicpartialclassPersonalInformation : System.Web.UI.Page { protectedvoidPage_Load(objectsender, EventArgs e) { } protectedvoidRadImageEditor1_ImageSaving(objectsender, ImageEditorSavingEventArgs args) { MembershipUser mu = Membership.GetUser(); stringpicpath = 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; } protectedvoidAsyncUpload1_FileUploaded(objectsender, 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 = newbyte[stream.Length]; stream.Read(imgData, 0, imgData.Length); MemoryStream ms = newMemoryStream(); ms.Write(imgData, 0, imgData.Length); Context.Cache.Insert(Session.SessionID + "UploadedFile", ms, null, DateTime.Now.AddMinutes(20), TimeSpan.Zero); } } protectedvoidRadImageEditor1_ImageLoading(objectsender, ImageEditorLoadingEventArgs args) { //Handle Uploaded images if(!Object.Equals(Context.Cache.Get(Session.SessionID + "UploadedFile"), null)) { using(EditableImage image = newEditableImage((MemoryStream)Context.Cache.Remove(Session.SessionID + "UploadedFile"))) { args.Image = image.Clone(); args.Cancel = true; } } } privateSystem.Drawing.Image RezizeImage(System.Drawing.Image img, intmaxWidth, intmaxHeight) { if(img.Height < maxHeight && img.Width < maxWidth) returnimg; Double xRatio = (double)img.Width / maxWidth; Double yRatio = (double)img.Height / maxHeight; Double ratio = Math.Max(xRatio, yRatio); intnnx = (int)Math.Floor(img.Width / ratio); intnny = (int)Math.Floor(img.Height / ratio); Bitmap cpy = newBitmap(nnx, nny, PixelFormat.Format32bppArgb); Graphics gr = Graphics.FromImage(cpy); gr.Clear(Color.Transparent); gr.InterpolationMode = InterpolationMode.HighQualityBicubic; gr.DrawImage(img, newRectangle(0, 0, nnx, nny), newRectangle(0, 0, img.Width, img.Height), GraphicsUnit.Pixel); gr.Dispose(); img.Dispose(); returncpy; } }}<scripttype="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> <styletype="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:RadWindowrunat="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> <divstyle="width:605px; height: 570px; overflow:hidden; padding-top:10px"> <tableclass="tbl"> <tr> <td> <telerik:RadAsyncUploadID="AsyncUpload1"runat="server"OnClientFilesUploaded="OnClientFilesUploaded"OnFileUploaded="AsyncUpload1_FileUploaded"MaxFileSize="1048576"AllowedFileExtensions="jpg"AutoAddFileInputs="false"Localization-Select="Upload"/> </td> <tdclass="tblr"> <inputtype="button"class="btn btn-default"onclick="saveChangesInImageEditor();"value="Save and Close"/> </td> </tr> </table> <asp:LabelID="Label1"Text="Size limit: 1 MB - File Types: Only jpg files allowed"runat="server"Style="font-size: 11px;"EnableViewState="false"></asp:Label> <telerik:RadImageEditorID="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:ImageEditorToolStripText="Undo"CommandName="Undo"/> <telerik:ImageEditorToolStripText="Redo"CommandName="Redo"/> <telerik:ImageEditorToolText="Reset"CommandName="Reset"/> </telerik:ImageEditorToolGroup> <telerik:ImageEditorToolGroup> <telerik:ImageEditorToolText="Crop"CommandName="Crop"IsToggleButton="true"/> <telerik:ImageEditorToolText="Resize"CommandName="Resize"IsToggleButton="true"/> <telerik:ImageEditorToolText="Zoom"CommandName="Zoom"/> <telerik:ImageEditorToolText="ZoomIn"CommandName="ZoomIn"/> <telerik:ImageEditorToolText="ZoomOut"CommandName="ZoomOut"/> </telerik:ImageEditorToolGroup> <telerik:ImageEditorToolGroup> <telerik:ImageEditorToolText="Brightness Contrast"CommandName="BrightnessContrast"IsToggleButton="true"/> <telerik:ImageEditorToolText="Greyscale"CommandName="Greyscale"/> <telerik:ImageEditorToolText="Hue Saturation"CommandName="HueSaturation"IsToggleButton="true"/> </telerik:ImageEditorToolGroup> </Tools> </telerik:RadImageEditor> </div> </ContentTemplate> </telerik:RadWindow>