Froala, Inc
It looks like you’re browsing an old version of Froala. Please go to the newer version of our docs for a more updated version.
- Back to Docs
- Install and Configure
- Image
- Server Upload
- Server Delete
- S3 Upload
- Resize
- Validation
- Image Manager
- Simple Server
- File
- Server Upload
- Server Delete
- S3 Upload
- Validation
- References
- Image
- File
- S3
.NET Image Resize
How it works
- The image gets uploaded to your server.
- When the image is stored to the disk on server side, it is also resized.
Image Upload
In the Server Upload article we explain the steps to upload image on your server. After you insert an image in the rich text editor, you can resize it, but this only changes the width and height displayed in the browser, and not the physical size of the image. That should be done on server side.
Resize Image
The WYSIWYG editor's .NET SDK comes with the possibility to resize the image when it is being stored on the disk. It is using the .NET MagickImage.Resize method, therefore all the options available for it can be used.
MagickGeometry resizeGeometry = new MagickGeometry(300, 300); resizeGeometry.IgnoreAspectRatio = true; FroalaEditor.ImageOptions options = new FroalaEditor.ImageOptions { ResizeGeometry = resizeGeometry }; object response = FroalaEditor.Image.Upload(System.Web.HttpContext.Current, fileRoute, options);
Complete Example
<script> $(function() { $('.selector').froalaEditor({ // Set the image upload URL. imageUploadURL: '/FroalaApi/UploadImageResize', imageUploadParams: { id: 'my_editor' } }) }); </script>
using System; using System.Web.Mvc; using ImageMagick; namespace demo.Controllers { public class FroalaApiController : Controller { public ActionResult UploadImageResize() { string fileRoute = "/Public/"; MagickGeometry resizeGeometry = new MagickGeometry(300, 300); resizeGeometry.IgnoreAspectRatio = true; FroalaEditor.ImageOptions options = new FroalaEditor.ImageOptions { ResizeGeometry = resizeGeometry }; try { return Json(FroalaEditor.Image.Upload(System.Web.HttpContext.Current, fileRoute, options)); } catch (Exception e) { return Json(e); } } } }