Fixed image resize algorithm bug

bytepan · bytepan · commit f58d6d65c828 · 2013-03-13T01:23:25.000+01:00
This patch fixes a bug in the resize algorithm that "eats" some lines, both horizontal and vertical. To see the actual bug just try to resize to 800x600 this 4000x3000 test pattern image https://docs.google.com/file/d/0B9gDTEhcnnOVMzhpZDZrMWQtZDg/edit?usp=sharing You should find the artefacts I've highlighted in testpattern_highlight.jpg Just to know, the bug was born because the renderImageToCanvas method renders a large HTML5 canvas picture splitting it in 1Mpixels blocks, but the junction between one block and another was made in each cycle with "ceil" & "floor" functions, that introduce a non-linear behaviour in resize algorithm which sometimes would result in skipped pixel lines inside the final image. The patch I've written tries to calculate the best scaling factor before entering the main 'while' cycle of a single 'tile' and then it uses it as an unique scaling factor for all image blocks. This should result in perfect junctions between all blocks inside the image with just (in worst cases) a tiny part of the original image cut off from the right and lower borders.
diff --git a/src/megapix-image.js b/src/megapix-image.js
@@ -86,22 +86,22 @@
     tmpCanvas.width = tmpCanvas.height = d;
     var tmpCtx = tmpCanvas.getContext('2d');
     var vertSquashRatio = detectVerticalSquash(img, iw, ih);
+    var dw = Math.ceil(d * width / iw);
+    var dh = Math.ceil(d * height / ih / vertSquashRatio);
     var sy = 0;
+    var dy = 0;
     while (sy < ih) {
-      var sh = sy + d > ih ? ih - sy : d;
       var sx = 0;
+      var dx = 0;
       while (sx < iw) {
-        var sw = sx + d > iw ? iw - sx : d;
         tmpCtx.clearRect(0, 0, d, d);
         tmpCtx.drawImage(img, -sx, -sy);
-        var dx = (sx * width / iw) << 0;
-        var dw = Math.ceil(sw * width / iw);
-        var dy = (sy * height / ih / vertSquashRatio) << 0;
-        var dh = Math.ceil(sh * height / ih / vertSquashRatio);
-        ctx.drawImage(tmpCanvas, 0, 0, sw, sh, dx, dy, dw, dh);
+        ctx.drawImage(tmpCanvas, 0, 0, d, d, dx, dy, dw, dh);
         sx += d;
+        dx += dw;
       }
       sy += d;
+      dy += dh;
     }
     ctx.restore();
     tmpCanvas = tmpCtx = null;
