9 Answers, 1 is accepted
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
You can use the OnImageSaving server event of RadImageEditor to copy the image in the desired location.
Greetings,
Rumen
the Telerik team
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
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:
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
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
>
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.
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
See What's Next in App Development. Register for TelerikNEXT.