quill-image-compress v1.2.32
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
insertIntoEditor: undefined, // default
}
}
});
Quickstart (script tag)
<script src="https://unpkg.com/quill-image-compress@1.2.11/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'
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!
3 months ago
3 months ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago