Merge pull request #5610 from fkaelberer/betterThumbnailScaling

Better thumbnail image scaling
This commit is contained in:
Tim van der Meij 2015-01-23 20:45:37 +01:00
commit 6f36df79a1

View File

@ -212,34 +212,36 @@ var ThumbnailView = function thumbnailView(container, id, defaultViewport,
} }
this.renderingState = RenderingStates.FINISHED; this.renderingState = RenderingStates.FINISHED;
var ctx = this.getPageDrawContext(); var ctx = this.getPageDrawContext();
var canvas = ctx.canvas;
var reducedImage = img; if (img.width <= 2 * canvas.width) {
var reducedWidth = img.width; ctx.drawImage(img, 0, 0, img.width, img.height,
var reducedHeight = img.height; 0, 0, canvas.width, canvas.height);
} else {
// drawImage does an awful job of rescaling the image, doing it gradually // drawImage does an awful job of rescaling the image, doing it gradually
var MAX_SCALE_FACTOR = 2.0; var MAX_NUM_SCALING_STEPS = 3;
if (Math.max(img.width / ctx.canvas.width, var reducedWidth = canvas.width << MAX_NUM_SCALING_STEPS;
img.height / ctx.canvas.height) > MAX_SCALE_FACTOR) { var reducedHeight = canvas.height << MAX_NUM_SCALING_STEPS;
reducedWidth >>= 1; var reducedImage = getTempCanvas(reducedWidth, reducedHeight);
reducedHeight >>= 1;
reducedImage = getTempCanvas(reducedWidth, reducedHeight);
var reducedImageCtx = reducedImage.getContext('2d'); var reducedImageCtx = reducedImage.getContext('2d');
while (reducedWidth > img.width || reducedHeight > img.height) {
reducedWidth >>= 1;
reducedHeight >>= 1;
}
reducedImageCtx.drawImage(img, 0, 0, img.width, img.height, reducedImageCtx.drawImage(img, 0, 0, img.width, img.height,
0, 0, reducedWidth, reducedHeight); 0, 0, reducedWidth, reducedHeight);
while (Math.max(reducedWidth / ctx.canvas.width, while (reducedWidth > 2 * canvas.width) {
reducedHeight / ctx.canvas.height) > MAX_SCALE_FACTOR) {
reducedImageCtx.drawImage(reducedImage, reducedImageCtx.drawImage(reducedImage,
0, 0, reducedWidth, reducedHeight, 0, 0, reducedWidth, reducedHeight,
0, 0, reducedWidth >> 1, reducedHeight >> 1); 0, 0, reducedWidth >> 1, reducedHeight >> 1);
reducedWidth >>= 1; reducedWidth >>= 1;
reducedHeight >>= 1; reducedHeight >>= 1;
} }
ctx.drawImage(reducedImage, 0, 0, reducedWidth, reducedHeight,
0, 0, canvas.width, canvas.height);
} }
ctx.drawImage(reducedImage, 0, 0, reducedWidth, reducedHeight,
0, 0, ctx.canvas.width, ctx.canvas.height);
this.hasImage = true; this.hasImage = true;
}; };
}; };