JSFiddle - React, Tailwind, and code Playground

by minitech

JavaScript

(function() {
	'use strict';

	function toInt32(bytes) {
		return (bytes[0] << 24) | (bytes[1] << 16) | (bytes[2] << 8) | bytes[3];
	}

	function getDimensions(data) {
		return {
			width: toInt32(data.slice(16, 20)),
			height: toInt32(data.slice(20, 24))
		};
	}

	var base64Characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';

	function base64Decode(data) {
		var result = [];
		var current = 0;

		for(var i = 0, c; c = data.charAt(i); i++) {
			if(c === '=') {
				if(i !== data.length - 1 && (i !== data.length - 2 || data.charAt(i + 1) !== '=')) {
					throw new SyntaxError('Unexpected padding character.');
				}

				break;
			}

			var index = base64Characters.indexOf(c);

			if(index === -1) {
				throw new SyntaxError('Invalid Base64 character.');
			}

			current = (current << 6) | index;

			if(i % 4 === 3) {
				result.push(current >> 16, (current & 0xff00) >> 8, current & 0xff);
				current = 0;
			}
		}

		if(i % 4 === 1) {
			throw new SyntaxError('Invalid length for a Base64 string.');
		}

		if(i % 4 === 2) {
			result.push(current >> 4);
		} else if(i % 4 === 3) {
			current <<= 6;
			result.push(current >> 16, (current & 0xff00) >> 8);
		}

		return result;
	}

	window.getPngDimensions = function(dataUri) {
		return getDimensions(base64Decode(dataUri.substring(22)));
	};
})();

var dimensions =...