Add Shadow Plugin

README.md

@@ -43,9 +43,11 @@ API documentation can be found in the main [jimp package](./packages/jimp)
 ## Extra Plugins
 
 - [circle](./packages/plugin-circle) - Creates a circle out of an image.
+- [shadow](./packages/plugin-circle) - Creates a shadow on an image.
 - [fisheye](./packages/plugin-fisheye) - Apply a fisheye effect to an image.
 - [threshold](./packages/plugin-threshold) - Lighten an image. Good for scanned drawing and signatures.
 
+
 :rocket: If you want to add your plugins to this list make a PR! :rocket:
 
 ## Custom Jimp

packages/plugin-shadow/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Oliver Moran
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/plugin-shadow/README.md

@@ -0,0 +1,32 @@
+<div align="center">
+  <a href="https://intuit.github.io/Ignite/">
+    <img width="200" height="200"
+      src="https://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-11/256/crayon.png">
+  </a>
+  <h1>@jimp/plugin-shadow</h1>
+  <p>Creates a shadow on an image.</p>
+</div>
+
+## Usage
+
+- @param {function(Error, Jimp)} options (optional)
+  - opacity - opacity of the shadow between 0 and 1
+  - size,- of the shadow
+  - blur - how blurry the shadow is
+  - x - x position of shadow
+  - y - y position of shadow
+- @param {function(Error, Jimp)} cb (optional) a callback for when complete
+
+```js
+import jimp from 'jimp';
+
+async function main() {
+  const image = await jimp.read('test/image.png');
+
+  image.boxShadow();
+  // or
+  image.boxShadow({ opacity: 0.8, size: 1.2, blur: 10, x: -75, y: -75 });
+}
+
+main();
+```

packages/plugin-shadow/babel.config.js

@@ -0,0 +1,38 @@
+module.exports = api => {
+  api.cache(true);
+
+  return {
+    presets: [
+      [
+        '@babel/env',
+        {
+          useBuiltIns: 'usage'
+        }
+      ]
+    ],
+
+    plugins: [
+      '@babel/proposal-class-properties',
+      '@babel/syntax-object-rest-spread',
+      process.env.BABEL_ENV !== 'module' && 'add-module-exports',
+      [
+        'transform-inline-environment-variables',
+        { include: ['BABEL_ENV', 'ENV'] }
+      ]
+    ].filter(Boolean),
+
+    env: {
+      test: {
+        plugins: ['istanbul']
+      },
+      development: {
+        plugins: [process.env.ENV !== 'browser' && 'source-map-support'].filter(
+          Boolean
+        )
+      },
+      module: {
+        presets: [['@babel/env', { modules: false }]]
+      }
+    }
+  };
+};

packages/plugin-shadow/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@jimp/plugin-shadow",
+  "version": "0.4.0",
+  "description": "Creates a shadow on an image.",
+  "main": "dist/index.js",
+  "module": "es/index.js",
+  "scripts": {
+    "test": "cross-env BABEL_ENV=test mocha --require @babel/register",
+    "test:watch": "npm run test -- --reporter min --watch",
+    "test:coverage": "nyc npm run test",
+    "build": "npm run build:node:production && npm run build:module",
+    "build:watch": "npm run build:node:debug -- -- --watch --verbose",
+    "build:debug": "npm run build:node:debug",
+    "build:module": "cross-env BABEL_ENV=module babel src -d es --source-maps --config-file ../../babel.config.js",
+    "build:node": "babel src -d dist --source-maps --config-file ../../babel.config.js",
+    "build:node:debug": "cross-env BABEL_ENV=development npm run build:node",
+    "build:node:production": "cross-env BABEL_ENV=production npm run build:node"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@jimp/utils": "^0.4.0",
+    "core-js": "^2.5.7"
+  },
+  "peerDependencies": {
+    "@jimp/custom": ">=0.3.5",
+    "@jimp/plugin-resize": ">=0.3.5",
+    "@jimp/plugin-blur": ">=0.3.5"
+  },
+  "devDependencies": {
+    "@jimp/custom": "^0.4.0",
+    "@jimp/plugin-resize": "^0.4.0",
+    "@jimp/plugin-blur": "^0.4.0",
+    "@jimp/test-utils": "^0.4.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/plugin-shadow/src/index.js

@@ -0,0 +1,64 @@
+import { isNodePattern } from '@jimp/utils';
+
+/**
+ * Creates a circle out of an image.
+ * @param {function(Error, Jimp)} options (optional)
+ * opacity - opacity of the shadow between 0 and 1
+ * size,- of the shadow
+ * blur - how blurry the shadow is
+ * x- x position of shadow
+ * y - y position of shadow
+ * @param {function(Error, Jimp)} cb (optional) a callback for when complete
+ * @returns {Jimp} this for chaining of methods
+ */
+export default () => ({
+  shadow(options = {}, cb) {
+    if (typeof options === 'function') {
+      cb = options;
+      options = {};
+    }
+
+    const { opacity = 0.7, size = 1.1, x = -25, y = 25, blur = 5 } = options;
+
+    // clone the image
+    const orig = this.clone();
+    const shadow = this.clone();
+
+    // turn all it's pixels black
+    shadow.scan(
+      0,
+      0,
+      shadow.bitmap.width,
+      shadow.bitmap.height,
+      (x, y, idx) => {
+        shadow.bitmap.data[idx] = 0x00;
+        shadow.bitmap.data[idx + 1] = 0x00;
+        shadow.bitmap.data[idx + 2] = 0x00;
+        // up the opacity a little,
+        shadow.bitmap.data[idx + 3] = shadow.constructor.limit255(
+          shadow.bitmap.data[idx + 3] * opacity
+        );
+
+        this.bitmap.data[idx] = 0x00;
+        this.bitmap.data[idx + 1] = 0x00;
+        this.bitmap.data[idx + 2] = 0x00;
+        this.bitmap.data[idx + 3] = 0x00;
+      }
+    );
+
+    // enlarge it. This creates a "shadow".
+    shadow
+      .resize(shadow.bitmap.width * size, shadow.bitmap.height * size)
+      .blur(blur);
+
+    // Then blit the "shadow" onto the background and the image on top of that.
+    this.composite(shadow, x, y);
+    this.composite(orig, 0, 0);
+
+    if (isNodePattern(cb)) {
+      cb.call(this, null, this);
+    }
+
+    return this;
+  }
+});

packages/plugin-shadow/test/shadow.js

@@ -0,0 +1,32 @@
+import { Jimp, mkJGD, getTestDir } from '@jimp/test-utils';
+import configure from '@jimp/custom';
+import resize from '@jimp/plugin-resize';
+import blur from '@jimp/plugin-blur';
+
+import shadow from '../src';
+
+const jimp = configure({ plugins: [shadow, resize, blur] }, Jimp);
+
+describe('Shadow', () => {
+  it('creates a shadow', async () => {
+    const expectedImg = await jimp.read(
+      getTestDir(__dirname) + '/images/shadow.png'
+    );
+    const testImage = await jimp.read(
+      mkJGD(
+        '          ',
+        '    ◆◆    ',
+        '   ◆▦▦◆   ',
+        '  ◆▦▦▦▦◆  ',
+        '   ◆▦▦◆   ',
+        '    ◆◆    ',
+        '          '
+      )
+    );
+
+    testImage
+      .shadow({ x: -1, y: 1, blur: 1 })
+      .write('shadow.png')
+      .bitmap.data.should.be.deepEqual(expectedImg.bitmap.data);
+  });
+});