Follow-up r79845: Add rotation support to the upload preview using the <canvas> eleme...

diff --git a/resources/mediawiki.special/mediawiki.special.upload.js b/resources/mediawiki.special/mediawiki.special.upload.js
index e47d71d..163dbbf 100644 (file)
--- 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.