dmmfll/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>canvas image spike</title>
</head>
<body>
  <div id="root">
    <h2>Hello, world.</h2>
    <canvas id="canvas" style="border:1px solid black;" width="256" height="256"></canvas>
  </div>
  <script src="main.js"></script>
</body>
</html>

## main.js
// Canvas Object
var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    // load image from data url
    imageObj = new Image(),
    data = null,
    blob = null,
    collection = [],
    cl = null,
    n = 0;

imageObj.onload = function() {
  ctx.drawImage(this, 0, 0);
};

imageObj.src = 'panda_dark.png';

function dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]),
        ab = new ArrayBuffer(byteString.length),
        ia = new Uint8Array(ab),
        i = 0,
        length = byteString.length;

    while (i < length){
         ia[i] = byteString.charCodeAt(i);
         i = i + 1;
    }
    return new Blob([ab], {type: 'image/png'});
}

// this would get passed into whatever function needs a data url
// in the example at http://gorigins.com/posting-a-canvas-image-to-facebook-and-twitter/
// it is in the Twitter example in the callback at `data.append`
data = document.getElementById('canvas').toDataURL("image/png");
collection.push(data)
// this would get passed into whatever function needs a blob
// in the example at http://gorigins.com/posting-a-canvas-image-to-facebook-and-twitter/
// it is `postImageToFacebook` and
blob = dataURItoBlob(data);
collection.push(blob);
cl = collection.length;

while ( n < cl){
  console.log(collection[n]);
  n = n + 1;
}

## panda_dark.png

      
    Raw
  

              panda_dark.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>canvas image spike</title>
	</head>
	<body>
	<div id="root">
	<h2>Hello, world.</h2>
	<canvas id="canvas" style="border:1px solid black;" width="256" height="256"></canvas>
	</div>
	<script src="main.js"></script>
	</body>
	</html>
	// Canvas Object
	var canvas = document.getElementById('canvas'),
	ctx = canvas.getContext('2d'),
	// load image from data url
	imageObj = new Image(),
	data = null,
	blob = null,
	collection = [],
	cl = null,
	n = 0;

	imageObj.onload = function() {
	ctx.drawImage(this, 0, 0);
	};

	imageObj.src = 'panda_dark.png';

	function dataURItoBlob(dataURI) {
	var byteString = atob(dataURI.split(',')[1]),
	ab = new ArrayBuffer(byteString.length),
	ia = new Uint8Array(ab),
	i = 0,
	length = byteString.length;

	while (i < length){
	ia[i] = byteString.charCodeAt(i);
	i = i + 1;
	}
	return new Blob([ab], {type: 'image/png'});
	}

	// this would get passed into whatever function needs a data url
	// in the example at http://gorigins.com/posting-a-canvas-image-to-facebook-and-twitter/
	// it is in the Twitter example in the callback at `data.append`
	data = document.getElementById('canvas').toDataURL("image/png");
	collection.push(data)
	// this would get passed into whatever function needs a blob
	// in the example at http://gorigins.com/posting-a-canvas-image-to-facebook-and-twitter/
	// it is `postImageToFacebook` and
	blob = dataURItoBlob(data);
	collection.push(blob);
	cl = collection.length;

	while ( n < cl){
	console.log(collection[n]);
	n = n + 1;
	}