Skip to content

Getting Started: Standalone

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

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

Adding to Site

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" href="font-awesome/4.2.0/css/font-awesome.min.css" />
        <link rel="stylesheet" href="imagerJs/imagerJs.min.css" />
    </head>
    <body>
        <script src="jQuery/jquery-1.10.1.min.js"></script>
        <script src="imagerJs/imagerJs.standalone.min.js"></script>
        <script src="imagerJs/ImagerJsLocalization.js"></script>
        <script src="imagerJsConfig.js"></script>
        <script>
            $(document).ready(function () {
                // apply german translations
                ImagerJs.translations.set(window.ImagerJsGerman);
                var addNew = function () {
                  var $i = $('<img class="imager-test" src="" style="min-width: 300px; min-height: 200px; width: 300px;">');
                  $('#imagers').append($i);
                  var imager = new ImagerJs.Imager($i, options);
                  imager.startSelector();
                  imager.on('editStart', function () {
                    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();
                  });
                };
           });
        </script>
    </body>
</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 options = {
      plugins: ['Rotate', 'Crop', 'Resize', 'Toolbar', 'Save', 'Delete'],
      editModeCss: {
      },
      pluginsConfig: pluginsConfig,
      contentConfig: {
        saveImageData: function (imageId, imageData) {
          try {
            localStorage.setItem('image_' + imageId, imageData);
          } catch (err) {
            console.error(err);
          }
      },
      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
      }
   }
};

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