quill-image-compress

Quill.js Module which compresses images that are uploaded to the editor

• Live Demo!
• Live Demo! (with script tag)

Install

yarn add quill-image-compress

Features

• Will compress image when:
  • Drag/Dropped into quill
  • Pasted into quill
  • Clicked image load button
• Handles most image formats a browser can read:
  • gif|jpeg|png|svg|webp|bmp|vnd
• Compression options more info

Quickstart

import ImageCompress from 'quill-image-compress';

Quill.register('modules/imageCompress', ImageCompress);

const quill = new Quill(editor, {
  // ...
  modules: {
    // ...
    imageCompress: {
      quality: 0.7, // default
      maxWidth: 1000, // default
      maxHeight: 1000, // default
      imageType: 'image/jpeg', // default
      debug: true, // default
      suppressErrorLogging: false, // default
    }
  }
});

Quickstart (script tag)

    <script src="https://unpkg.com/[email protected]/dist/quill.imageCompressor.min.js"></script>
    <script>
      Quill.register("modules/imageCompressor", imageCompressor);
      
      var quill = new Quill("#editor", {
        modules: {
          imageCompressor: {
            quality: 0.9,
            maxWidth: 1000, // default
            maxHeight: 1000, // default
            imageType: 'image/jpeg'
          }
        }
      });
    </script>

Options

• [Integer] maxWidth, maxHeight

  • Maximum width of images (in pixels)

• [Float] quality

  • Image quality range: 0.0 - 1.0

• [String] imageType

  • Values: 'image/jpeg' , 'image/png' ... etc

• [Array] keepImageTypes
  Preserve image type and apply quality, maxWidth, maxHeight options

  • Values: ['image/jpeg', 'image/png']

• [Array] ignoreImageTypes
  Image types contained in this array retain their original images, do not compress them.

  • Values: ['image'/jpeg', 'image/webp']

• [Boolean] debug

  • Displays console logs: true/false

Thanks

This project is based on quill-image-uploader, thanks mate!