image: scale up pixel manually in javascript

antoinerg · antoinerg · commit 93489dbff59c · 2019-10-16T14:27:26.000-04:00
diff --git a/src/traces/image/calc.js b/src/traces/image/calc.js
@@ -21,9 +21,6 @@ module.exports = function calc(gd, trace) {
     var h = trace.z.length;
     var w = trace.z[0].length;
 
-    // xa.makeCalcdata(trace, 'x');
-    // ya.makeCalcdata(trace, 'y');
-
     trace._extremes[xa._id] = Axes.findExtremes(xa, [x, x + w * trace.xscale]);
     trace._extremes[ya._id] = Axes.findExtremes(ya, [y, y - h * trace.yscale]);
 
diff --git a/src/traces/image/plot.js b/src/traces/image/plot.js
@@ -20,6 +20,8 @@ module.exports = function(gd, plotinfo, cdimage, imageLayer) {
         var cd0 = cd[0];
         var trace = cd0.trace;
 
+        var z = cd0.z;
+        var tupleLength = trace.colormodel.length;
         var x = cd0.x;
         var y = cd0.y;
         var w = cd0.w;
@@ -34,16 +36,26 @@ module.exports = function(gd, plotinfo, cdimage, imageLayer) {
         var imageWidth = Math.round(right - left);
         var imageHeight = Math.round(top - bottom);
 
+        // Reduce image size when zoomed in to save memory
+        var extra = 0.5; // half the axis size
+        left = Math.max(-extra * xa._length, left);
+        right = Math.min((1 + extra) * xa._length, right);
+        top = Math.max(-extra * ya._length, top);
+        bottom = Math.max((1 + extra) * ya._length, bottom);
+
+        imageWidth = Math.round(right - left);
+        imageHeight = Math.round(bottom - top);
+
         var canvas = document.createElement('canvas');
-        var z = cd0.z;
-        canvas.width = cd0.w;
-        canvas.height = cd0.h;
+        canvas.width = imageWidth;
+        canvas.height = imageHeight;
         var context = canvas.getContext('2d');
-        var tupleLength = trace.colormodel.length;
+        var ipx = function(i) {return Lib.constrain(Math.round(xa.c2p(x + i * xscale) - left), 0, imageWidth);};
+        var jpx = function(j) {return Lib.constrain(Math.round(ya.c2p(y - j * yscale) - top), 0, imageHeight);};
         for(var i = 0; i < cd0.w; i++) {
             for(var j = 0; j < cd0.h; j++) {
                 context.fillStyle = trace.colormodel + '(' + z[j][i].slice(0, tupleLength).join(',') + ')';
-                context.fillRect(i, j, 1, 1);
+                context.fillRect(ipx(i), jpx(j), ipx(i + 1) - ipx(i), jpx(j + 1) - jpx(j));
             }
         }
 
@@ -55,18 +67,29 @@ module.exports = function(gd, plotinfo, cdimage, imageLayer) {
             preserveAspectRatio: 'none'
         });
 
+        // var canvas = document.createElement('canvas');
+        // canvas.width = cd0.w;
+        // canvas.height = cd0.h;
+        // var context = canvas.getContext('2d');
+        // for(var i = 0; i < cd0.w; i++) {
+        //     for(var j = 0; j < cd0.h; j++) {
+        //         context.fillStyle = trace.colormodel + '(' + z[j][i].slice(0, tupleLength).join(',') + ')';
+        //         context.fillRect(i, j, 1, 1);
+        //     }
+        // }
+        //
+        // TODO: support additional smoothing options
+        // https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
+        // http://phrogz.net/tmp/canvas_image_zoom.html
+        // image3
+         // .attr('style', 'image-rendering: optimizeSpeed; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; image-rendering: crisp-edges; image-rendering: pixelated;');
+
         image3.attr({
             height: imageHeight,
             width: imageWidth,
             x: left,
             y: top,
             'xlink:href': canvas.toDataURL('image/png')
         });
-
-        // TODO: support additional smoothing options
-        // https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
-        // http://phrogz.net/tmp/canvas_image_zoom.html
-        image3
-          .attr('style', 'image-rendering: optimizeSpeed; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; image-rendering: crisp-edges; image-rendering: pixelated;');
     });
 };
