blurBackground Method Pulled from the Proton Marionette Application

blurBackground.js

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;
};