Introduces attribute source to image traces

src/traces/image/attributes.js

@@ -22,6 +22,15 @@ for(var i = 0; i < cm.length; i++) {
 }
 
 module.exports = extendFlat({
+    source: {
+        valType: 'string',
+        role: 'info',
+        editType: 'calc',
+        description: [
+            'Specifies the data URI of the image to be visualized.',
+            'The URI consists of "data:[<media type>][;base64],<data>"'
+        ].join(' ')
+    },
     z: {
         valType: 'data_array',
         role: 'info',

src/traces/image/calc.js

@@ -13,15 +13,27 @@ var constants = require('./constants');
 var isNumeric = require('fast-isnumeric');
 var Axes = require('../../plots/cartesian/axes');
 var maxRowLength = require('../../lib').maxRowLength;
+var sizeOf = require('image-size');
+var dataUri = require('../../snapshot/helpers').IMAGE_URL_PREFIX;
+var Buffer = require('buffer/').Buffer;  // note: the trailing slash is important!
 
 module.exports = function calc(gd, trace) {
+    var h;
+    var w;
+    if(trace._isFromZ) {
+        h = trace.z.length;
+        w = maxRowLength(trace.z);
+    } else if(trace._isFromSource) {
+        var size = getImageSize(trace.source);
+        h = size.height;
+        w = size.width;
+    }
+
     var xa = Axes.getFromId(gd, trace.xaxis || 'x');
     var ya = Axes.getFromId(gd, trace.yaxis || 'y');
 
     var x0 = xa.d2c(trace.x0) - trace.dx / 2;
     var y0 = ya.d2c(trace.y0) - trace.dy / 2;
-    var h = trace.z.length;
-    var w = maxRowLength(trace.z);
 
     // Set axis range
     var i;
@@ -84,3 +96,10 @@ function makeScaler(trace) {
         return c;
     };
 }
+
+// Get image size
+function getImageSize(src) {
+    var data = src.replace(dataUri, '');
+    var buff = new Buffer(data, 'base64');
+    return sizeOf(buff);
+}

src/traces/image/defaults.js

@@ -11,13 +11,19 @@
 var Lib = require('../../lib');
 var attributes = require('./attributes');
 var constants = require('./constants');
+var dataUri = require('../../snapshot/helpers').IMAGE_URL_PREFIX;
 
 module.exports = function supplyDefaults(traceIn, traceOut) {
     function coerce(attr, dflt) {
         return Lib.coerce(traceIn, traceOut, attributes, attr, dflt);
     }
+    coerce('source');
+    if(traceOut.source && !traceOut.source.match(dataUri)) traceOut.source = null;
+    traceOut._isFromSource = !!traceOut.source;
+
     var z = coerce('z');
-    if(z === undefined || !z.length || !z[0] || !z[0].length) {
+    traceOut._isFromZ = !(z === undefined || !z.length || !z[0] || !z[0].length);
+    if(!traceOut._isFromZ && !traceOut._isFromSource) {
         traceOut.visible = false;
         return;
     }
@@ -26,10 +32,16 @@ module.exports = function supplyDefaults(traceIn, traceOut) {
     coerce('y0');
     coerce('dx');
     coerce('dy');
-    var colormodel = coerce('colormodel');
 
-    coerce('zmin', constants.colormodel[colormodel].min);
-    coerce('zmax', constants.colormodel[colormodel].max);
+    if(traceOut._isFromZ) {
+        coerce('colormodel');
+        coerce('zmin', constants.colormodel[traceOut.colormodel].min);
+        coerce('zmax', constants.colormodel[traceOut.colormodel].max);
+    } else if(traceOut._isFromSource) {
+        traceOut.colormodel = 'rgba';
+        traceOut.zmin = constants.colormodel[traceOut.colormodel].min;
+        traceOut.zmax = constants.colormodel[traceOut.colormodel].max;
+    }
 
     coerce('text');
     coerce('hovertext');

src/traces/image/event_data.js

@@ -15,5 +15,6 @@ module.exports = function eventData(out, pt) {
     if(pt.ya) out.yaxis = pt.ya;
     out.color = pt.color;
     out.colormodel = pt.trace.colormodel;
+    if(!out.z) out.z = pt.color;
     return out;
 };

src/traces/image/hover.js

@@ -28,8 +28,15 @@ module.exports = function hoverPoints(pointData, xval, yval) {
     var nx = Math.floor((xval - cd0.x0) / trace.dx);
     var ny = Math.floor(Math.abs(yval - cd0.y0) / trace.dy);
 
+    var pixel;
+    if(trace._isFromZ) {
+        pixel = cd0.z[ny][nx];
+    } else if(trace._isFromSource) {
+        pixel = trace._canvas.getContext('2d').getImageData(nx, ny, 1, 1).data;
+    }
+
     // return early if pixel is undefined
-    if(!cd0.z[ny][nx]) return;
+    if(!pixel) return;
 
     var hoverinfo = cd0.hi || trace.hoverinfo;
     var fmtColor;
@@ -41,7 +48,7 @@ module.exports = function hoverPoints(pointData, xval, yval) {
 
     var colormodel = trace.colormodel;
     var dims = colormodel.length;
-    var c = trace._scaler(cd0.z[ny][nx]);
+    var c = trace._scaler(pixel);
     var s = constants.colormodel[colormodel].suffix;
 
     var colorstring = [];
@@ -64,7 +71,7 @@ module.exports = function hoverPoints(pointData, xval, yval) {
     var py = ya.c2p(cd0.y0 + (ny + 0.5) * trace.dy);
     var xVal = cd0.x0 + (nx + 0.5) * trace.dx;
     var yVal = cd0.y0 + (ny + 0.5) * trace.dy;
-    var zLabel = '[' + cd0.z[ny][nx].slice(0, trace.colormodel.length).join(', ') + ']';
+    var zLabel = '[' + pixel.slice(0, trace.colormodel.length).join(', ') + ']';
     return [Lib.extendFlat(pointData, {
         index: [ny, nx],
         x0: xa.c2p(cd0.x0 + nx * trace.dx),

src/traces/image/plot.js

@@ -13,14 +13,24 @@ var Lib = require('../../lib');
 var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
 var constants = require('./constants');
 
+function compatibleAxis(ax) {
+    return ax.type === 'linear' &&
+        // y axis must be reversed but x axis mustn't be
+        ((ax.range[1] > ax.range[0]) === (ax._id.charAt(0) === 'x'));
+}
+
 module.exports = function plot(gd, plotinfo, cdimage, imageLayer) {
     var xa = plotinfo.xaxis;
     var ya = plotinfo.yaxis;
 
+    var supportsPixelatedImage = !Lib.isSafari() && !gd._context._exportedPlot;
+
     Lib.makeTraceGroups(imageLayer, cdimage, 'im').each(function(cd) {
         var plotGroup = d3.select(this);
         var cd0 = cd[0];
         var trace = cd0.trace;
+        var fastImage = supportsPixelatedImage && trace._isFromSource && compatibleAxis(xa) && compatibleAxis(ya);
+        trace._fastImage = fastImage;
 
         var z = cd0.z;
         var x0 = cd0.x0;
@@ -66,11 +76,14 @@ module.exports = function plot(gd, plotinfo, cdimage, imageLayer) {
         }
 
         // 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.min((1 + extra) * ya._length, bottom);
+        if(!fastImage) {
+            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.min((1 + extra) * ya._length, bottom);
+        }
+
         var imageWidth = Math.round(right - left);
         var imageHeight = Math.round(bottom - top);
 
@@ -82,48 +95,118 @@ module.exports = function plot(gd, plotinfo, cdimage, imageLayer) {
             return;
         }
 
-        // Draw each pixel
-        var canvas = document.createElement('canvas');
-        canvas.width = imageWidth;
-        canvas.height = imageHeight;
-        var context = canvas.getContext('2d');
-
-        var ipx = function(i) {return Lib.constrain(Math.round(xa.c2p(x0 + i * dx) - left), 0, imageWidth);};
-        var jpx = function(j) {return Lib.constrain(Math.round(ya.c2p(y0 + j * dy) - top), 0, imageHeight);};
-
-        var fmt = constants.colormodel[trace.colormodel].fmt;
-        var c;
-        for(i = 0; i < cd0.w; i++) {
-            var ipx0 = ipx(i); var ipx1 = ipx(i + 1);
-            if(ipx1 === ipx0 || isNaN(ipx1) || isNaN(ipx0)) continue;
-            for(var j = 0; j < cd0.h; j++) {
-                var jpx0 = jpx(j); var jpx1 = jpx(j + 1);
-                if(jpx1 === jpx0 || isNaN(jpx1) || isNaN(jpx0) || !z[j][i]) continue;
-                c = trace._scaler(z[j][i]);
-                if(c) {
-                    context.fillStyle = trace.colormodel + '(' + fmt(c).join(',') + ')';
-                } else {
-                    // Return a transparent pixel
-                    context.fillStyle = 'rgba(0,0,0,0)';
+        // Create a new canvas and draw magnified pixels on it
+        function drawMagnifiedPixelsOnCanvas(readPixel) {
+            var colormodel = trace.colormodel;
+            var canvas = document.createElement('canvas');
+            canvas.width = imageWidth;
+            canvas.height = imageHeight;
+            var context = canvas.getContext('2d');
+
+            var ipx = function(i) {return Lib.constrain(Math.round(xa.c2p(x0 + i * dx) - left), 0, imageWidth);};
+            var jpx = function(j) {return Lib.constrain(Math.round(ya.c2p(y0 + j * dy) - top), 0, imageHeight);};
+
+            var fmt = constants.colormodel[colormodel].fmt;
+            var c;
+            for(i = 0; i < cd0.w; i++) {
+                var ipx0 = ipx(i); var ipx1 = ipx(i + 1);
+                if(ipx1 === ipx0 || isNaN(ipx1) || isNaN(ipx0)) continue;
+                for(var j = 0; j < cd0.h; j++) {
+                    var jpx0 = jpx(j); var jpx1 = jpx(j + 1);
+                    if(jpx1 === jpx0 || isNaN(jpx1) || isNaN(jpx0) || !readPixel(i, j)) continue;
+                    c = trace._scaler(readPixel(i, j));
+                    if(c) {
+                        context.fillStyle = colormodel + '(' + fmt(c).join(',') + ')';
+                    } else {
+                        // Return a transparent pixel
+                        context.fillStyle = 'rgba(0,0,0,0)';
+                    }
+                    context.fillRect(ipx0, jpx0, ipx1 - ipx0, jpx1 - jpx0);
                 }
-                context.fillRect(ipx0, jpx0, ipx1 - ipx0, jpx1 - jpx0);
             }
+
+            return canvas;
+        }
+
+        function sizeImage(image) {
+            image.attr({
+                height: imageHeight,
+                width: imageWidth,
+                x: left,
+                y: top
+            });
         }
 
+        var data = (trace._isFromSource && !fastImage) ? [cd, {hidden: true}] : [cd];
         var image3 = plotGroup.selectAll('image')
-            .data(cd);
+            .data(data);
 
         image3.enter().append('svg:image').attr({
             xmlns: xmlnsNamespaces.svg,
             preserveAspectRatio: 'none'
         });
 
-        image3.attr({
-            height: imageHeight,
-            width: imageWidth,
-            x: left,
-            y: top,
-            'xlink:href': canvas.toDataURL('image/png')
+        if(fastImage) sizeImage(image3);
+        image3.exit().remove();
+
+        // Pixelated image rendering
+        // http://phrogz.net/tmp/canvas_image_zoom.html
+        // https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
+        image3
+            .attr('style', 'image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; image-rendering: crisp-edges; image-rendering: pixelated;');
+
+        new Promise(function(resolve) {
+            if(trace._isFromZ) {
+                resolve();
+            } else if(trace._isFromSource) {
+                // Transfer image to a canvas to access pixel information
+                trace._canvas = trace._canvas || document.createElement('canvas');
+                trace._canvas.width = w;
+                trace._canvas.height = h;
+                var context = trace._canvas.getContext('2d');
+
+                var sel;
+                if(fastImage) {
+                    // Use the displayed image
+                    sel = image3;
+                } else {
+                    // Use the hidden image
+                    sel = d3.select(image3[0][1]);
+                }
+
+                var image = sel.node();
+                image.onload = function() {
+                    context.drawImage(image, 0, 0);
+                    // we need to wait for the image to be loaded in order to redraw it from the canvas
+                    if(!fastImage) resolve();
+                };
+                sel.attr('xlink:href', trace.source);
+                if(fastImage) resolve();
+            }
+        })
+        .then(function() {
+            if(!fastImage) {
+                var canvas;
+                if(trace._isFromZ) {
+                    canvas = drawMagnifiedPixelsOnCanvas(function(i, j) {return z[j][i];});
+                } else if(trace._isFromSource) {
+                    var context = trace._canvas.getContext('2d');
+                    var data = context.getImageData(0, 0, w, h).data;
+                    canvas = drawMagnifiedPixelsOnCanvas(function(i, j) {
+                        var index = 4 * (j * w + i);
+                        return [
+                            data[index + 0],
+                            data[index + 1],
+                            data[index + 2],
+                            data[index + 3]
+                        ];
+                    });
+                }
+                var href = canvas.toDataURL('image/png');
+                var displayImage = d3.select(image3[0][0]);
+                sizeImage(displayImage);
+                displayImage.attr('xlink:href', href);
+            }
         });
     });
 };

src/traces/image/style.js

@@ -13,6 +13,7 @@ var d3 = require('d3');
 module.exports = function style(gd) {
     d3.select(gd).selectAll('.im image')
         .style('opacity', function(d) {
-            return d.trace.opacity;
+            if(d && d.hidden) return 0;
+            return d[0].trace.opacity;
         });
 };

test/image/compare_pixels_test.js

@@ -93,7 +93,8 @@ if(allMock || argv.filter) {
     allMockList = allMockList.filter(function(mockName) {
         var cond = !(
             mockName === 'font-wishlist' ||
-            mockName.indexOf('mapbox_') !== -1
+            mockName.indexOf('mapbox_') !== -1 ||
+            mockName.match(/image_.*source/)
         );
         if(!cond) console.log(' -', mockName);
         return cond;