Image Editor for Developers

From Sense/Net Wiki
Jump to: navigation, search
  •  
  •  
  •  
  •  
  • 100%
  • 6.3.1
  • Enterprise
  • Community
  • Planned

Overview

Image Editor
Sense/Net Image Editor helps users to edit images in the browser without having to install any software or plugin. Users are allowed to use almost all the important photo editing tasks which are well-known from Photoshop and other image editor software.

Details

Sense/Net Image Editor helps you to edit your images in the browser before you upload them into the portal. You do not have to install any other software or browser plugin as it is a javascript plugin which is a part of Sense/Net and works in the browser. With Sene/Net Image Editor you can crop, rotate or edit your images with some of the well-known filters like greyscale, sepia, sobel or emboss. Sense/Net Image Editor takes advantage of HTML5 and JavaScript: you can put your chosen image to an HTML5 canvas to work with it. This also implies that the you will only be able to access the fully features Image Editor in modern browsers (Chrome, Firefox, Internet Explorer 10+ and Opera). In other browser versions the Image Editor is replaced by the former Sense/Net file upload mechanism.

Getting started

You can use the Image Editor with Sense/Net’s upload control. So you have to create a copy of the UploadControl.ascx and modify it to work as an Image Editor. Add an HTML element to the view and bind the Image Editor to it.

<div id="imageEditor"></div>

Initialize the Image Editor via a jQuery selector:

$('#imageEditor').imageEditor({
      uploadArea: $('.sn-upload-area'),
      menuitems: ['download', 'upload','resize', 'filter', 'undo', 'redo'],
      command: ['crop', 'rotate-left', 'rotate-right', 'color-picker', 'forecolor'],
      cropRatioX: 150,
      cropRatioY: 80,
      maxStepCount: 10,
      maxImageWidth: 1024,
      maxImageHeight: 768,
      uploadFunction: customUpload
}).data("snImageEditor");

Configuring the Image Editor plugin

Functionality of the Image Editor is highly customizable. All these properties are optionally customizable, so you can either leave them empty or just leave them out of the configuration.

uploadArea Object (default: $('.sn-upload-area'))

Sets the upload area of the Image Editor where the images can be dropped.

menuitems Array (default: null)

Sets which menuitems will shown in the top toolbar of the Image Editor. Download, upload, resize, filter, undo and redo can be add as a menuitem. With download the user will be able to save the modified image to her computer. With upload the user can save the image to a predefined folder in the portal. With resize the user will be able to resize the document, with the filters the image can be modified with some effects and with the undo/redo function you can step backward or forward between the image modification steps.

command Array (default: null)

Sets which menuitems will shown in the draggable toolbar of the Image Editor. Crop, rotate-left, rotate-right, color-picker and forecolor can be set as menuitems. Crop enables the crop functionality, rotate-left and rotate-right enable the rotating functionality. With color-picker you can enable the color-picker and with forecolor you can show the currently picked color on the toolbar.

cropRatioX Number (default: null)

There’s a fixed ratio crop functionality in the Image Editor and with this property you can set the fixed crop areas width value.

cropRatioY Number (default: null)

There’s a fixed ratio crop functionality in the Image Editor and with this property you can set the fixed crop areas height value.

maxStepCount Number (default: 10)

Number of steps which will be stored during the image modification.

maxImageWidth Number (default: 1024)

Maximum width of the image that can be made with the Image Editor. If the added image is originally bigger, it’s width will be reduced at the first step to the given value.

maxImageHeight Number (default: 768)

Maximum height of the image that can be made with the Image Editor. If the added image is originally bigger, it’s height will be reduced at the first step to the given value.

uploadFunction function (default: null)

You can add a function which will handle the image after the modification. This function will be called, when the user click on the 'Continue Upload' menu item. Your function get the modified image (blob object) and the original image properties (file name, file type, extension) from the plugin so you can use the modified image after the modification, display it on an upload file list as a thumbnail, or upload it to the portal with a custom upload method.

Related links