quill-image-compress
v2.0.3
Published
A Quill rich text editor Module which compresses images uploaded to the editor
Downloads
46,294
Maintainers
Readme
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/[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] 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); }); }
- Example function, uploading to a webserver:
[Boolean] debug
- Displays console logs: true/false
Thanks
This project is based on quill-image-uploader, thanks mate!