franklinjavier/Uint8Array.js

## arrayBufferDataUri.js
function arrayBufferDataUri(raw) {
    var base64 = '';
    var encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
    var bytes = new Uint8Array(raw);
    var byteLength = bytes.byteLength;
    var byteRemainder = byteLength % 3;
    var mainLength = byteLength - byteRemainder;
    var a, b, c, d;
    var chunk;
    // Main loop deals with bytes in chunks of 3
    for (var i = 0; i < mainLength; i = i + 3) {
        // Combine the three bytes into a single integer
        chunk = (bytes[i] << 16) | (bytes[i + 1] << 8 ) | bytes[i + 2];
        // Use bitmasks to extract 6-bit segments from the triplet
        a = (chunk & 16515072) >> 18; // 16515072 = (2^6 - 1) << 18
        b = (chunk & 258048) >> 12;   // 258048   = (2^6 - 1) << 12
        c = (chunk & 4032) >> 6;      // 4032     = (2^6 - 1) << 6
        d = chunk & 63;               // 63       = 2^6 - 1
        // Convert the raw binary segments to the appropriate ASCII encoding
        base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d]
    }
    // Deal with the remaining bytes and padding
    if (byteRemainder == 1) {
        chunk = bytes[mainLength];
        a = (chunk & 252) >> 2; // 252 = (2^6 - 1) << 2
        // Set the 4 least significant bits to zero
        b = (chunk & 3) << 4;   // 3   = 2^2 - 1
        base64 += encodings[a] + encodings[b] + '==';
    }
    else if (byteRemainder == 2) {
        chunk = (bytes[mainLength] << 8 ) | bytes[mainLength + 1];
        a = (chunk & 16128) >> 8; // 16128 = (2^6 - 1) << 8
        b = (chunk & 1008) >> 4;  // 1008  = (2^6 - 1) << 4
        // Set the 2 least significant bits to zero
        c = (chunk & 15) << 2;    // 15    = 2^4 - 1
        base64 += encodings[a] + encodings[b] + encodings[c] + '=';
    }
    return "data:image/jpeg;base64," + base64;
}

## index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Canvas CORS</title>
</head>
<body>

    <canvas id="canvasCors" width="944" height="600"></canvas>

    <script src="main.js" type="text/javascript" charset="utf-8"></script>
    <script src="Uint8Array.js" type="text/javascript" charset="utf-8"></script>
    <script src="arrayBufferDataUri.js" type="text/javascript" charset="utf-8"></script>


</body>
</html>

## main.js
  (function( document, undefined ) {

      var url = 'http://imguol.com/c/infograficos/2013/noticias/maiores-menores-animais/fotos/elefante-africano.jpg',
          isIE = (navigator.appVersion.indexOf('MSIE') !== -1),
          canvas = document.getElementById('canvasCors'),
          ctx = canvas.getContext('2d'),
          multiplyColor = [255, 105, 0],
          img = new Image();

      function multiply( topValue, bottomValue ) {
          return topValue * bottomValue / 255;
      }

      function getImage( xhr ) {

          img.crossOrigin = 'http://www3.uol.com.br';
          img.onload = function() {

              ctx.drawImage( img, 0, 0 );

              var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height),
                  pix = imageData.data,
                  len = pix.length,
                  i = 0;

              for ( ; i < len; i += 4 ) {
                  pix[i  ] = multiply( multiplyColor[0], pix[i  ] ); // red
                  pix[i+1] = multiply( multiplyColor[1], pix[i+1] ); // green
                  pix[i+2] = multiply( multiplyColor[2], pix[i+2] ); // blue
              }

              ctx.putImageData( imageData, 0, 0 );

          };

          img.src = xhr ? arrayBufferDataUri( xhr.response ) : url;

      }

      if ( isIE ) {

          var xhr = new XMLHttpRequest();
          xhr.open( 'GET', url, true );
          xhr.responseType = 'arraybuffer';
          xhr.onload = function() {
              getImage( xhr );
          };

          xhr.send( null );

      } else {

          getImage();

      }

  }( document ));

## Uint8Array.js
(function() {
    try {
        var a = new Uint8Array(1);
        return; //no need
    } catch(e) { }

    function subarray(start, end) {
        return this.slice(start, end);
    }

    function set_(array, offset) {
        if (arguments.length < 2) offset = 0;
        for (var i = 0, n = array.length; i < n; ++i, ++offset)
        this[offset] = array[i] & 0xFF;
    }

    // we need typed arrays
    function TypedArray(arg1) {
        var result;
        if (typeof arg1 === "number") {
            result = new Array(arg1);
            for (var i = 0; i < arg1; ++i)
            result[i] = 0;
        } else
            result = arg1.slice(0);
        result.subarray = subarray;
        result.buffer = result;
        result.byteLength = result.length;
        result.set = set_;
        if (typeof arg1 === "object" && arg1.buffer)
            result.buffer = arg1.buffer;

        return result;
    }

    window.Uint8Array = TypedArray;
    window.Uint32Array = TypedArray;
    window.Int32Array = TypedArray;
})();
	function arrayBufferDataUri(raw) {
	var base64 = '';
	var encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
	var bytes = new Uint8Array(raw);
	var byteLength = bytes.byteLength;
	var byteRemainder = byteLength % 3;
	var mainLength = byteLength - byteRemainder;
	var a, b, c, d;
	var chunk;
	// Main loop deals with bytes in chunks of 3
	for (var i = 0; i < mainLength; i = i + 3) {
	// Combine the three bytes into a single integer
	chunk = (bytes[i] << 16) \| (bytes[i + 1] << 8 ) \| bytes[i + 2];
	// Use bitmasks to extract 6-bit segments from the triplet
	a = (chunk & 16515072) >> 18; // 16515072 = (2^6 - 1) << 18
	b = (chunk & 258048) >> 12; // 258048 = (2^6 - 1) << 12
	c = (chunk & 4032) >> 6; // 4032 = (2^6 - 1) << 6
	d = chunk & 63; // 63 = 2^6 - 1
	// Convert the raw binary segments to the appropriate ASCII encoding
	base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d]
	}
	// Deal with the remaining bytes and padding
	if (byteRemainder == 1) {
	chunk = bytes[mainLength];
	a = (chunk & 252) >> 2; // 252 = (2^6 - 1) << 2
	// Set the 4 least significant bits to zero
	b = (chunk & 3) << 4; // 3 = 2^2 - 1
	base64 += encodings[a] + encodings[b] + '==';
	}
	else if (byteRemainder == 2) {
	chunk = (bytes[mainLength] << 8 ) \| bytes[mainLength + 1];
	a = (chunk & 16128) >> 8; // 16128 = (2^6 - 1) << 8
	b = (chunk & 1008) >> 4; // 1008 = (2^6 - 1) << 4
	// Set the 2 least significant bits to zero
	c = (chunk & 15) << 2; // 15 = 2^4 - 1
	base64 += encodings[a] + encodings[b] + encodings[c] + '=';
	}
	return "data:image/jpeg;base64," + base64;
	}
	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Canvas CORS</title>
	</head>
	<body>

	<canvas id="canvasCors" width="944" height="600"></canvas>

	<script src="main.js" type="text/javascript" charset="utf-8"></script>
	<script src="Uint8Array.js" type="text/javascript" charset="utf-8"></script>
	<script src="arrayBufferDataUri.js" type="text/javascript" charset="utf-8"></script>


	</body>
	</html>
	(function( document, undefined ) {

	var url = 'http://imguol.com/c/infograficos/2013/noticias/maiores-menores-animais/fotos/elefante-africano.jpg',
	isIE = (navigator.appVersion.indexOf('MSIE') !== -1),
	canvas = document.getElementById('canvasCors'),
	ctx = canvas.getContext('2d'),
	multiplyColor = [255, 105, 0],
	img = new Image();

	function multiply( topValue, bottomValue ) {
	return topValue * bottomValue / 255;
	}

	function getImage( xhr ) {

	img.crossOrigin = 'http://www3.uol.com.br';
	img.onload = function() {

	ctx.drawImage( img, 0, 0 );

	var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height),
	pix = imageData.data,
	len = pix.length,
	i = 0;

	for ( ; i < len; i += 4 ) {
	pix[i ] = multiply( multiplyColor[0], pix[i ] ); // red
	pix[i+1] = multiply( multiplyColor[1], pix[i+1] ); // green
	pix[i+2] = multiply( multiplyColor[2], pix[i+2] ); // blue
	}

	ctx.putImageData( imageData, 0, 0 );

	};

	img.src = xhr ? arrayBufferDataUri( xhr.response ) : url;

	}

	if ( isIE ) {

	var xhr = new XMLHttpRequest();
	xhr.open( 'GET', url, true );
	xhr.responseType = 'arraybuffer';
	xhr.onload = function() {
	getImage( xhr );
	};

	xhr.send( null );

	} else {

	getImage();

	}

	}( document ));
	(function() {
	try {
	var a = new Uint8Array(1);
	return; //no need
	} catch(e) { }

	function subarray(start, end) {
	return this.slice(start, end);
	}

	function set_(array, offset) {
	if (arguments.length < 2) offset = 0;
	for (var i = 0, n = array.length; i < n; ++i, ++offset)
	this[offset] = array[i] & 0xFF;
	}

	// we need typed arrays
	function TypedArray(arg1) {
	var result;
	if (typeof arg1 === "number") {
	result = new Array(arg1);
	for (var i = 0; i < arg1; ++i)
	result[i] = 0;
	} else
	result = arg1.slice(0);
	result.subarray = subarray;
	result.buffer = result;
	result.byteLength = result.length;
	result.set = set_;
	if (typeof arg1 === "object" && arg1.buffer)
	result.buffer = arg1.buffer;

	return result;
	}

	window.Uint8Array = TypedArray;
	window.Uint32Array = TypedArray;
	window.Int32Array = TypedArray;
	})();