View source for Image Editor for Developers

[[Category:End users]]
[[Category:Portal builders]]
[[Category:Developers]]
[[Category:System operators]]
{{FeatureInfo|editions=wcm,ecm,comm|fromversion=6.3.1|wikicomplete=100%|interest=builder,developer}}

{{SNTOC}}

==Overview==
{{LeadImage|ImageEditor.png|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. 
{{clear}}

==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 action|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.

<source lang="xml">
<div id="imageEditor"></div>
</source>

Initialize the Image Editor  via a jQuery selector:

<source lang="javascript">
$('#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");

</source>

==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.

<div><span style="font-size: 16px;font-weight: bold;">uploadArea</span><span style="font-size: 16px;color:#008cd1">  Object</span><span style="font-size: 16px;font-style: italic;color: #555">  (default: $('.sn-upload-area'))</span></div>
Sets the upload area of the Image Editor where the images can be dropped.

<div><span style="font-size: 16px;font-weight: bold;">menuitems</span><span style="font-size: 16px;color:#008cd1">  Array</span><span style="font-size: 16px;font-style: italic;color: #555">  (default: null)</span></div>
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. 

<div><span style="font-size: 16px;font-weight: bold;">command</span><span style="font-size: 16px;color:#008cd1">  Array</span><span style="font-size: 16px;font-style: italic;color: #555">  (default: null)</span></div>
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.

<div><span style="font-size: 16px;font-weight: bold;">cropRatioX</span><span style="font-size: 16px;color:#008cd1">  Number</span><span style="font-size: 16px;font-style: italic;color: #555">  (default: null)</span></div>
There’s a fixed ratio crop functionality in the Image Editor and with this property you can set the fixed crop areas width value.

<div><span style="font-size: 16px;font-weight: bold;">cropRatioY</span><span style="font-size: 16px;color:#008cd1">  Number</span><span style="font-size: 16px;font-style: italic;color: #555">  (default: null)</span></div>
There’s a fixed ratio crop functionality in the Image Editor and with this property you can set the fixed crop areas height value.

<div><span style="font-size: 16px;font-weight: bold;">maxStepCount</span><span style="font-size: 16px;color:#008cd1">  Number</span><span style="font-size: 16px;font-style: italic;color: #555">  (default: 10)</span></div>
Number of steps which will be stored during the image modification.

<div><span style="font-size: 16px;font-weight: bold;">maxImageWidth</span><span style="font-size: 16px;color:#008cd1">  Number</span><span style="font-size: 16px;font-style: italic;color: #555">  (default: 1024)</span></div>
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.

<div><span style="font-size: 16px;font-weight: bold;">maxImageHeight</span><span style="font-size: 16px;color:#008cd1">  Number</span><span style="font-size: 16px;font-style: italic;color: #555">  (default: 768)</span></div>
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.

<div><span style="font-size: 16px;font-weight: bold;">uploadFunction</span><span style="font-size: 16px;color:#008cd1">  function</span><span style="font-size: 16px;font-style: italic;color: #555">  (default: null)</span></div>
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=
*[[Image Editor]]
*[[Upload action]]
*[[Smart Application Model]]
*[[Built-in OData actions#Upload action|Built-in Upload action]]
*[[Chunk save API]]