Quill-image-compress NPM

quill-image-compress

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

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
Add multiple images in one drag/paste

NOTE: :exclamation: you don't need quill-image-drop-module, it's included in this package :exclamation:

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
      handleOnPaste: true, //default 
      insertIntoEditor: undefined, // default
    }
  }
});

Quickstart (script tag)

    <script src="https://cdn.jsdelivr.net/npm/quill-image-compress@2.0/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 handleOnPaste
- Compress image on paste, the default behaviour. Set to false to disable processing pasted images.

Function insertIntoEditor Custom function to handle inserting the image. If you wanted to upload the image to a webserver rather than embedding with Base64, you could use this function.

Example function, uploading to a webserver:

insertIntoEditor: (imageBase64URL, imageBlob, editor) => {    
  const formData = new FormData();
  formData.append("file", imageBlob);

  fetch("/upload", {method: "POST", body: formData})
    .then(response => response.text())
    .then(result => {
      const range = editor.getSelection();
      editor.insertEmbed(range.index, "image", `${result}`, "user");
    })
    .catch(error => {
      console.error(error);
    });
}