I think that filtering for quality can solve many of the same performance issues as improving delivery speed and efficiency.




<img id="preview">
<script>
document.getElementById('uploaded_file').onchange = function(evt) {
    // Ensure it's an image
    var file = document.getElementById('uploaded_file');

	// Load the image
	var reader = new FileReader();
	reader.onload = function (readerEvent) {
		var image = new Image();
		image.onload = function (imageEvent) {

			// Resize the image
			var canvas = document.createElement('canvas'),
				max_size = 544,// TODO : pull max size from a site config
				width = image.width,
				height = image.height;
			if (width > height) {
				if (width > max_size) {
					height *= max_size / width;
					width = max_size;
				}
			} else {
				if (height > max_size) {
					width *= max_size / height;
					height = max_size;
				}
			}
			canvas.width = width;
			canvas.height = height;
			canvas.getContext('2d').drawImage(image, 0, 0, width, height);
			var dataUrl = canvas.toDataURL('image/jpeg');
			var resizedImage = dataURLToBlob(dataUrl);
			$.event.trigger({
				type: "imageResized",
				blob: resizedImage,
				url: dataUrl
			});
		}
		image.src = readerEvent.target.result;
	}
	reader.readAsDataURL(file);
};
</script>
