Skip to content

Instantly share code, notes, and snippets.

@robotnealan
Last active October 20, 2016 10:11
Show Gist options
  • Save robotnealan/71222474e663777ba98befe6bdb6edce to your computer and use it in GitHub Desktop.
Save robotnealan/71222474e663777ba98befe6bdb6edce to your computer and use it in GitHub Desktop.
blurBackground Method Pulled from the Proton Marionette Application
Show.RadioView = Marionette.LayoutView.extend({
blurBackground: function() {
if(whichAndroid() > 4.4 || whichAndroid() === false) {
const img = new Image();
const canvas = document.getElementById('dataCanvas');
const radius = 50;
// Make it work with CORS
img.crossOrigin = '';
img.src = this.imageURL;
// Wait till image loads
img.onload = (e) => {
// Setup image vars
let img_w = img.naturalWidth;
let img_h = img.naturalHeight;
let img_ratio = img_w / img_h;
let window_w = window.innerWidth;
let window_h = window.innerHeight;
let canvas_h = window_h;
let canvas_w = (window_h/img_h * img_w);
canvas.height = img_h;
canvas.width = img_w;
// I have a global Backbone “resize” event that I listen
// for in Marionette, but you can also listen manually here.
// $(window).on('resize', () => resizeCanvas(img_ratio));
StackBlur.image(img, canvas, radius, false);
resizeCanvas(img_ratio)
// Make the canvas visible once processing is done. I use a
// CSS3 transition to have it fade in after the class is added.
$(canvas).addClass('is-visible');
}
}
}
});
// resizeCanvas()
//
// Resizes the background canvas element to maintain img proportions
// while centering and stretching canvas to fill fullscreen.
let resizeCanvas = function(img_ratio) {
let window_w = window.innerWidth;
let window_h = window.innerHeight;
let window_ratio = window_w / window_h;
if (img_ratio > window_ratio) {
$('#dataCanvas').css('height', window_h).css('width', 'auto');
let canvas_w = $('#dataCanvas').width();
$('#dataCanvas').css('left', ((canvas_w - window_w)/2) * -1)
.css('top', 'auto');
} else if (img_ratio < window_ratio) {
$('#dataCanvas').css('height', 'auto')
.css('width', window_w);
let canvas_h = $('#dataCanvas').height();
$('#dataCanvas').css('left', 'auto')
.css('top', ((canvas_h - window_h)/2) * -1);
}
};
let whichAndroid = function() {
var userAgent = navigator.userAgent.toLowerCase();
var check = userAgent.match(/android\s([0-9\.]*)/);
return check ? check[1] : false;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment