npmpackage.info

Gathering detailed insights and metrics for quill-image-compress

Other packages similar to quill-image-compress

ngx-quill

27.0.0

Angular components for the easy use of the QuillJS richt text editor.

quill-image-drop-and-paste

2.0.1

A quill editor module for drop and paste image, with a callback hook before insert image into the editor

lhy-quill-image-compress

1.2.5

A Quill rich text editor Module which compresses images uploaded to the editor

quill-image-uploader

1.3.0

A module for Quill rich text editor to allow images to be uploaded to a server instead of being base64 encoded

Gathering detailed insights and metrics for quill-image-compress

quill-image-compress

A Quill rich text editor Module which compresses images uploaded to the editor

2.0.3

123

MIT

TypeScript

914,152 3.6

Installations

npm install quill-image-compress

Pull Requests

Open

2

Total

19

Closed

1

Merged

16

Issues

Open

8

Total

35

Closed

27

Releases

Unable to fetch releases

Developer

benwinding

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

Yes

Node Version

18.20.4

NPM Version

10.7.0 Statistics

123 Stars

93 Commits

30 Forks

5 Watching

4 Branches

8 Contributors

Updated on 18 Oct 2024

Languages

TypeScript (67.07%)

HTML (25.41%)

JavaScript (7.53%)

Total Downloads

Cumulative downloads

Total Downloads

914,152

Last day

-8.8%

1,976

Compared to previous day

Last week

-1.5%

10,659

Compared to previous week

Last month

1.1%

46,413

Compared to previous month

Last year

104.6%

435,339

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

quill

Dev Dependencies

quill ts-loader typescript webpack webpack-cli webpack-dev-server

Versions

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

1import ImageCompress from 'quill-image-compress';
2
3Quill.register('modules/imageCompress', ImageCompress);
4
5const quill = new Quill(editor, {
6  // ...
7  modules: {
8    // ...
9    imageCompress: {
10      quality: 0.7, // default
11      maxWidth: 1000, // default
12      maxHeight: 1000, // default
13      imageType: 'image/jpeg', // default
14      debug: true, // default
15      suppressErrorLogging: false, // default
16      handleOnPaste: true, //default 
17      insertIntoEditor: undefined, // default
18    }
19  }
20});
21

Quickstart (script tag)

1    <script src="https://cdn.jsdelivr.net/npm/quill-image-compress@2.0/dist/quill.imageCompressor.min.js"></script>
2    <script>
3      Quill.register("modules/imageCompressor", imageCompressor);
4      
5      var quill = new Quill("#editor", {
6        modules: {
7          imageCompressor: {
8            quality: 0.9,
9            maxWidth: 1000, // default
10            maxHeight: 1000, // default
11            imageType: 'image/jpeg'
12          }
13        }
14      });
15    </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:

1insertIntoEditor: (imageBase64URL, imageBlob, editor) => {    
2  const formData = new FormData();
3  formData.append("file", imageBlob);
4
5  fetch("/upload", {method: "POST", body: formData})
6    .then(response => response.text())
7    .then(result => {
8      const range = editor.getSelection();
9      editor.insertEmbed(range.index, "image", `${result}`, "user");
10    })
11    .catch(error => {
12      console.error(error);
13    });
14}

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

Thanks

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

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

License

Determines if the project has defined a license.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/push.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/benwinding/quill-image-compress/push.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/push.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/benwinding/quill-image-compress/push.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/push.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/benwinding/quill-image-compress/push.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/push.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/benwinding/quill-image-compress/push.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/push.yml:39: update your workflow using https://app.stepsecurity.io/secureworkflow/benwinding/quill-image-compress/push.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/push.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/benwinding/quill-image-compress/push.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/push.yml:46: update your workflow using https://app.stepsecurity.io/secureworkflow/benwinding/quill-image-compress/push.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/push.yml:57: update your workflow using https://app.stepsecurity.io/secureworkflow/benwinding/quill-image-compress/push.yml/master?enable=pin
Warn: npmCommand not pinned by hash: .github/workflows/push.yml:27
Warn: npmCommand not pinned by hash: .github/workflows/push.yml:53
Info: 0 out of 6 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 2 third-party GitHubAction dependencies pinned
Info: 0 out of 2 npmCommand dependencies pinned

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

Score

3.6

/10

Last Scanned on 2024-11-25

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More