npmpackage.info

Gathering detailed insights and metrics for blueimp-canvas-to-blob

Gathering detailed insights and metrics for blueimp-canvas-to-blob

blueimp-canvas-to-blob - 3.29.0 | npmpackage.info

blueimp-canvas-to-blob

JavaScript Canvas to Blob is a function to convert canvas elements into Blob objects.

3.29.0

1,475

MIT

JavaScript

720.00 B

Installations

npm install blueimp-canvas-to-blob

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

16.9.1

NPM Version

7.24.1

Score

99.7

Supply Chain

100

Quality

76.1

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

0

Total

19

Closed

11

Merged

8

Issues

Open

2

Total

15

Closed

13

Releases

Unable to fetch releases

Languages

3

JavaScript

HTML

Shell

JavaScript (91.01%)

HTML (7.01%)

Shell (1.98%)

Developer

Download Statistics

Total Downloads

67,740,996

Last Day

68,619

Last Week

300,714

Last Month

1,392,674

Last Year

14,078,642

GitHub Statistics

MIT License

1,475 Stars

151 Commits

395 Forks

66 Watchers

2 Branches

8 Contributors

Updated on May 04, 2025

Bundle Size

1.42 kB

Minified

720.00 B

Minified + Gzipped

Bundlephobia

Maintainers

1

View All 8 Contributors

Package Meta Information

Latest Version

3.29.0

Package Id

blueimp-canvas-to-blob@3.29.0

Size

5.49 kB

NPM Version

7.24.1

Node Version

16.9.1

Published on

Sep 25, 2021

Total Downloads

Cumulative downloads

Total Downloads

67,740,996

Last Day

8.1%

68,619

Compared to previous day

Last Week

-7.8%

300,714

Compared to previous week

Last Month

3.1%

1,392,674

Compared to previous month

Last Year

13%

14,078,642

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

10

blueimp-load-image chai eslint eslint-config-blueimp eslint-config-prettier eslint-plugin-jsdoc eslint-plugin-prettier mocha prettier uglify-js

JavaScript Canvas to Blob

Contents

Description
Setup
Usage
Requirements
Browsers
API
Test
License

Description

Canvas to Blob is a polyfill for Browsers that don't support the standard JavaScript HTMLCanvasElement.toBlob method.

It can be used to create Blob objects from an HTML canvas element.

Setup

Install via NPM:

1npm install blueimp-canvas-to-blob

This will install the JavaScript files inside ./node_modules/blueimp-canvas-to-blob/js/ relative to your current directory, from where you can copy them into a folder that is served by your web server.

Next include the minified JavaScript Canvas to Blob script in your HTML markup:

1<script src="js/canvas-to-blob.min.js"></script>

Or alternatively, include the non-minified version:

1<script src="js/canvas-to-blob.js"></script>

Usage

You can use the canvas.toBlob() method in the same way as the native implementation:

1var canvas = document.createElement('canvas')
2// Edit the canvas ...
3if (canvas.toBlob) {
4  canvas.toBlob(function (blob) {
5    // Do something with the blob object,
6    // e.g. create multipart form data for file uploads:
7    var formData = new FormData()
8    formData.append('file', blob, 'image.jpg')
9    // ...
10  }, 'image/jpeg')
11}

Requirements

The JavaScript Canvas to Blob function has zero dependencies.

However, it is a very suitable complement to the JavaScript Load Image function.

Browsers

The following browsers have native support for HTMLCanvasElement.toBlob:

Chrome 50+
Firefox 19+
Safari 11+
Mobile Chrome 50+ (Android)
Mobile Firefox 4+ (Android)
Mobile Safari 11+ (iOS)
Edge 79+

Browsers which implement the following APIs support canvas.toBlob() via polyfill:

This includes the following browsers:

Chrome 20+
Firefox 13+
Safari 8+
Mobile Chrome 25+ (Android)
Mobile Firefox 14+ (Android)
Mobile Safari 8+ (iOS)
Edge 74+
Edge Legacy 12+
Internet Explorer 10+

API

In addition to the canvas.toBlob() polyfill, the JavaScript Canvas to Blob script exposes its helper function dataURLtoBlob(url):

1// Uncomment the following line when using a module loader like webpack:
2// var dataURLtoBlob = require('blueimp-canvas-to-blob')
3
4// black+white 3x2 GIF, base64 data:
5var b64 = 'R0lGODdhAwACAPEAAAAAAP///yZFySZFySH5BAEAAAIALAAAAAADAAIAAAIDRAJZADs='
6var url = 'data:image/gif;base64,' + b64
7var blob = dataURLtoBlob(url)

Test

License

The JavaScript Canvas to Blob script is released under the MIT license.

Empty State

No vulnerabilities found.

10

Dangerous-Workflow

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

10

Binary-Artifacts

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

10

License

Determines if the project has defined a license.

1

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

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

0

SAST

Determines if the project uses static code analysis.

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.

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.

Score

2.6

/10

Last Scanned on 2025-05-05

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.