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

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

3.29.0

1,469

MIT

JavaScript

720.00 B

Installations

npm install blueimp-canvas-to-blob

Pull Requests

Open

0

Total

19

Closed

11

Merged

8

Issues

Open

2

Total

15

Closed

13

Releases

Unable to fetch releases

Developer

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

No

Node Version

16.9.1

NPM Version

7.24.1

Statistics

1,469 Stars

151 Commits

394 Forks

66 Watching

2 Branches

8 Contributors

Updated on 09 Nov 2024

Bundle Size

1.42 kB

Minified

720.00 B

Minified + Gzipped

Bundlephobia

Languages

JavaScript (91.01%)

HTML (7.01%)

Shell (1.98%)

Total Downloads

Cumulative downloads

Total Downloads

61,174,507

Last day

3.6%

58,088

Compared to previous day

Last week

3.8%

290,479

Compared to previous week

Last month

14%

1,224,999

Compared to previous month

Last year

5.1%

13,012,072

Compared to previous year

Daily Downloads

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

Versions

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

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

License

Determines if the project has defined a license.

3

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

0

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

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.8

/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.