adding background color option

Author: Jack Rimell

Docs/Api.md

@@ -226,6 +226,20 @@ rotate the image
 
 > Optionally, a resize mode can be passed. If `false` is passed as the second parameter, the image width and height will not be resized.
 
+### background
+
+sets the color of any new pixels generated by the image. Will be visible when applying other values such as rotate.
+
+**Type** - `Hexidecimal rgba`,
+
+**Default** - `AUTO`
+
+**Example** -
+
+```jsx
+<ProcessImage image={image} background={0x00ff001c} />
+```
+
 ### brightness
 
 change the brightness level of an image. It takes value from `-1` to `1`.

src/utils/options.js

@@ -22,7 +22,8 @@ function processImage(image, props, ROOT) {
     opacity,
     blur,
     posterize,
-    crop
+    crop,
+    background
   } = props;
 
   function MODE(algorithm) {
@@ -170,6 +171,12 @@ function processImage(image, props, ROOT) {
       : image.pass(image);
   };
 
+  image.__proto__.applyBackground = function(image, background) {
+    return background !== undefined
+      ? image.background(background)
+      : image.pass(image);
+  };
+
   image.__proto__.changeBrightness = function(image, brightness) {
     return changeImageAppearence(brightness, image, 'brightness');
   };
@@ -204,6 +211,7 @@ function processImage(image, props, ROOT) {
 
   return image
     .clone()
+    .applyBackground(image, background)
     .resizeAnImage(image, resize)
     .changeImageQuality(image, quality)
     .applyGreyscale(image, greyscale)

src/utils/propsFactory.js

@@ -21,7 +21,8 @@ const filterPropsToListen = props => {
     opacity,
     blur,
     posterize,
-    colors
+    colors,
+    background
   } = props;
 
   return {
@@ -46,7 +47,8 @@ const filterPropsToListen = props => {
     opacity,
     blur,
     posterize,
-    colors
+    colors,
+    background
   };
 };
 
@@ -82,6 +84,7 @@ const getImageProps = props => {
     disableRerender,
     customCdn,
     onProcessFinish,
+    background,
     ...rest
   } = props;