| Index: trunk/phase3/resources/mediawiki.special/mediawiki.special.upload.js |
| — | — | @@ -39,28 +39,74 @@ |
| 40 | 40 | * @param {File} file |
| 41 | 41 | */ |
| 42 | 42 | function showPreview(file) { |
| | 43 | + var previewSize = 180; |
| | 44 | + |
| 43 | 45 | var thumb = $("<div id='mw-upload-thumbnail' class='thumb tright'>" + |
| 44 | 46 | "<div class='thumbinner'>" + |
| 45 | | - "<img style='max-width: 180px; max-height: 180px' />" + |
| | 47 | + "<canvas width=" + previewSize + " height=" + previewSize + " ></canvas>" + |
| 46 | 48 | "<div class='thumbcaption'><div class='filename'></div><div class='fileinfo'></div></div>" + |
| 47 | 49 | "</div>" + |
| 48 | 50 | "</div>"); |
| 49 | 51 | thumb.find('.filename').text(file.name).end() |
| 50 | | - .find('.fileinfo').text(prettySize(file.size)).end() |
| 51 | | - .find('img').attr('src', wgScriptPath + '/skins/common/images/spinner.gif'); |
| | 52 | + .find('.fileinfo').text(prettySize(file.size)).end(); |
| | 53 | + |
| | 54 | + var ctx = thumb.find('canvas')[0].getContext('2d'); |
| | 55 | + var spinner = new Image(); |
| | 56 | + spinner.onload = function () { |
| | 57 | + ctx.drawImage( spinner, (previewSize - spinner.width) / 2, |
| | 58 | + (previewSize - spinner.height) / 2 ); |
| | 59 | + }; |
| | 60 | + spinner.src = wgScriptPath + '/skins/common/images/spinner.gif'; |
| 52 | 61 | $('#mw-htmlform-source').parent().prepend(thumb); |
| 53 | 62 | |
| 54 | | - fetchPreview(file, function(dataURL) { |
| 55 | | - var img = $('#mw-upload-thumbnail img'); |
| 56 | | - img.load(function() { |
| 57 | | - if ('naturalWidth' in img[0]) { |
| 58 | | - var w = img[0].naturalWidth, h = img[0].naturalHeight; |
| 59 | | - var info = mediaWiki.msg('widthheight', w, h) + |
| 60 | | - ', ' + prettySize(file.size); |
| 61 | | - $('#mw-upload-thumbnail .fileinfo').text(info); |
| | 63 | + fetchPreview(file, function(dataURL) { |
| | 64 | + var img = new Image(); |
| | 65 | + var rotation = 0; |
| | 66 | + img.onload = function() { |
| | 67 | + // Fit the image within the previewSizexpreviewSize box |
| | 68 | + if ( img.width > img.height ) { |
| | 69 | + width = previewSize; |
| | 70 | + height = img.height / img.width * previewSize; |
| | 71 | + } else { |
| | 72 | + height = previewSize; |
| | 73 | + width = img.width / img.height * previewSize; |
| 62 | 74 | } |
| 63 | | - }); |
| 64 | | - img.attr('src', dataURL); |
| | 75 | + // Determine the offset required to center the image |
| | 76 | + dx = (180 - width) / 2; |
| | 77 | + dy = (180 - height) / 2; |
| | 78 | + switch (rotation) { |
| | 79 | + // If a rotation is applied, the direction of the axis |
| | 80 | + // changes as well. You can derive the values below by |
| | 81 | + // drawing on paper an axis system, rotate it and see |
| | 82 | + // where the positive axis direction is |
| | 83 | + case 0: |
| | 84 | + x = dx; |
| | 85 | + y = dy; |
| | 86 | + break; |
| | 87 | + case 90: |
| | 88 | + x = dx; |
| | 89 | + y = dy - previewSize; |
| | 90 | + break; |
| | 91 | + case 180: |
| | 92 | + x = dx - previewSize; |
| | 93 | + y = dy - previewSize; |
| | 94 | + break; |
| | 95 | + case 270: |
| | 96 | + x = dx - previewSize; |
| | 97 | + y = dy; |
| | 98 | + break; |
| | 99 | + } |
| | 100 | + |
| | 101 | + ctx.clearRect( 0, 0, 180, 180 ); |
| | 102 | + ctx.rotate( rotation / 180 * Math.PI ); |
| | 103 | + ctx.drawImage( img, x, y, width, height ); |
| | 104 | + |
| | 105 | + // Image size |
| | 106 | + var info = mediaWiki.msg('widthheight', img.width, img.height) + |
| | 107 | + ', ' + prettySize(file.size); |
| | 108 | + $('#mw-upload-thumbnail .fileinfo').text(info); |
| | 109 | + } |
| | 110 | + img.src = dataURL; |
| 65 | 111 | }); |
| 66 | 112 | } |
| 67 | 113 | |
| — | — | @@ -101,6 +147,7 @@ |
| 102 | 148 | function clearPreview() { |
| 103 | 149 | $('#mw-upload-thumbnail').remove(); |
| 104 | 150 | } |
| | 151 | + |
| 105 | 152 | |
| 106 | 153 | if (hasFileAPI()) { |
| 107 | 154 | // Update thumbnail when the file selection control is updated. |