Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/benwinding/quill-image-compress
A Quill rich text editor Module which compresses images uploaded to the editor
https://github.com/benwinding/quill-image-compress
compresses-images quill
Last synced: about 2 months ago
JSON representation
A Quill rich text editor Module which compresses images uploaded to the editor
- Host: GitHub
- URL: https://github.com/benwinding/quill-image-compress
- Owner: benwinding
- License: mit
- Created: 2019-05-15T06:43:36.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-07-18T09:03:25.000Z (2 months ago)
- Last Synced: 2024-07-19T05:55:10.141Z (2 months ago)
- Topics: compresses-images, quill
- Language: TypeScript
- Homepage: https://benwinding.github.io/quill-image-compress/src/demo.html
- Size: 16 MB
- Stars: 117
- Watchers: 5
- Forks: 28
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-quill - quill-image-compress - A module to compress images before adding them to the editor. (Uncategorized / Uncategorized)
README
# quill-image-compress
[](https://www.npmjs.com/package/quill-image-compress)
[](https://github.com/benwinding/quill-image-compress/blob/master/LICENSE)
[](https://www.npmjs.com/package/quill-image-compress)
[](https://github.com/benwinding/quill-image-compress)
Quill.js Module which compresses images that are uploaded to the editor
- [Live Demo!](https://benwinding.github.io/quill-image-compress/src/demo.html)
- [Live Demo! (with script tag)](https://benwinding.github.io/quill-image-compress/src/demo-script-tag.html)
## 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](#options)
- 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
``` js
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)
``` html
Quill.register("modules/imageCompressor", imageCompressor);
var quill = new Quill("#editor", {
modules: {
imageCompressor: {
quality: 0.9,
maxWidth: 1000, // default
maxHeight: 1000, // default
imageType: 'image/jpeg'
}
}
});
```
## 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:
```js
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](https://github.com/NoelOConnell/quill-image-uploader), thanks mate!