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

[Boolean] debug
- Displays console logs: true/false

Thanks

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

benwinding / quill-image-compress

readme