From 71ab7e4113079e929f122f1ba959cba8e9da872f Mon Sep 17 00:00:00 2001
From: Mikael Finstad <finstaden@gmail.com>
Date: Thu, 24 Sep 2020 22:06:42 +0200
Subject: [PATCH] pull out blurImage functionality

---
 sources/fabric.js                    | 15 +++++++++++++++
 sources/fabric/fabricFrameSources.js | 11 ++---------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/sources/fabric.js b/sources/fabric.js
index f43a27a..6c30ee8 100644
--- a/sources/fabric.js
+++ b/sources/fabric.js
@@ -112,6 +112,20 @@ function registerFont(...args) {
   fabric.nodeCanvas.registerFont(...args);
 }
 
+function blurImage({ mutableImg, width, height }) {
+  // eslint-disable-next-line no-param-reassign
+  mutableImg.filters = [
+    // It is much faster on large images to first resize, but quality is almost the same
+    new fabric.Image.filters.Resize({ scaleX: 0.1, scaleY: 0.1 }),
+    new fabric.Image.filters.Blur({ blur: 0.1 }),
+  ];
+  mutableImg.applyFilters();
+
+  // Resize it to fit
+  mutableImg.setOptions({ scaleX: width / mutableImg.width, scaleY: height / mutableImg.height });
+}
+
+
 module.exports = {
   registerFont,
   createFabricFrameSource,
@@ -122,4 +136,5 @@ module.exports = {
   rgbaToFabricImage,
   fabricCanvasToFabricImage,
   getNodeCanvasFromFabricCanvas,
+  blurImage,
 };
diff --git a/sources/fabric/fabricFrameSources.js b/sources/fabric/fabricFrameSources.js
index a53d2e0..27f32c0 100644
--- a/sources/fabric/fabricFrameSources.js
+++ b/sources/fabric/fabricFrameSources.js
@@ -4,6 +4,7 @@ const fileUrl = require('file-url');
 const { getRandomGradient, getRandomColors } = require('../../colors');
 const { easeOutExpo, easeInOutCubic } = require('../../transitions');
 const { getPositionProps, getFrameByKeyFrames, isUrl } = require('../../util');
+const { blurImage } = require('../fabric');
 
 // http://fabricjs.com/kitchensink
 
@@ -38,15 +39,7 @@ async function imageFrameSource({ verbose, params, width, height }) {
   if (resizeMode === 'contain-blur') {
     blurredImg = getImg();
     if (verbose) console.log('Blurring background');
-    blurredImg.filters = [
-      // It is much faster on large images to first resize, but quality is almost the same
-      new fabric.Image.filters.Resize({ scaleX: 0.1, scaleY: 0.1 }),
-      new fabric.Image.filters.Blur({ blur: 0.1 }),
-    ];
-    blurredImg.applyFilters();
-
-    // Resize it to fit
-    blurredImg.setOptions({ scaleX: width / blurredImg.width, scaleY: height / blurredImg.height });
+    blurImage({ mutableImg: blurredImg, width, height });
   }
 
   async function onRender(progress, canvas) {