Trim empty rows and columns of pixels.

autoCropImage.js

document.querySelector('button').onclick = e=>{
	var uri = "http://robert-dev.ourtownamerica.com/intra/otcb4/api/serve_img.php?id=2&type=txt&revision=0";
	autoCropImage(uri).then(croppeduri=>{
		console.log(croppeduri);
		document.querySelector("#img").src = croppeduri;
	});
};

/**
 * Trim empty rows and columns of pixels.
 * @param {String} uri - a CORS safe url or data uri
 * @param {Number} padding - Number of pixels to pad image
 * @param {Bool} empty_pixels_only - If true, crop tranparent white pixles else, crop pixels that patch top left pixel
 * @returns {Promise} - resolve to a dataURL
 */
function autoCropImage(uri, padding=3, empty_pixels_only=false){
	return new Promise((resolve, reject)=>{
		var img = new Image();
		img.onload = ()=>{
			var canvas = document.createElement('canvas');
			canvas.width = img.width;
			canvas.height = img.height;
			var ctx = canvas.getContext("2d");
			ctx.drawImage(img, 0, 0);
			var bounds = {
				left: 0,
				right: canvas.width,
				top: 0,
				bottom: canvas.height
			};
			var rows = [];
			var cols = [];

			var [empty_r, empty_g, empty_b, empty_a] = ctx.getImageData(0, 0, 1, 1).data;

			var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
			for (var x = 0; x < canvas.width; x++) {
				cols[x] = cols[x] || false;
				for (var y = 0; y < canvas.height; y++) {
					rows[y] = rows[y] || false;
					const p = y * (canvas.width * 4) + x * 4;
					const [r, g, b, a] = [imageData.data[p], imageData.data[p + 1], imageData.data[p + 2], imageData.data[p + 3]];

					var isEmptyPixel = empty_pixels_only ? 
						Math.max(r, g, b, a) === 0 : // pixel is white, transparent
						r === empty_r && g === empty_g && b === empty_b && a === empty_a ; // pixel is same as top left pixel

					if (!isEmptyPixel) {
						cols[x] = true;
						rows[y] = true;
					}
				}
			}
			for (var i = 0; i < rows.length; i++) {
				if (rows[i]) {
					bounds.top = i ? i - 1 : i;
					break;
				}
			}
			for (var i = rows.length; i--; ) {
				if (rows[i]) {
					bounds.bottom = i < canvas.height ? i + 1 : i;
					break;
				}
			}
			for (var i = 0; i < cols.length; i++) {
				if (cols[i]) {
					bounds.left = i ? i - 1 : i;
					break;
				}
			}
			for (var i = cols.length; i--; ) {
				if (cols[i]) {
					bounds.right = i < canvas.width ? i + 1 : i;
					break;
				}
			}

			if(padding){
				bounds.top = Math.max(0, bounds.top-padding);
				bounds.left = Math.max(0, bounds.left-padding);
				bounds.right = Math.min(canvas.width, bounds.right+padding);
				bounds.bottom = Math.min(canvas.height, bounds.bottom+padding);
			}

			var newWidth = Math.max(1, bounds.right - bounds.left);
			var newHeight = Math.max(1, bounds.bottom - bounds.top);

			var newCanvas = document.createElement("canvas");
			newCanvas.width = newWidth;
			newCanvas.height = newHeight;
			var newCtx = newCanvas.getContext("2d");

			var cut = ctx.getImageData(bounds.left, bounds.top, newWidth, newHeight);

			newCtx.putImageData(cut, 0, 0);
			var croppeduri = newCanvas.toDataURL();
			resolve(croppeduri);
		};
		img.onerror = reject;
		img.src = uri;
	});
}