Quill.js Module which compresses images that are uploaded to the editor
yarn add quill-image-compress
- 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: ❗you don't need quill-image-drop-module, it's included in this package:exclamation:
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
}
}
}); <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>-
[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
This project is based on quill-image-uploader, thanks mate!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent