Permalink
Browse files

Initial commit.

  • Loading branch information...
blueimp committed Feb 11, 2012
0 parents commit 7466fb40d842abe2ba55b48ecff016e8d5a32733
Showing with 330 additions and 0 deletions.
  1. +4 −0 Makefile
  2. +44 −0 README.md
  3. +81 −0 canvas-to-blob.js
  4. +1 −0 canvas-to-blob.min.js
  5. +39 −0 package.json
  6. +35 −0 test/index.html
  7. +126 −0 test/test.js
@@ -0,0 +1,4 @@
+.PHONY: js
+
+js:
+ uglifyjs -nc canvas-to-blob.js > canvas-to-blob.min.js
@@ -0,0 +1,44 @@
+# JavaScript Canvas to Blob
+
+## Usage
+Include the (minified) JavaScript Canvas to Blob script in your HTML markup:
+
+```html
+<script src="canvas-to-blob.min.js"></script>
+```
+
+In your application code, use the **canvasToBlob()** function like this:
+
+```js
+var canvas = document.createElement('canvas');
+/* ... your canvas manipulations ... */
+if(!canvasToBlob(
+ canvas,
+ 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);
+ /* ... */
+ },
+ {
+ type: fileType,
+ name: fileName // Only used by Mozilla Firefox
+ }
+)) {
+ /* ... alternative code for unsupported browsers ... */
+};
+```
+
+## 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
+The **canvasToBlob()** function expects a [canvas](https://developer.mozilla.org/en/HTML/Element/canvas) element as first argument and a callback function as second argument. An options object with the properties name (e.g. "image.png") and image (e.g. "image/png") can be provided as optional third argument.
+
+The function returns **true** if the browser supports canvas to blob conversion. It calls the provided callback function with the created blob as argument.
+
+## License
+The JavaScript Canvas to Blob script is released under the [MIT license](http://www.opensource.org/licenses/MIT).
@@ -0,0 +1,81 @@
+/*
+ * JavaScript Canvas to Blob 1.0
+ * https://github.com/blueimp/JavaScript-Canvas-to-Blob
+ *
+ * Copyright 2012, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ *
+ * Based on stackoverflow user Stoive's code snippet:
+ * http://stackoverflow.com/q/4998908
+ */
+
+/*jslint nomen: true */
+/*global window, atob, ArrayBuffer, Uint8Array, define */
+
+(function ($) {
+ 'use strict';
+
+ var BlobBuilder = window.MozBlobBuilder ||
+ window.WebKitBlobBuilder || window.BlobBuilder,
+ // Converts a canvas element to a Blob or File object:
+ canvasToBlob = function (canvas, callback, options) {
+ options = options || {};
+ if (canvas.toBlob) {
+ canvas.toBlob(callback, options.type);
+ return true;
+ } else if (canvas.mozGetAsFile) {
+ callback(canvas.mozGetAsFile(
+ options.name || 'blob.png',
+ options.type
+ ));
+ return true;
+ } else if (canvas.toDataURL && BlobBuilder && window.atob &&
+ window.ArrayBuffer && window.Uint8Array) {
+ callback(canvasToBlob.dataURItoBlob(
+ canvas.toDataURL(options.type)
+ ));
+ return true;
+ }
+ return false;
+ };
+
+ // Converts a dataURI to a Blob:
+ canvasToBlob.dataURItoBlob = function (dataURI) {
+ var byteString,
+ arrayBuffer,
+ intArray,
+ i,
+ bb,
+ mimeString;
+ if (dataURI.split(',')[0].indexOf('base64') >= 0) {
+ // Convert base64 to raw binary data held in a string:
+ byteString = atob(dataURI.split(',')[1]);
+ } else {
+ // Convert base64/URLEncoded data component to raw binary data:
+ byteString = decodeURIComponent(dataURI.split(',')[1]);
+ }
+ // Write the bytes of the string to an ArrayBuffer:
+ arrayBuffer = new ArrayBuffer(byteString.length);
+ intArray = new Uint8Array(arrayBuffer);
+ for (i = 0; i < byteString.length; i += 1) {
+ intArray[i] = byteString.charCodeAt(i);
+ }
+ // Write the ArrayBuffer to a blob:
+ bb = new BlobBuilder();
+ bb.append(arrayBuffer);
+ // Separate out the mime component:
+ mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
+ return bb.getBlob(mimeString);
+ };
+
+ if (typeof define !== 'undefined' && define.amd) {
+ define(function () {
+ return canvasToBlob;
+ });
+ } else {
+ $.canvasToBlob = canvasToBlob;
+ }
+}(this));

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -0,0 +1,39 @@
+{
+ "name": "blueimp-canvas-to-blob",
+ "version": "1.0.0",
+ "title": "JavaScript Canvas to Blob",
+ "description": "JavaScript Canvas to Blob is a function to convert canvas elements into Blob objects.",
+ "keywords": [
+ "javascript",
+ "canvas",
+ "blob",
+ "convert",
+ "conversion"
+ ],
+ "homepage": "https://github.com/blueimp/JavaScript-Canvas-to-Blob",
+ "author": {
+ "name": "Sebastian Tschan",
+ "url": "https://blueimp.net"
+ },
+ "maintainers": [
+ {
+ "name": "Sebastian Tschan",
+ "url": "https://blueimp.net"
+ }
+ ],
+ "repository": {
+ "type": "git",
+ "url": "git://github.com/blueimp/JavaScript-Canvas-to-Blob.git"
+ },
+ "bugs": "https://github.com/blueimp/JavaScript-Canvas-to-Blob/issues",
+ "licenses": [
+ {
+ "type": "MIT",
+ "url": "http://www.opensource.org/licenses/MIT"
+ }
+ ],
+ "files": [
+ "canvas-to-blob.js"
+ ],
+ "main": "canvas-to-blob.js"
+}
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<!--
+/*
+ * JavaScript Canvas to Blob Test 1.0
+ * https://github.com/blueimp/JavaScript-Canvas-to-Blob
+ *
+ * Copyright 2012, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+-->
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>JavaScript Canvas to Blob Test</title>
+<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/mocha.min.css">
+</head>
+<body>
+<div id="mocha"></div>
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+<script src="http://blueimp.github.com/cdn/js/mocha.min.js"></script>
+<script src="http://blueimp.github.com/cdn/js/expect.min.js"></script>
+<script>
+mocha.setup('bdd');
+$(function () {
+ mocha.run();
+});
+</script>
+<script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>
+<script src="../canvas-to-blob.js"></script>
+<script src="test.js"></script>
+</body>
+</html>
@@ -0,0 +1,126 @@
+/*
+ * JavaScript Canvas to Blob Test 1.0
+ * https://github.com/blueimp/JavaScript-Canvas-to-Blob
+ *
+ * Copyright 2012, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+/*global window, describe, it, expect, Blob */
+
+(function (expect, canvasToBlob) {
+ 'use strict';
+
+ // 80x60px GIF image (color black, base64 data):
+ var b64Data = 'R0lGODdhUAA8AIABAAAAAP///ywAAAAAUAA8AAACS4SPqcvtD6' +
+ 'OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s73/g8MCofE' +
+ 'ovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5PKsAAA7',
+ imageUrl = 'data:image/gif;base64,' + b64Data,
+ blob = canvasToBlob.dataURItoBlob(imageUrl);
+
+ describe('canvasToBlob', function () {
+
+ it('Returns true when supporting canvas to blob conversions', function (done) {
+ window.loadImage(blob, function (canvas) {
+ expect(canvasToBlob(
+ canvas,
+ function () {
+ done();
+ }
+ )).to.be.ok();
+ }, {canvas: true});
+ });
+
+ it('Returns false when not supporting canvas to blob conversions', function () {
+ expect(canvasToBlob(
+ {},
+ function () {}
+ )).to.not.be.ok();
+ });
+
+ it('Converts a canvas element to a blob and passes it to the callback function', function (done) {
+ window.loadImage(blob, function (canvas) {
+ expect(canvasToBlob(
+ canvas,
+ function (newBlob) {
+ done();
+ expect(newBlob).to.be.a(Blob);
+ },
+ blob
+ )).to.be.ok();
+ }, {canvas: true});
+ });
+
+ it('Converts a canvas element to a PNG blob', function (done) {
+ window.loadImage(blob, function (canvas) {
+ expect(canvasToBlob(
+ canvas,
+ function (newBlob) {
+ done();
+ expect(newBlob.type).to.be('image/png');
+ },
+ {
+ type: 'image/png'
+ }
+ )).to.be.ok();
+ }, {canvas: true});
+ });
+
+ it('Converts a canvas element to a JPG blob', function (done) {
+ window.loadImage(blob, function (canvas) {
+ expect(canvasToBlob(
+ canvas,
+ function (newBlob) {
+ done();
+ expect(newBlob.type).to.be('image/jpeg');
+ },
+ {
+ type: 'image/jpeg'
+ }
+ )).to.be.ok();
+ }, {canvas: true});
+ });
+
+ it('Keeps the aspect ratio of the canvas image', function (done) {
+ window.loadImage(blob, function (canvas) {
+ expect(canvasToBlob(
+ canvas,
+ function (newBlob) {
+ window.loadImage(newBlob, function (img) {
+ done();
+ expect(img.width).to.be(canvas.width);
+ expect(img.height).to.be(canvas.height);
+ });
+ }
+ )).to.be.ok();
+ }, {canvas: true});
+ });
+
+ it('Keeps the image data of the canvas image', function (done) {
+ window.loadImage(blob, function (canvas) {
+ expect(canvasToBlob(
+ canvas,
+ function (newBlob) {
+ window.loadImage(newBlob, function (newCanvas) {
+ var canvasData = canvas.getContext('2d')
+ .getImageData(0, 0, canvas.width, canvas.height),
+ newCanvasData = newCanvas.getContext('2d')
+ .getImageData(0, 0, newCanvas.width, newCanvas.height);
+ done();
+ expect(canvasData.width).to.be(newCanvasData.width);
+ expect(canvasData.height).to.be(newCanvasData.height);
+ }, {canvas: true});
+ }
+ )).to.be.ok();
+ }, {canvas: true});
+ });
+
+ });
+
+}(
+ this.expect,
+ this.canvasToBlob
+));

0 comments on commit 7466fb4

Please sign in to comment.