From a4825970df3da2339fd0ecd828f25171d9b02261 Mon Sep 17 00:00:00 2001
From: Bryan Tong Minh <btongminh@users.mediawiki.org>
Date: Sat, 8 Jan 2011 16:24:11 +0000
Subject: [PATCH] Follow-up r79845: Add rotation support to the upload preview
 using the <canvas> element. The actual rotation angle still needs to be
 extracted from the file using a library such as jsjpegmeta
 <http://benno.id.au/jpegmetaexample/jpegmeta.js>

---
 .../mediawiki.special.upload.js               | 73 +++++++++++++++----
 1 file changed, 60 insertions(+), 13 deletions(-)

diff --git a/resources/mediawiki.special/mediawiki.special.upload.js b/resources/mediawiki.special/mediawiki.special.upload.js
index e47d71d42c..163dbbf906 100644
--- a/resources/mediawiki.special/mediawiki.special.upload.js
+++ b/resources/mediawiki.special/mediawiki.special.upload.js
@@ -39,28 +39,74 @@ $(function() {
 	 * @param {File} file
 	 */
 	function showPreview(file) {
+		var previewSize = 180;
+		
 		var thumb = $("<div id='mw-upload-thumbnail' class='thumb tright'>" +
 					    "<div class='thumbinner'>" +
-					      "<img style='max-width: 180px; max-height: 180px' />" +
+					      "<canvas width=" + previewSize + " height=" + previewSize + " ></canvas>" +
 					      "<div class='thumbcaption'><div class='filename'></div><div class='fileinfo'></div></div>" +
 					    "</div>" +
 					  "</div>");
 		thumb.find('.filename').text(file.name).end()
-		     .find('.fileinfo').text(prettySize(file.size)).end()
-		     .find('img').attr('src', wgScriptPath + '/skins/common/images/spinner.gif');
+		     .find('.fileinfo').text(prettySize(file.size)).end();
+		
+		var ctx = thumb.find('canvas')[0].getContext('2d');
+		var spinner = new Image();
+		spinner.onload = function () { 
+			ctx.drawImage( spinner, (previewSize - spinner.width) / 2, 
+					(previewSize - spinner.height) / 2 ); 
+		};
+		spinner.src = wgScriptPath + '/skins/common/images/spinner.gif';
 		$('#mw-htmlform-source').parent().prepend(thumb);
 
-		fetchPreview(file, function(dataURL) {
-			var img = $('#mw-upload-thumbnail img');
-			img.load(function() {
-				if ('naturalWidth' in img[0]) {
-					var w = img[0].naturalWidth, h = img[0].naturalHeight;
-					var info = mediaWiki.msg('widthheight', w, h) +
-						', ' + prettySize(file.size);
-					$('#mw-upload-thumbnail .fileinfo').text(info);
+		fetchPreview(file, function(dataURL) {	
+			var img = new Image();
+			var rotation = 0;
+			img.onload = function() {
+				// Fit the image within the previewSizexpreviewSize box
+				if ( img.width > img.height ) {
+					width = previewSize;
+					height = img.height / img.width * previewSize;
+				} else {
+					height = previewSize;
+					width = img.width / img.height * previewSize;
+				}
+				// Determine the offset required to center the image
+				dx = (180 - width) / 2;
+				dy = (180 - height) / 2;
+				switch (rotation) {
+					// If a rotation is applied, the direction of the axis
+					// changes as well. You can derive the values below by 
+					// drawing on paper an axis system, rotate it and see
+					// where the positive axis direction is
+					case 0:
+						x = dx;
+						y = dy;
+						break;
+					case 90:
+						x = dx;
+						y = dy - previewSize;
+						break;
+					case 180:
+						x = dx - previewSize;
+						y = dy - previewSize;
+						break;
+					case 270:
+						x = dx - previewSize;
+						y = dy;
+						break;
 				}
-			});
-			img.attr('src', dataURL);
+				
+				ctx.clearRect( 0, 0, 180, 180 );
+				ctx.rotate( rotation / 180 * Math.PI );
+				ctx.drawImage( img, x, y, width, height );
+				
+				// Image size
+				var info = mediaWiki.msg('widthheight', img.width, img.height) +
+					', ' + prettySize(file.size);
+				$('#mw-upload-thumbnail .fileinfo').text(info);
+			}
+			img.src = dataURL;
 		});
 	}
 
@@ -101,6 +147,7 @@ $(function() {
 	function clearPreview() {
 		$('#mw-upload-thumbnail').remove();
 	}
+	
 
 	if (hasFileAPI()) {
 		// Update thumbnail when the file selection control is updated.
-- 
2.20.1