Process images

The KTML Image Editor window pops-up in the following three situations:

  1. While having an image selected in the editor editable region, you click the Edit Image option in the right-click contextual menu:


                        

  2. While having an image selected in the files area of the Remote File Explorer window, you click the Edit Image option in the right-click contextual menu:


                        

  3. While having an image selected in the files area of the Remote File Explorer window, you click the Edit Image button in the Remote File Explorer window:

 

The KTML Image Editor window looks like the user interface below:

 

The operations that you can perform to edit an image are accessible through the buttons on the left:
 

  • Crop/Resize
          

  • Rotate Left/Right
          

  • Flip Vertically/Horizontally
          

  • Blur/Sharpen
          

  • Increase/Decrease Contrast
          

  • Increase/Decrease Brightness
          

  • Compress Image
          

  • Zoom In/Out
          

  • Reset Zoom
          

  • Reset

 

Note: Except for the zooming commands, when altering an image through any of the other ones, the changes will take place server-side (the image on the server will be modified).

 

In the lower part of the interface, you are offered some information about the current image (path, name, dimensions, size):

 

To learn how to use each control in the Image Editor window, read the instructions below:

  1. When clicking the Crop button, a 100 pixels/100 pixels square is displayed on top of your picture:


                        
    You can change its position by dragging it around, and its dimensions by using either its handlers, or the Width and Height text boxes that show in the lower part of the interface:


                        

  2. When clicking the Resize button, two text boxes (Width and Height) will show in the lower part of the interface, displaying the image dimensions (in pixels):


                        

  3. Click the Rotate Left button if you want to rotate the current image to the left:


                        
    Note:
    The operation was applied when the image was in the status displayed here. This same observation remains available for the next examples (steps 4 - 15).

  4. Click the Rotate Right button if you want to rotate the current image to the right:


                        

  5. Click the Flip Vertically button to flip the image with 180 degrees vertically (the new image shown will be the old one seen in a horizontal mirror):


                       

  6. Click the Flip Horizontally button to flip the image with 180 degrees horizontally (the new image shown will be the old one seen in a vertical mirror):


                      

  7. Click the Blur button to give the current image a blurry effect:


                      

  8. Click the Sharpen button to give the current image a sharp effect:


                      

  9. Click the Increase Contrast button to secure more contrast in the current image:


                      
    Note:
    To obtain the image above, the Increase Contrast button was pressed twice (to make the effect clearer).

  10. Click the Decrease Contrast button to secure less contrast in the current image:


                      
    Note:
    To obtain the image above, the Decrease Contrast button was pressed twice (to make the effect clearer).

  11. Click the Increase Brightness button to secure more brightness in the current image:


                      

  12. Click the Decrease Brightness button to secure less brightness in the current image:


                      

  13. Click the Compress Image button to modify the image quality in order for its size (in kb) to decrease. You will notice in the lower part of the interface the Quality text box, where you can enter a number between 1 and 99. This number represents how many percents from the initial quality you want the quality of the modified image to be:


                      

  14. Click the Zoom In button to enlarge the image proportionally. Each click will increase the image a little more. This operation is used when you need to see certain image details up close:


                      
    Note:
    To obtain the image above, the Zoom In button was pressed four times.

  15. Click the Zoom Out button to diminish the image proportionally. Each click will decrease the image a little more:


                      
    Note:
    To obtain the image above, the Zoom Out button was pressed four times.

  16. The Reset Zoom button becomes active only after you clicked the Zoom In and Zoom Out buttons for an unequal number of times (the image size is no longer the initial one). Once you click the Reset Zoom button, the image will be brought to its original size.

  17. The Reset button is not active when you first launch the KTML Image Editor. It becomes active after you perform at least one operation on the image. By clicking it, all the operations that you just performed on the image will be canceled, and the image will be displayed in its initial state.

  18. The Help button on the top-right corner of the interface has the same role as described here, just that it regards the KTML Image Editor interface.

  19. The OK button changes its label to Finish after you perform the first operation on the image.

  20. By clicking the Close button, the KTML Image Editor window will close and no change will be performed on the current image.