PHPackages                             itlized/javascript-canvas-to-blob - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. itlized/javascript-canvas-to-blob

ActiveLibrary[Utility & Helpers](/categories/utility)

itlized/javascript-canvas-to-blob
=================================

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

05.1kJavaScript

Since Sep 27Pushed 12y ago1 watchersCompare

[ Source](https://github.com/ITLized/JavaScript-Canvas-to-Blob)[ Packagist](https://packagist.org/packages/itlized/javascript-canvas-to-blob)[ RSS](/packages/itlized-javascript-canvas-to-blob/feed)WikiDiscussions master Synced 3d ago

READMEChangelogDependenciesVersions (1)Used By (0)

JavaScript Canvas to Blob
=========================

[](#javascript-canvas-to-blob)

Description
-----------

[](#description)

Canvas to Blob is a polyfill for the standard JavaScript [canvas.toBlob](http://www.w3.org/TR/html5/the-canvas-element.html#dom-canvas-toblob) method.

It can be used to create [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) objects from an HTML [canvas](https://developer.mozilla.org/en-US/docs/HTML/Canvas) element.

Usage
-----

[](#usage)

Include the (minified) JavaScript Canvas to Blob script in your HTML markup:

```

```

Then use the *canvas.toBlob()* method in the same way as the native implementation:

```
var canvas = document.createElement('canvas');
/* ... your canvas manipulations ... */
if (canvas.toBlob) {
    canvas.toBlob(
        function (blob) {
            // Do something with the blob object,
            // e.g. creating a multipart form for file uploads:
            var formData = new FormData();
            formData.append('file', blob, fileName);
            /* ... */
        },
        'image/jpeg'
    );
}
```

Requirements
------------

[](#requirements)

The JavaScript Canvas to Blob function has zero dependencies.

However, Canvas to Blob is a very suitable complement to the [JavaScript Load Image](https://github.com/blueimp/JavaScript-Load-Image) function.

API
---

[](#api)

In addition to the **canvas.toBlob** polyfill, the JavaScript Canvas to Blob script provides one additional function called **dataURLtoBlob**, which is added to the global window object if no AMD loader is used to load the script:

```
// 80x60px GIF image (color black, base64 data):
var b64Data = 'R0lGODdhUAA8AIABAAAAAP///ywAAAAAUAA8AAACS4SPqcvtD6' +
        'OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s73/g8MCofE' +
        'ovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5PKsAAA7',
    imageUrl = 'data:image/gif;base64,' + b64Data,
    blob = window.dataURLtoBlob && window.dataURLtoBlob(imageUrl);
```

Browsers
--------

[](#browsers)

The following browsers support either the native or the polyfill *canvas.toBlob()* method:

### Desktop browsers

[](#desktop-browsers)

- Google Chrome (see [Chromium issue #67587](https://code.google.com/p/chromium/issues/detail?id=67587))
- Apple Safari 6.0+ (see [Mozilla issue #648610](https://bugzilla.mozilla.org/show_bug.cgi?id=648610))
- Mozilla Firefox 4.0+
- Microsoft Internet Explorer 10.0+

### Mobile browsers

[](#mobile-browsers)

- Apple Safari Mobile on iOS 6.0+
- Google Chrome on iOS 6.0+
- Google Chrome on Android 4.0+

Test
----

[](#test)

[JavaScript Canvas to Blob Test](http://blueimp.github.io/JavaScript-Canvas-to-Blob/test/)

License
-------

[](#license)

The JavaScript Canvas to Blob script is released under the [MIT license](http://www.opensource.org/licenses/MIT).

###  Health Score

24

—

LowBetter than 32% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity17

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity41

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 89.5% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/40b93f5ed56affca31d375b6278b86d5ab50a43951fcf608203058f405c4a829?d=identicon)[itlized](/maintainers/itlized)

---

Top Contributors

[![blueimp](https://avatars.githubusercontent.com/u/244586?v=4)](https://github.com/blueimp "blueimp (17 commits)")[![hinathan](https://avatars.githubusercontent.com/u/208909?v=4)](https://github.com/hinathan "hinathan (1 commits)")[![joewood](https://avatars.githubusercontent.com/u/1389583?v=4)](https://github.com/joewood "joewood (1 commits)")

### Embed Badge

![Health badge](/badges/itlized-javascript-canvas-to-blob/health.svg)

```
[![Health](https://phpackages.com/badges/itlized-javascript-canvas-to-blob/health.svg)](https://phpackages.com/packages/itlized-javascript-canvas-to-blob)
```

###  Alternatives

[xajax/xajax

Xajax is an open source PHP class library for easily creating powerful PHP-driven, web-based Ajax Applications. Using Xajax, you can asynchronously call PHP functions and update the content of your your webpage without reloading the page.

20710.7k](/packages/xajax-xajax)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)