ebrelsford · April 27, 2016 14:55
diff --git a/index.html b/index.html
 <html>
    <head>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css" />
        <script src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-alpha2/html2canvas.min.js"></script>
        <script src="https://cdn.rawgit.com/flozz/StackBlur/master/dist/stackblur.min.js"></script>
        <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
        <style>
            html, body {
                margin:0;
                padding:0;
                width: 100%;
                height: 100%;
            }
            #map {
                width: 100%;
                height: 100%;
            }
            #image {
            }
            h1 {
                font-family:sans-serif;
                line-height:40px
            }
            canvas {
                position:absolute;
                top:0;
                z-index: 10000;
            }
            .blurinator {
                position: absolute;
                top: 50px;
                right: 50px;
                z-index: 50000;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <button class="blurinator">blur me!</button>
        <div id="image"></div>
        <script>
            $(document).ready(function () {
                var map = L.map('map').setView([37.758773,-122.446747], 10);
                L.tileLayer('http://map.parks.stamen.com/{z}/{x}/{y}.png', {
                    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.',
                    maxZoom: 18
                }).addTo(map);

                $('.blurinator').click(function () {
                    if ($('#blurred').length === 0) {
                        getBlurredBG(0, 0, $(document).width(), $(document).height(), 'blurred');
                    }
                    else if ($('#blurred').is(':visible')) {
                        $('#blurred').fadeOut();
                    }
                    else {
                        $('#blurred').fadeIn();
                    }
                });
            });

            function getBlurredBG(x, y, w, h, id) {
                html2canvas(document.getElementById('map'), {
                    useCORS: true,
                    logging: true
                }).then(function (canvas) {
                    process(canvas, x, y, w, h, id);
                });
            }

            function process(canvas, x, y, w, h, id) {
                var ocanvas = document.createElement('canvas');
                ocanvas.width = w;
                ocanvas.height = h;
                ocanvas.style.left = x + 'px';
                ocanvas.style.top = y + 'px';
                ocanvas.id = id;

                var ctx = ocanvas.getContext('2d');
                ctx.drawImage(canvas, x, y, w, h, 0, 0, w, h);

                StackBlur.canvasRGB(ocanvas, x, y, w, h, 24)

                document.body.appendChild(ocanvas);
            }
        </script>
    </body>
 </html>
	<html>
	<head>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css" />
	<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-alpha2/html2canvas.min.js"></script>
	<script src="https://cdn.rawgit.com/flozz/StackBlur/master/dist/stackblur.min.js"></script>
	<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
	<style>
	html, body {
	margin:0;
	padding:0;
	width: 100%;
	height: 100%;
	}
	#map {
	width: 100%;
	height: 100%;
	}
	#image {
	}
	h1 {
	font-family:sans-serif;
	line-height:40px
	}
	canvas {
	position:absolute;
	top:0;
	z-index: 10000;
	}
	.blurinator {
	position: absolute;
	top: 50px;
	right: 50px;
	z-index: 50000;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<button class="blurinator">blur me!</button>
	<div id="image"></div>
	<script>
	$(document).ready(function () {
	var map = L.map('map').setView([37.758773,-122.446747], 10);
	L.tileLayer('http://map.parks.stamen.com/{z}/{x}/{y}.png', {
	attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.',
	maxZoom: 18
	}).addTo(map);

	$('.blurinator').click(function () {
	if ($('#blurred').length === 0) {
	getBlurredBG(0, 0, $(document).width(), $(document).height(), 'blurred');
	}
	else if ($('#blurred').is(':visible')) {
	$('#blurred').fadeOut();
	}
	else {
	$('#blurred').fadeIn();
	}
	});
	});

	function getBlurredBG(x, y, w, h, id) {
	html2canvas(document.getElementById('map'), {
	useCORS: true,
	logging: true
	}).then(function (canvas) {
	process(canvas, x, y, w, h, id);
	});
	}

	function process(canvas, x, y, w, h, id) {
	var ocanvas = document.createElement('canvas');
	ocanvas.width = w;
	ocanvas.height = h;
	ocanvas.style.left = x + 'px';
	ocanvas.style.top = y + 'px';
	ocanvas.id = id;

	var ctx = ocanvas.getContext('2d');
	ctx.drawImage(canvas, x, y, w, h, 0, 0, w, h);

	StackBlur.canvasRGB(ocanvas, x, y, w, h, 24)

	document.body.appendChild(ocanvas);
	}
	</script>
	</body>
	</html>