Skip to content

Getting Started: Standalone

Jump to bottom
Srdjan Djenader edited this page Dec 30, 2017 · 5 revisions

A simple example of using ImagerJs as a standalone component on a website.

Adding to Site

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>ImagerJs - Standalone</title>
    <script src="jQuery/jquery-1.10.1.min.js"></script>
    <script src="imagerJs/imagerJsLocalization.js"></script>
    <script src="imagerJs/imagerJs.min.js"></script>
    <script src="imagerJsConfig.js"></script>

    <link href="imagerJs/imagerJs.min.css" rel="stylesheet">
    <link rel="stylesheet" href="fonts/font-awesome/font-awesome.min.css">

    <style>
        #imagers {
            margin-top: 50px;
            margin-left: 50px;
        }
    </style>
</head>
<body>
    <div id="imagers">

    </div>
  <script>
      $(document).ready(function(){
        var addNew = function () {
        var $imageContainer = $(
            '<div class="image-container">' +
            '  <img class="imager-test" ' +
            '       src="" ' +
            '       style="min-width: 300px; min-height: 200px; width: 300px;">' +
            '</div>');

            $('#imagers').append($imageContainer);
            var imager = new ImagerJs.Imager($imageContainer.find('img'), options);
            imager.startSelector();

            imager.on('editStart', function () {
                // fix image dimensions so that it could be properly placed on the grid
                imager.$imageElement.css({
                minWidth: 'auto',
                minHeight: 'auto'
                });
                var qualitySelector = new window.ImagerQualitySelector(imager, options.quality);

                var qualityContainer = $('<div class="imager-quality-standalone"></div>');
                qualityContainer.append(qualitySelector.getElement());

                imager.$editContainer.append(qualityContainer);

                qualitySelector.show();
                qualitySelector.update();
            });
        };
        window.onload = addNew();
    });
  </script>
</body>
</html>

root
|
+--bootstrap
|  |
|  +--bootstrap.min.js
|  |
+--fonts
|  |
|  +--font-awesome/font-awesome.min.css
|  +--fonts/fontawesome-webfont.woff
|  |
+--imagerJs
|  |
|  +--assets
|  |  |
|  |  +--border.gif
|  |  +--cursor-fa-rotate-right.cur
|  |  +--transparent.png
|  |  
|  +--imagerJs.min.css
|  +--imagerJs.min.js
|  +--ImagerJsLocalization.js
|
+--jQuery
|  |
|  +--jquery.min.js
|
+--imagerJsConfig
+--index.html

Script: imagerJsConfig.js

var pluginsConfig = {
      Crop: {
        controlsCss: {
          width: '15px',
          height: '15px',
          background: 'white',
          border: '1px solid black'
        },
        controlsTouchCss: {
          width: '25px',
          height: '25px',
          background: 'white',
          border: '2px solid black'
        }
      },
      Rotate: {
        controlsCss: {
          width: '15px',
          height: '15px',
          background: 'white',
          border: '1px solid black'
        },
        controlsTouchCss: {
          width: '25px',
          height: '25px',
          background: 'white',
          border: '2px solid black'
        }
      },
      Resize: {
        controlsCss: {
          width: '15px',
          height: '15px',
          background: 'white',
          border: '1px solid black'
        },
        controlsTouchCss: {
          width: '25px',
          height: '25px',
          background: 'white',
          border: '2px solid black'
        }
      }
    };
      
var pluginsConfig = {
  Rotate: {
    controlsCss: {
      width: '15px',
      height: '15px',
      background: 'white',
      border: '1px solid black'
    },
    controlsTouchCss: {
      width: '25px',
      height: '25px',
      background: 'white',
      border: '2px solid black'
    }
  },
  Resize: {
    controlsCss: {
      width: '15px',
      height: '15px',
      background: 'white',
      border: '1px solid black'
    },
    controlsTouchCss: {
      width: '25px',
      height: '25px',
      background: 'white',
      border: '2px solid black'
    }
  },
  Crop: {
    controlsCss: {
      width: '15px',
      height: '15px',
      background: 'white',
      border: '1px solid black'
    },
    controlsTouchCss: {
      width: '25px',
      height: '25px',
      background: 'white',
      border: '2px solid black'
    }
  },
  Toolbar: {
    toolbarSize: 85,
    toolbarSizeTouch: 43,
    tooltipEnabled: true,
    tooltipCss: {
      color: 'white',
      background: 'black'
    }
  },
  Delete: {
    fullRemove: true
  }
};

var options = {
  plugins: [
    'Rotate',
    'Crop',
    'Resize',
    //'Save',
    'Toolbar',
    'Delete',
    'Undo'
  ],
  editModeCss: {
  },
  pluginsConfig: pluginsConfig,
  quality: {
    sizes: [
      { label: 'Original', scale: 1, quality: 1, percentage: 100 },
      { label: 'Large', scale: 0.5, quality: 0.5, percentage: 50 },
      { label: 'Medium', scale: 0.2, quality: 0.2, percentage: 20 },
      { label: 'Small', scale: 0.05, quality: 0.05, percentage: 5 }
    ],
    allowCustomSetting: true
  },
  contentConfig: {
    saveImageData: function (imageId, imageData) {
      try {
        console.log('Save button clicked! ImageId:', imageId);
        console.log('ImageData argument here is the image encoded in base64 string. ' +
          'This function gets called anytime user clicks on `save` button. ' +
          'If one wants to disable edit after saving, check the `standalone-remote-upload.html` ' +
          'example file which shows how to upload image on the server ' +
          'and display it in place of ImagerJs after that.');
        localStorage.setItem('image_' + imageId, imageData);
      } catch (err) {
        console.error(err);
      }
    }
  }
};

Script: ImagerJsLocalization.js

window.ImagerJsGerman = {
  'Incorret file type': 'Unzulässiger Dateityp',
  'Insert': 'Einfügen',
  'Cancel': 'Abbrechen',
  'Add image': 'Bild hinzufügen',
  'Quality': 'Qualität',
  'Rotate': 'Rotieren',
  'Crop': 'Zuschneiden',
  'Original': 'Original',
  'KB': 'KB',
  'Large': 'Groß',
  'Medium': 'Mittel',
  'Small': 'Klein',
  'Custom quality percent': 'Eigene Qualitätseinstellung',
  'Custom': 'Eigene Einstellung',
  'Image properties': 'Bild Eigenschaften',
  'Size:': 'Größe:',
  'width in px': 'Breite in px',
  'height in px': 'Höhe in px',
  'Left': 'Links',
  'Right': 'Rechts',
  'Center': 'Zentriert',
  'Inline': 'Inline',
  'Floating': 'Floating',
  'Transparent background': 'Transparenter Hintergrund',
  'Apply': 'Anwenden',
  'Reject': 'Widerrufen',
  'Delete image': 'Bild löschen',
  'Move image': 'Bild verschieben',
  'Are you sure want to delete this image?': 'Sicher, dass Sie das Bild löschen möchten?',
  'Or drop files here': 'Oder Datei hierher ziehen und loslassen',
  'No file selected.': 'Keine Datei ausgewählt.',
  'Please wait...': 'Bitte warten...',
  'Save': 'Speichern',
  'Undo': 'Rückgängig',
  'Rotate manually': 'Manuell drehen',
  'Rotate 90 left': '90 Grad nach links drehen',
  'Rotate 90 right': '90 Grad nach rechts drehen',
  'Image is too big and could cause very poor performance.': 'Image is too big and could cause very poor performance.'
};
  • Initialization of ImagerJs: new ImagerJs.Imager(element, options)
    • Parameters:
      • element:
        • Type: Object
        • DOM element where to add Imager.
      • options:
        • Type: Object
        • Object with configuration parameters.

Getting Started

Plugins

Advanced Configuration

Redactor Plugin Specific

DEMO

Clone this wiki locally