ImagerJs Options

How to configure standalone version of ImagerJs.

---

Configuration of Edit Mode

var editModeCss = {
     background: 'url(assets/transparent.png)',
     border: '1px dashed green'
};

Configuration of Plugins

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
      }
};

Configuration of Content Config (Loading and Saving Data)

var contentConfig = {
      saveImageData: function (imageId, imageData) {
          try {
            localStorage.setItem('image_' + imageId, imageData);
          } catch (err) {
            console.error(err);
          }
      }
};

Configuration of Quality Selector

var 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
};

Configuration of ImagerJs

var options = {
      plugins: ['Rotate', 'Crop', 'Resize', 'Toolbar', 'Save', 'Delete'],
      editModeCss: editModeCss,
      pluginsConfig: pluginsConfig,
      contentConfig: contentConfig,
      quality: quality,
      waitingCursor: waitingCursor,
      imageSizeForPerformanceWarning: 2 * 1024 * 2024, //(2 MByte)
      canvasSizeLimit: 32 * 1024 * 1024, //(32 Megapixels for Desktops)
      maxImageWidth: 2048,
      maxImageHeight: 2048,
      hideFileSelection: true
   }
};

Initialization of ImagerJs

var imager = new ImagerJs.Imager($("#imager"), options);
imager.startSelector();

• 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.
• plugins:
  • List of used plugins.
• editModeCss:
  • Css object for image edit box.
  • For example, to make background transparent like in photoshop, use this:

  editModeCss: {
     background: 'url(assets/transparent.png)'
  }
  

  • Borders of edit box border could be set, too. Try this:

  editModeCss: {
      border: '1px dashed green'
  }
  

• pluginsConfig: Array of wanted plugins. See section 'Plugins' of documentation.
• contentConfig: See documentation of 'Loading and Saving'.
• quality: See documentation of 'Quality Settings'.
• detectTouch: See documentation of 'Detecting Touch'.
• waitingCursor: Cursor that will be used for long-running operations.
  • Use Predefined CSS Cursors: 'wait'.
  • Optional property that can be set to use the cursor from the specified file.
    The URL is specified in typical CSS format: 'url(assets/custom-cursor-wait.cur), wait'
  • Note the word wait at the end: that is the name of the cursor that will be used when the specified URL is unavailable.
    The Mozilla Developer Network has more information on the CSS cursor property.
• hideFileSelection: Hide File Selection Area (Redactor Plugin Only)
  • When set to false the selection area will still be visible after selecting an image.
• imageSizeForPerformanceWarning:
  • If image is larger than provided size, an alert will be shown.
• canvasSizeLimit: This option helps avoiding bad performance while selecting and editing large images.
  • If canvas size is larger than defined value, the image will scaled down automatically.
  • Default values are 32 megapixels for desktops, and 5 megapixels for mobile devices.
  • If canvasSizeLimit is set higher than browser restrictions, large images will likely fail to load.
  • From apple communities site:
    The maximum size for a canvas element is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM.The height and width of a canvas object is 150 x 300 pixels if not specified.
• maxImageWidth and maxImageHeight: These options helps avoiding bad performance while selecting and editing large images.
  • If width or heigth of selected image is larger than configured values, the image are scaled down automatically.