* @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;
});
}
function clearPreview() {
$('#mw-upload-thumbnail').remove();
}
+
if (hasFileAPI()) {
// Update thumbnail when the file selection control is updated.