Image Editor

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.

Top toolbar

There’s a toolbar on the top of the Image Editor, a menu which contains ’Download’, ’Upload’, ’Filter’, ’Undo’ and ’Redo’ menu items. Developers and Portal builders can configure in the Javascript plugin which menuitems they want to see in the toolbar. If you do not want to use the filters, you only have to remove it from the Image Editor’s settings.

Download

With this function you can download the modified image to your computer. If you click on them, you can choose where to download and with which name. By default, images are downloaded as png, but this can be configured in the plugin to save images with another image type (e.g. jpg).

Download

Continue Upload

With ‘Continue Upload’ you can continue the upload process with your modified image. Images will be created based on their original properties (file name, type).

Upload

Resizing

With the resize function you can set the width and height of the image. The default value of the image size can be configured in the plugin, so you can upload large images to the Image Editor and the editor will reduce the images’ width and height as you add them. This can also be set later on, using the ’Resize’ menu item. In the resize window you can type in the width and height values separately, or by activating the ’Constrain Proportion’ option, the editor can compute the appropriate sizing while preserving the aspect ratio.

Resize

Filtering

Sense/Net Image Editor allows you to customize your images with effects. You can choose effects from the ’Filter’ menu item. Some of the filters can be refined with sliders, some of them modify the image with some predefined values.

Greyscale

With the greyscale filter you can measure the intensity of black and white in your image. You can refine the intensity with a slider. While you use the slider you can check the current state of the image based on the current value of the slider. If you click on save, the filter will execute, clicking on cancel will undo your current modification and reset the image to its previous state.

Greyscale
Sepia

With the sepia filter, you can measure the intensity of color brown in your image. You can refine the intensity with a slider. While you use the slider you can check the current state of the image based on the current value of the slider. If you click on save, the filter will execute, clicking on cancel will undo your current modification and put the image back to the previous state.

Sepia
Color

In the color window you can refine the color channels’ values. You can set the intensity of color red, green and blue with the three sliders. While you use the sliders you can check the current state of the image based on the current value of the sliders. If you click on save, the filter will execute, clicking on cancel will undo your current modification and put the image back to the previous state. {{Screenshot|ImageEditorColor.png|Color}

Brightness and Contrast

In the ’Brightness and Contrast’ window you can refine the brightness and the contrast of the image. You can set the intensity of brightness and contrast with the two sliders. While you use the sliders you can check how they modify the image in real-time. If you click on save, the filter will execute, clicking on cancel will undo your current modification and put the image back to the previous state.

Brightness and Contrast
Threshold

With this effect you can threshold your image. This filter does not have a slider to refine the intension.

Threshold
Blur

With this filter you can blur your image a bit. This effect does not have a slider to define the intension.

Sharpen

With this filter you can sharpen your image a bit. This effect does not have a slider to define the intension.

Invert

With this filter you can get the invert of your image. This effect does not have a slider to define the intension.

Invert
Detect edges

With this you can run a ’Detect edges’ filter on your image. This effect does not have a slider to define the intension.

Detect edges
Emboss

With this filter every pixel of an image is replaced either by a highlight or a shadow, depending on light/dark boundaries on the original image. Low contrast areas are replaced by a gray background. The filtered image will represent the rate of color change at each location of the original image. Applying an embossing filter to an image often results in an image resembling a paper or metal embossing of the original image.

Emboss
Sobel

This filter is a type of edge detection based on image’s gradients. This effect does not have a slider to define the intension.

Sobel

Undo/Redo

You can undo or redo your image modification steps. By default ten steps and the starting image can be stored by the Image Editor, so when you add more than ten steps, the second step will be removed, and your tenth undo action will take you to the original state of your image. Number of steps can be configured in the plugin.

Draggable toolbar

There’s also a draggable toolbar in the Image Editor, which you can move/drag to every place in the editor and can also be closed, making the work with the editor more comfortable. The draggable toolbar can be docked to the left or the right side of the browser. You can dock the toolbar when you move it close to the left or the right side of the browser window.

{{{2}}}
Crop

The ’Crop’ function has three modes. When you click on the crop icon on the toolbar, a sub-toolbar will appear at the top of the page. Here you can choose the crop mode from the dropdown. While you select the crop area, you can check its width and height values at the bottom right corner of the selection.

Crop

By default unconstrained mode is chosen, which means you can select the cropping area free.

With the fixed ratio mode, you can select an area which has the same width-height ratio as it is configured in the plugin. After cropping with fixed ratio mode, the image will display the selected area with the size which was set at the configuration.

Fixed ratio mode

With custom ratio mode you can add width and height values of cropping separately. You can select an area which ratio will be based on the width and height values that you’ve set. And the cropped image will have the same width and height that you’ve set in the inputs.

Custom ratio mode
Rotation

With rotation functions you can rotate the image left or right. Every click on one of the rotation icons will rotate the image with 90 degrees in the chosen direction.

Rotation
Color picker

With the color picker you can pick a color from the image. The picked color will be displayed and stored in the color box at the bottom of the toolbar. If you want to check the picked color’s hexacode, hover your mouse over the color box.

Color box

The color box stores a color to work with (future development will enable drawing, typing text on the image, etc.). If you click on the box you can change the color by its hexacode or picking it from a color palette. By default black (#000000) color is displayed and set.

{{{2}}}

Related links