diff --git a/src/traces/image/attributes.js b/src/traces/image/attributes.js index 9720b31da8f..e144e029d28 100644 --- a/src/traces/image/attributes.js +++ b/src/traces/image/attributes.js @@ -51,6 +51,17 @@ module.exports = extendFlat({ 'otherwise it defaults to `rgb`.' ].join(' ') }, + zsmooth: { + valType: 'enumerated', + values: ['fast', false], + dflt: false, + role: 'info', + editType: 'plot', + description: [ + 'Picks a smoothing algorithm used to smooth `z` data.', + 'This only applies for image traces that use the `source` attribute.' + ].join(' ') + }, zmin: { valType: 'info_array', items: [ diff --git a/src/traces/image/constants.js b/src/traces/image/constants.js index 75b5a0606fd..240ef31cc7b 100644 --- a/src/traces/image/constants.js +++ b/src/traces/image/constants.js @@ -55,5 +55,18 @@ module.exports = { }, suffix: ['°', '%', '%', ''] } - } + }, + // For pixelated image rendering + // http://phrogz.net/tmp/canvas_image_zoom.html + // https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering + pixelatedStyle: [ + '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', + '' + ].join('; ') }; diff --git a/src/traces/image/defaults.js b/src/traces/image/defaults.js index bf574660e70..86bcf4e91b5 100644 --- a/src/traces/image/defaults.js +++ b/src/traces/image/defaults.js @@ -47,6 +47,7 @@ module.exports = function supplyDefaults(traceIn, traceOut) { traceOut.zmax = cm.zmaxDflt; } + coerce('zsmooth'); coerce('text'); coerce('hovertext'); coerce('hovertemplate'); diff --git a/src/traces/image/plot.js b/src/traces/image/plot.js index e4811abf4d7..4c35540e5a6 100644 --- a/src/traces/image/plot.js +++ b/src/traces/image/plot.js @@ -136,10 +136,8 @@ module.exports = function plot(gd, plotinfo, cdimage, imageLayer) { 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 - var 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;'; + var style = (trace.zsmooth === false) ? constants.pixelatedStyle : ''; + if(fastImage) { var xRange = Lib.simpleMap(xa.range, xa.r2l); var yRange = Lib.simpleMap(ya.range, ya.r2l);