Add options for the background of the screenshot.
MODIFY
src/map.js
src/map.js
@@ -1566,10 +1566,16 @@ var map = function (arg) {
* to get the results as a blob, which can be faster for some operations
* but is not supported as widely).
* @param {Number} encoderOptions: see canvas.toDataURL.
+ * @param {object} opts: additional screenshot options:
+ * background: if false or null, don't prefill the background. If
+ * undefined, use the default (white). Otherwise, a css color or
+ * CanvasRenderingContext2D.fillStyle to fill the initial canvas.
+ * This could match the background of the browser page, for instance.
* @returns {string|HTMLCanvasElement}: data URL with the result or the
* HTMLCanvasElement with the result.
*/
- this.screenshot = function (layers, type, encoderOptions) {
+ this.screenshot = function (layers, type, encoderOptions, opts) {
+ opts = opts || {};
// ensure layers is a list of all the layres we want to include
if (!layers) {
layers = m_this.layers();
@@ -1587,9 +1593,11 @@ var map = function (arg) {
result.width = m_width;
result.height = m_height;
var context = result.getContext('2d');
- // start with a white background
- context.fillStyle = 'white';
+ // optionally start with a white or custom background
+ if (opts.background !== false && opts.background !== null) {
+ context.fillStyle = opts.background !== undefined ? opts.background : 'white';
context.fillRect(0, 0, result.width, result.height);
+ }
// for each layer, copy all canvases to our new canvas. If we ever support
// non-canvases, add them here. It looks like some support could be added
// with a library such as rasterizehtml (avialable on npm).

MODIFY
tests/cases/map.js
tests/cases/map.js
@@ -623,6 +623,12 @@ describe('geo.core.map', function () {
expect(dataUrl3).not.toEqual(dataUrl);
expect(dataUrl3).not.toEqual(dataUrl2);
layer2.opacity(1);
+ // we can ask for no or different backgrounds
+ dataUrl2 = m.screenshot(null, undefined, undefined, {background: false});
+ expect(dataUrl2).not.toEqual(dataUrl);
+ dataUrl3 = m.screenshot(null, undefined, undefined, {background: 'red'});
+ expect(dataUrl3).not.toEqual(dataUrl);
+ expect(dataUrl3).not.toEqual(dataUrl2);
// asking for layers out of order shouldn't matter
dataUrl3 = m.screenshot([layer2, layer1]);
expect(dataUrl3).toEqual(dataUrl);

Add options for the background of the screenshot.