https://benais.fr/wp-content/themes/cctoval/js/TileLayer.Grayscale.js

1/*
2 * L.TileLayer.Grayscale is a regular tilelayer with grayscale makeover.
3 */
4
5L.TileLayer.Grayscale = L.TileLayer.extend({
6	options: {
7		quotaRed: 21,
8		quotaGreen: 71,
9		quotaBlue: 8,
10		quotaDividerTune: 0,
11		quotaDivider: function() {
12			return this.quotaRed + this.quotaGreen + this.quotaBlue + this.quotaDividerTune;
13		}
14	},
15
16	initialize: function (url, options) {
17		options.crossOrigin = true;
18		L.TileLayer.prototype.initialize.call(this, url, options);
19
20		this.on('tileload', function(e) {
21			this._makeGrayscale(e.tile);
22		});
23	},
24
25	_createTile: function () {
26		var tile = L.TileLayer.prototype._createTile.call(this);
27		tile.crossOrigin = "Anonymous";
28		return tile;
29	},
30
31	_makeGrayscale: function (img) {
32		if (img.getAttribute('data-grayscaled'))
33			return;
34
35		img.crossOrigin = '';
36		var canvas = document.createElement("canvas");
37		canvas.width = img.width;
38		canvas.height = img.height;
39		var ctx = canvas.getContext("2d");
40		ctx.drawImage(img, 0, 0);
41
42		var imgd = ctx.getImageData(0, 0, canvas.width, canvas.height);
43		var pix = imgd.data;
44		for (var i = 0, n = pix.length; i < n; i += 4) {
45			pix[i] = pix[i + 1] = pix[i + 2] = (this.options.quotaRed * pix[i] + this.options.quotaGreen * pix[i + 1] + this.options.quotaBlue * pix[i + 2]) / this.options.quotaDivider();
46		}
47		ctx.putImageData(imgd, 0, 0);
48		img.setAttribute('data-grayscaled', true);
49		img.src = canvas.toDataURL();
50	}
51});
52
53L.tileLayer.grayscale = function (url, options) {
54	return new L.TileLayer.Grayscale(url, options);
55};