├── .prettierignore
├── _config.yml
├── .gitignore
├── index.js
├── .babelrc
├── images
├── output.png
├── introduction.jpg
└── react-impro.png
├── src
├── index.js
├── utils
│ ├── build.js
│ ├── storage.js
│ ├── errorMsg.js
│ ├── getDimensions.js
│ ├── modes.js
│ ├── propsFactory.js
│ └── options.js
├── worker.js
├── validators
│ └── props.js
└── components
│ └── ProcessImage.js
├── .travis.yml
├── __tests__
├── __snapshots__
│ └── index.test.js.snap
├── options.test.js
└── index.test.js
├── public
├── index.html
└── App.js
├── webpack
├── webpack.config.dev.js
└── webpack.config.js
├── Docs
├── CONTRIBUTING.MD
├── README.md
└── Api.md
├── package.json
└── README.md
/.prettierignore:
--------------------------------------------------------------------------------
1 | /src/jimp.min.js
--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-cayman
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | build
3 | .npmignore
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./build/main.js');
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "react-app"
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/images/output.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nitin42/react-imgpro/HEAD/images/output.png
--------------------------------------------------------------------------------
/images/introduction.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nitin42/react-imgpro/HEAD/images/introduction.jpg
--------------------------------------------------------------------------------
/images/react-impro.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nitin42/react-imgpro/HEAD/images/react-impro.png
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import ProcessImage from './components/ProcessImage';
2 |
3 | export default ProcessImage;
4 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "6"
4 | notifications:
5 | email: false
6 | script:
7 | - npm run test
--------------------------------------------------------------------------------
/src/utils/build.js:
--------------------------------------------------------------------------------
1 | import root from 'window-or-global';
2 |
3 | let ROOT =
4 | root.Jimp !== undefined && typeof root.Jimp === 'function'
5 | ? root.Jimp
6 | : undefined;
7 |
8 | export default ROOT;
9 |
--------------------------------------------------------------------------------
/src/utils/storage.js:
--------------------------------------------------------------------------------
1 | const setItem = (key, value, store) =>
2 | store !== null ? store.setItem(key, value) : null;
3 |
4 | const getItem = (key, store) => (store !== null ? store.getItem(key) : null);
5 |
6 | const removeItem = (key, store) =>
7 | store !== null ? store.removeItem(key) : null;
8 |
9 | export { getItem, removeItem, setItem };
10 |
--------------------------------------------------------------------------------
/__tests__/__snapshots__/index.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`getDimension should fallback to default 1`] = `300`;
4 |
5 | exports[`getDimension should return the image height when attribute passed is 'height' 1`] = `300`;
6 |
7 | exports[`getDimension should return the image width when attribute passed is 'width' 1`] = `400`;
8 |
--------------------------------------------------------------------------------
/src/utils/errorMsg.js:
--------------------------------------------------------------------------------
1 | const noJimpInstance = `Browser build for Jimp not found. Place this in your index.html file and restart the server -
2 |
3 | `;
4 |
5 | const webWorkerInfo =
6 | 'For better performance, set disableWebWorker to false. This will keep your UI responsive as the image will be processed in a web worker.';
7 |
8 | export { noJimpInstance, webWorkerInfo };
9 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | React App
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/webpack/webpack.config.dev.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const webpack = require('webpack');
3 |
4 | module.exports = {
5 | entry: path.resolve(__dirname, '../public/App.js'),
6 | mode: 'development',
7 | output: {
8 | filename: 'bundle.js',
9 | path: path.resolve(__dirname),
10 | publicPath: '/'
11 | },
12 | module: {
13 | rules: [
14 | {
15 | test: /\.js$/,
16 | exclude: ['node_modules'],
17 | use: 'babel-loader'
18 | }
19 | ]
20 | }
21 | };
22 |
--------------------------------------------------------------------------------
/__tests__/options.test.js:
--------------------------------------------------------------------------------
1 | import renderer from 'react-test-renderer';
2 | import Jimp from 'jimp';
3 | import processImage from '../src/utils/options';
4 |
5 | describe('image options', () => {
6 | const image = 'http://365.unsplash.com/assets/paul-jarvis-9530891001e7f4ccfcef9f3d7a2afecd.jpg';
7 | let output = null;
8 |
9 | test('sanity check', () => {
10 | Jimp.read(image).then(image => {
11 | const output = processImage(image, { resize: { height: 300 } }, Jimp)
12 | expect(output.bitmap.height).toEqual(300);
13 | });
14 | });
15 | });
16 |
--------------------------------------------------------------------------------
/src/utils/getDimensions.js:
--------------------------------------------------------------------------------
1 | let getSize = (props, original, attr) => {
2 | if (props.resize !== undefined) return props.resize[attr];
3 | if (props.crop !== undefined) return props.crop[attr];
4 | if (props.contain !== undefined) return props.contain[attr];
5 | if (props.cover !== undefined) return props.cover[attr];
6 | if (props.scaleToFit !== undefined) return props.scaleToFit[attr];
7 | if (props.style !== undefined) return props.style[attr];
8 | if (props[attr] !== undefined) return parseInt(props[attr], 10);
9 |
10 | return original;
11 | };
12 |
13 | export default getSize;
14 |
--------------------------------------------------------------------------------
/src/utils/modes.js:
--------------------------------------------------------------------------------
1 | const RESIZE_MODES = {
2 | neighbor: 'RESIZE_NEAREST_NEIGHBOR',
3 | bilinear: 'RESIZE_BILINEAR',
4 | bicubic: 'RESIZE_BICUBIC',
5 | hermite: 'RESIZE_HERMITE',
6 | bezier: 'RESIZE_BEZIER'
7 | };
8 |
9 | const ALIGN_MODES = {
10 | horizontal_left: 'HORIZONTAL_ALIGN_LEFT',
11 | horizontal_center: 'HORIZONTAL_ALIGN_CENTER',
12 | horizontal_right: 'HORIZONTAL_ALIGN_RIGHT',
13 | vertical_top: 'VERTICAL_ALIGN_TOP',
14 | vertical_middle: 'VERTICAL_ALIGN_MIDDLE',
15 | vertical_bottom: 'VERTICAL_ALIGN_BOTTOM'
16 | };
17 |
18 | module.exports = {
19 | ALIGN_MODES,
20 | RESIZE_MODES
21 | };
22 |
--------------------------------------------------------------------------------
/src/worker.js:
--------------------------------------------------------------------------------
1 | import processImage from './utils/options';
2 | const defaultCdn = 'https://unpkg.com/jimp@0.6.0/browser/lib/jimp.min.js';
3 |
4 | export function process(data) {
5 | // how to ensure Jimp can work?
6 | return new Promise((resolve, reject) => {
7 | try {
8 | if (!Jimp) {
9 | }
10 | } catch (error) {
11 | const { customCdn } = data;
12 | const cdn = customCdn ? customCdn : defaultCdn;
13 | importScripts(cdn);
14 | }
15 |
16 | Jimp.read(data.image)
17 | .then(image => {
18 | processImage(image, data.props, Jimp).getBase64(
19 | Jimp.AUTO,
20 | (err, src) => {
21 | resolve({ src, err });
22 | }
23 | );
24 | })
25 | .catch(err => {
26 | reject(err);
27 | });
28 | });
29 | }
30 |
--------------------------------------------------------------------------------
/__tests__/index.test.js:
--------------------------------------------------------------------------------
1 | import renderer from 'react-test-renderer';
2 | import getSize from '../src/utils/getDimensions';
3 |
4 | describe('getDimension', () => {
5 | const inp = { resize: { height: 300, width: 400 }};
6 | const def = 300;
7 |
8 | test('should return the image height when attribute passed is \'height\' ', () => {
9 | const height = getSize(inp, def, 'height');
10 |
11 | expect(height).toMatchSnapshot();
12 | })
13 |
14 | test('should return the image width when attribute passed is \'width\' ', () => {
15 | const width = getSize(inp, def, 'width');
16 |
17 | expect(width).toMatchSnapshot();
18 | });
19 |
20 | test('should fallback to default', () => {
21 | const height = getSize({}, def, 'height');
22 |
23 | expect(height).toMatchSnapshot();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/Docs/CONTRIBUTING.MD:
--------------------------------------------------------------------------------
1 | # Contributing guide
2 |
3 | I'm excited to have you helping out. Thank you so much for your time 😄
4 |
5 | ### Contributing
6 |
7 | #### Understanding the codebase
8 | `react-imgpro` uses [Jimp](https://github.com/oliver-moran/jimp) for processing the images but will later extends it support for third party OpenGL libs. So before you start working on a PR, take a look at Jimp docs and it's features.
9 |
10 | > [This](https://github.com/nitin42/react-imgpro/tree/with-comments) branch includes comments for every function and module. This may help you in understanding the codebase more easily.
11 |
12 | #### Setting up the environment
13 |
14 | Considering you've forked and cloned the repo on your system, switch to the directory and install the dependencies.
15 |
16 | ```
17 | cd react-imgpro
18 | npm install
19 | ```
20 |
21 | #### Submitting pull requests
22 |
23 | * Create a new branch for the new feature: git checkout -b new-feature
24 | * Make your changes.
25 | * Test everything with `npm run test`.
26 | * Run `npm run lint` to check the syntax errors.
27 | * Commit your changes: git commit -m 'Added some new feature'
28 | * Push to the branch: git push origin new-feature
29 | * Submit a pull request with full remarks documenting your changes.
30 |
31 |
32 | That's it! I am excited to see your pull request.
33 |
--------------------------------------------------------------------------------
/webpack/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const webpack = require('webpack');
3 | const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
4 |
5 | const output = () => ({
6 | filename: '[name].js',
7 | path: path.resolve(__dirname, '../build'),
8 | publicPath: '/',
9 | libraryTarget: 'umd',
10 | globalObject: 'this'
11 | });
12 |
13 | const externals = () => ({
14 | 'browser-image-size': 'browser-image-size',
15 | react: 'react',
16 | 'prop-types': 'prop-types',
17 | 'react-progressive-image': 'react-progressive-image',
18 | 'window-or-global': 'window-or-global'
19 | });
20 |
21 | const jsLoader = () => ({
22 | test: /\.js$/,
23 | include: path.resolve(__dirname, '../src'),
24 | exclude: ['node_modules', 'public'],
25 | use: 'babel-loader'
26 | });
27 |
28 | const plugins = () => [
29 | new webpack.LoaderOptionsPlugin({
30 | minimize: true,
31 | debug: false
32 | }),
33 | new webpack.DefinePlugin({
34 | 'process.env.NODE_ENV': 'production'
35 | }),
36 | new webpack.optimize.ModuleConcatenationPlugin(),
37 | new UglifyJSPlugin()
38 | ];
39 |
40 | module.exports = {
41 | entry: path.resolve(__dirname, '../src/index.js'),
42 | mode: 'production',
43 | output: output(),
44 | target: 'web',
45 | externals: externals(),
46 | devtool: 'inline-source-map',
47 | module: {
48 | rules: [jsLoader()]
49 | },
50 | plugins: plugins()
51 | };
52 |
--------------------------------------------------------------------------------
/src/utils/propsFactory.js:
--------------------------------------------------------------------------------
1 | const filterPropsToListen = props => {
2 | const {
3 | resize,
4 | quality,
5 | greyscale,
6 | contain,
7 | cover,
8 | normalize,
9 | invert,
10 | opaque,
11 | sepia,
12 | dither565,
13 | scale,
14 | crop,
15 | scaleToFit,
16 | flip,
17 | rotate,
18 | brightness,
19 | contrast,
20 | fade,
21 | opacity,
22 | blur,
23 | posterize,
24 | colors,
25 | background
26 | } = props;
27 |
28 | return {
29 | resize,
30 | quality,
31 | greyscale,
32 | contain,
33 | cover,
34 | crop,
35 | normalize,
36 | invert,
37 | opaque,
38 | sepia,
39 | dither565,
40 | scale,
41 | scaleToFit,
42 | flip,
43 | rotate,
44 | brightness,
45 | contrast,
46 | fade,
47 | opacity,
48 | blur,
49 | posterize,
50 | colors,
51 | background
52 | };
53 | };
54 |
55 | const getImageProps = props => {
56 | const {
57 | image,
58 | resize,
59 | quality,
60 | greyscale,
61 | contain,
62 | cover,
63 | normalize,
64 | invert,
65 | opaque,
66 | sepia,
67 | dither565,
68 | scale,
69 | scaleToFit,
70 | flip,
71 | rotate,
72 | crop,
73 | brightness,
74 | contrast,
75 | fade,
76 | opacity,
77 | blur,
78 | posterize,
79 | colors,
80 | placeholder,
81 | processedImage,
82 | storage,
83 | disableWebWorker,
84 | disableRerender,
85 | customCdn,
86 | onProcessFinish,
87 | background,
88 | getImageRef,
89 | ...rest
90 | } = props;
91 |
92 | return rest;
93 | };
94 |
95 | export { filterPropsToListen, getImageProps };
96 |
--------------------------------------------------------------------------------
/public/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { render } from 'react-dom';
3 |
4 | import ProcessImage from '../src';
5 |
6 | const src = 'http://orscxqn8h.bkt.clouddn.com/18-3-3/943334.jpg';
7 |
8 | class App extends Component {
9 | state = {
10 | src: '',
11 | err: '',
12 | sepia: true,
13 | mixAmount: 10,
14 | isProcessing: false
15 | };
16 |
17 | render() {
18 | return (
19 |
20 |
{
26 | this.setState({
27 | isProcessing: false
28 | });
29 | }}
30 | colors={{
31 | mix: {
32 | color: 'mistyrose',
33 | amount: this.state.mixAmount
34 | }
35 | }}
36 | getImageRef={element => (this.image = element)}
37 | />
38 | {
41 | this.setState({
42 | sepia: !this.state.sepia,
43 | isProcessing: true
44 | });
45 | }}
46 | >
47 | test1
48 |
49 |
50 | {
53 | this.setState({
54 | mixAmount: this.state.mixAmount + 10,
55 | isProcessing: true
56 | });
57 | }}
58 | >
59 | test2
60 |
61 | {
63 | console.log(this.image);
64 | }}
65 | >
66 | log ImageRef
67 |
68 |
14 |
16 |
17 | ## Introduction
18 |
19 | `react-imgpro` is a image processing component for React. This component process an image with filters supplied as props and returns a [base64](https://en.wikipedia.org/wiki/Base64) image.
20 |
21 | **Example**
22 |
23 | ```jsx
24 |
25 | const mix = {
26 | color: 'mistyrose',
27 | amount: 10
28 | }
29 |
30 | class App extends React.Component {
31 | state = { src: '', err: null }
32 | render() {
33 | return (
34 | this.setState({ src, err, })}
41 | />
42 | )
43 | }
44 | }
45 | ```
46 |
47 |
48 |
50 |
51 | ## Motivation
52 |
53 |
54 |
56 |
57 | I was working on a project last month which involved a lot of image processing and I'd to rely on third party libraries. But before using them directly, I'd to learn different concepts in gl (shaders) and then try to implement them in React. The difficult part was not learning but it was the verbosity, boilerplate code and redundancy introduced by the libraries in the codebase. It was getting difficult to organise all the things 😞
58 |
59 | So I wanted a layer of abstraction which would make it easy to manipulate the colors of the image, applying filters and gl shaders efficiently with ease. And React's component based model was perfect for hiding all the implementation details in a component 😄
60 |
61 | ## Demo
62 |
63 |
64 |
66 |
67 | ## Install
68 |
69 | ```
70 | npm install react-imgpro
71 | ```
72 |
73 | This also depends on `react` so make sure you've installed it.
74 |
75 | OR
76 |
77 | The UMD build is also available via [jsDelivr](https://www.jsdelivr.com).
78 |
79 | ```
80 |
81 |
82 | ```
83 |
84 | ## Usage
85 |
86 | ```jsx
87 | import React from 'react';
88 | import ProcessImage from 'react-imgpro';
89 |
90 | class App extends React.Component {
91 | state = {
92 | src: '',
93 | err: null
94 | }
95 |
96 | render() {
97 | return (
98 | this.setState({ src, err})}
108 | />
109 | )
110 | }
111 | }
112 |
113 | ```
114 |
115 | ## Documentation
116 |
117 | See the detailed documentation [here](./Docs).
118 |
119 | ## SSR support ?
120 |
121 | Yes, `react-imgpro` supports SSR.
122 |
123 | ## Contributing
124 |
125 | [Contributing guide](https://github.com/nitin42/react-imgpro/blob/master/Docs/CONTRIBUTING.MD).
126 |
127 | ## Extra resources
128 |
129 | If you want to use blenders, plugins and perform event based calculations, try [CamanJS](http://camanjs.com/).
130 |
131 | ## License
132 |
133 | MIT
134 |
135 |
188 | {image =>
189 | this.processedImage(
190 | image,
191 | restProps,
192 | this.getDefaultImageSize(props),
193 | props.getImageRef
194 | )
195 | }
196 |
197 | );
198 |
199 | render() {
200 | const { src } = this.state;
201 | const restProps = getImageProps(this.props);
202 | return this.showImage(src, this.props, restProps);
203 | }
204 | }
205 |
206 | export default ProcessImage;
207 |
--------------------------------------------------------------------------------
/src/utils/options.js:
--------------------------------------------------------------------------------
1 | const { ALIGN_MODES, RESIZE_MODES } = require('./modes');
2 |
3 | function processImage(image, props, ROOT) {
4 | const {
5 | resize,
6 | quality,
7 | greyscale,
8 | contain,
9 | cover,
10 | normalize,
11 | invert,
12 | opaque,
13 | sepia,
14 | dither565,
15 | scale,
16 | scaleToFit,
17 | flip,
18 | rotate,
19 | brightness,
20 | contrast,
21 | fade,
22 | opacity,
23 | blur,
24 | posterize,
25 | crop,
26 | background
27 | } = props;
28 |
29 | function MODE(algorithm) {
30 | return ROOT[algorithm];
31 | }
32 |
33 | function getMode(prop, modes) {
34 | return prop !== undefined ? modes[prop.mode] : null;
35 | }
36 |
37 | function setMode(prop, modes, autoMode) {
38 | return MODE(getMode(prop, modes)) || autoMode;
39 | }
40 |
41 | const AUTOMEASURE = ROOT.AUTO;
42 |
43 | const setter = (value, fallbackTo) =>
44 | value !== undefined ? value : fallbackTo;
45 |
46 | image.__proto__.pass = function(image) {
47 | return image;
48 | };
49 |
50 | function setFilterOrForwardTheImage(filter, img, fn) {
51 | return filter ? img[fn]() : image.pass(img);
52 | }
53 |
54 | function scaleImageWithoutMode(prop, img, scaleMode) {
55 | return prop !== undefined && Object.keys(prop).length > 0
56 | ? img[scaleMode](
57 | prop.width,
58 | prop.height,
59 | setMode(prop, ALIGN_MODES, ROOT.HORIZONTAL_ALIGN_CENTER)
60 | )
61 | : image.pass(image);
62 | }
63 |
64 | function changeImageAppearence(prop, img, filter) {
65 | return prop !== undefined ? img[filter](prop) : image.pass(img);
66 | }
67 |
68 | function colorManipulation(props) {
69 | const setConfig = [];
70 |
71 | if (props.colors !== undefined) {
72 | Object.keys(props.colors).forEach(option => {
73 | const setAmountWithColor = ['mix', 'xor'];
74 |
75 | if (setAmountWithColor.includes(option)) {
76 | const schemaOne = {
77 | apply: option,
78 | params: [props.colors[option].color, props.colors[option].amount]
79 | };
80 |
81 | setConfig.push(schemaOne);
82 | }
83 |
84 | const schemaTwo = {
85 | apply: option,
86 | params: [props.colors[option]]
87 | };
88 |
89 | setConfig.push(schemaTwo);
90 | });
91 | return setConfig;
92 | }
93 |
94 | return [];
95 | }
96 |
97 | image.__proto__.resizeAnImage = function(image, resize) {
98 | return resize !== undefined && Object.keys(resize).length > 0
99 | ? image.resize(
100 | setter(resize.width, AUTOMEASURE),
101 | setter(resize.height, AUTOMEASURE),
102 | setMode(resize, RESIZE_MODES, ROOT.RESIZE_BILINEAR)
103 | )
104 | : image.pass(image);
105 | };
106 |
107 | image.__proto__.cropImage = function(image, crop) {
108 | return crop !== undefined
109 | ? image.crop(
110 | setter(crop.x, AUTOMEASURE),
111 | setter(crop.y, AUTOMEASURE),
112 | setter(crop.width, 0),
113 | setter(crop.height, 0)
114 | )
115 | : image.pass(image);
116 | };
117 |
118 | image.__proto__.changeImageQuality = function(image, quality) {
119 | return changeImageAppearence(quality, image, 'quality');
120 | };
121 |
122 | image.__proto__.applyGreyscale = function(image, greyscale) {
123 | return setFilterOrForwardTheImage(greyscale, image, 'greyscale');
124 | };
125 |
126 | image.__proto__.normalizeImage = function(image, normalize) {
127 | return setFilterOrForwardTheImage(normalize, image, 'normalize');
128 | };
129 |
130 | image.__proto__.invertImage = function(image, invert) {
131 | return setFilterOrForwardTheImage(invert, image, 'invert');
132 | };
133 |
134 | image.__proto__.opaqueImage = function(image, opaque) {
135 | return setFilterOrForwardTheImage(opaque, image, 'opaque');
136 | };
137 |
138 | image.__proto__.sepiaFilter = function(image, sepia) {
139 | return setFilterOrForwardTheImage(sepia, image, 'sepia');
140 | };
141 |
142 | image.__proto__.ditherFilter = function(image, dither565) {
143 | return setFilterOrForwardTheImage(dither565, image, 'dither565');
144 | };
145 |
146 | image.__proto__.scaleImage = function(image, scale) {
147 | return changeImageAppearence(scale, image, 'scale');
148 | };
149 |
150 | image.__proto__.scaleToFitImage = function(image, scaleToFit) {
151 | return scaleToFit !== undefined
152 | ? image.scaleToFit(
153 | setter(scaleToFit.width, AUTOMEASURE),
154 | setter(scaleToFit.height, AUTOMEASURE)
155 | )
156 | : image.pass(image);
157 | };
158 |
159 | image.__proto__.flipImage = function(image, flip) {
160 | return flip !== undefined
161 | ? image.flip(setter(flip.horizontal, false), setter(flip.vertical, false))
162 | : image.pass(image);
163 | };
164 |
165 | image.__proto__.rotateImage = function(image, rotate) {
166 | return rotate !== undefined
167 | ? image.rotate(
168 | setter(rotate.degree, 0),
169 | setMode(rotate, RESIZE_MODES, false)
170 | )
171 | : image.pass(image);
172 | };
173 |
174 | image.__proto__.applyBackground = function(image, background) {
175 | return background !== undefined
176 | ? image.background(background)
177 | : image.pass(image);
178 | };
179 |
180 | image.__proto__.changeBrightness = function(image, brightness) {
181 | return changeImageAppearence(brightness, image, 'brightness');
182 | };
183 |
184 | image.__proto__.changeContrast = function(image, contrast) {
185 | return changeImageAppearence(contrast, image, 'contrast');
186 | };
187 |
188 | image.__proto__.fadeImage = function(image, fade) {
189 | return changeImageAppearence(fade, image, 'fade');
190 | };
191 |
192 | image.__proto__.changeOpacity = function(image, opacity) {
193 | return changeImageAppearence(opacity, image, 'opacity');
194 | };
195 |
196 | image.__proto__.blurImage = function(image, blur) {
197 | return changeImageAppearence(blur, image, 'blur');
198 | };
199 |
200 | image.__proto__.posterizeImage = function(image, posterize) {
201 | return changeImageAppearence(posterize, image, 'posterize');
202 | };
203 |
204 | image.__proto__.containImage = function(image, contain) {
205 | return scaleImageWithoutMode(contain, image, 'contain');
206 | };
207 |
208 | image.__proto__.coverImage = function(image, cover) {
209 | return scaleImageWithoutMode(cover, image, 'cover');
210 | };
211 |
212 | return image
213 | .clone()
214 | .applyBackground(image, background)
215 | .resizeAnImage(image, resize)
216 | .changeImageQuality(image, quality)
217 | .applyGreyscale(image, greyscale)
218 | .normalizeImage(image, normalize)
219 | .invertImage(image, invert)
220 | .opaqueImage(image, opaque)
221 | .sepiaFilter(image, sepia)
222 | .ditherFilter(image, dither565)
223 | .scaleImage(image, scale)
224 | .scaleToFitImage(image, scaleToFit)
225 | .flipImage(image, flip)
226 | .rotateImage(image, rotate)
227 | .cropImage(image, crop)
228 | .changeBrightness(image, brightness)
229 | .changeContrast(image, contrast)
230 | .fadeImage(image, fade)
231 | .changeOpacity(image, opacity)
232 | .blurImage(image, blur)
233 | .posterizeImage(image, posterize)
234 | .coverImage(image, cover)
235 | .color(colorManipulation(props))
236 | .containImage(image, contain);
237 | }
238 |
239 | export default processImage;
240 |
--------------------------------------------------------------------------------
/Docs/Api.md:
--------------------------------------------------------------------------------
1 | # API Reference
2 |
3 | ## Component
4 |
5 | **ProcessImage**
6 |
7 | It takes an image, applies desired filters, resizes the image (if) and returns a base64 image.
8 |
9 | ```jsx
10 | this.setState({ src, err })}
14 | />
15 | ```
16 |
17 | It does not change the original image. It clones the supplied image and passes it to the filter chain to be processed.
18 |
19 | It uses [`react-progressive-image`](https://github.com/FormidableLabs/react-progressive-image) for placeholder image until the image is processed and displayed.
20 |
21 | By default, the image is processed in a web worker instead of main thread for better performance and responsive UI. You can disable this by setting the value of `disableWebWorker` to `true`.
22 |
23 | ## Props
24 |
25 | ### resize
26 |
27 | It takes image width, height and a resize mode.
28 |
29 | **Type** - `object`
30 |
31 | **Default** - `{ width: AUTO, height: AUTO, mode: 'bilinear' }`
32 |
33 | **resize modes**
34 |
35 | You can pass these values to `mode`
36 |
37 | * [neighbor](https://en.wikipedia.org/wiki/Image_scaling)
38 | * [bilinear](https://en.wikipedia.org/wiki/Image_scaling)
39 | * [bicubic](https://en.wikipedia.org/wiki/Image_scaling)
40 | * [hermite](https://en.wikipedia.org/wiki/Hermite_interpolation)
41 | * bezier
42 |
43 | **Example** -
44 |
45 | ```jsx
46 |
61 | ```
62 |
63 | ### quality
64 |
65 | It takes a number between `1` - `100` for the image quality.
66 |
67 | **Type** - `number`
68 |
69 | **Default** - `AUTO`
70 |
71 | **Example** -
72 |
73 | ```jsx
74 | Optionally, a resize mode can be passed. If `false` is passed as the second parameter, the image width and height will not be resized.
228 |
229 | ### background
230 |
231 | sets the color of any new pixels generated by the image. Will be visible when applying other values such as rotate.
232 |
233 | **Type** - `Hexidecimal rgba`,
234 |
235 | **Default** - `AUTO`
236 |
237 | **Example** -
238 |
239 | ```jsx
240 | {
480 | this.setState({
481 | isProcessing: false
482 | });
483 | }}
484 | />
485 | ```
486 |
487 | ### getImageRef
488 |
489 | **Type** - `function`
490 |
491 | **Example** -
492 |
493 | get image ref
494 |
495 | ```jsx
496 | this.image=image}
499 | />
500 | ```
501 |
--------------------------------------------------------------------------------
15 | 
49 | 
55 | 
65 | 
136 |
--------------------------------------------------------------------------------
/src/components/ProcessImage.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import ProgressiveImage from 'react-progressive-image';
3 | import size from 'browser-image-size';
4 | import work from 'webworkify-webpack';
5 | import root from 'window-or-global';
6 | import { filterPropsToListen, getImageProps } from '../utils/propsFactory';
7 | import getSize from '../utils/getDimensions';
8 | import { noJimpInstance, webWorkerInfo } from '../utils/errorMsg';
9 | import { setItem, getItem, removeItem } from '../utils/storage';
10 | import ROOT from '../utils/build';
11 | import MainPropTypes from '../validators/props';
12 | import worker from 'workerize-loader?inline!../worker';
13 | import processImage from '../utils/options';
14 |
15 | class ProcessImage extends Component {
16 | static propTypes = MainPropTypes;
17 |
18 | static defaultProps = {
19 | storage: true,
20 | greyscale: false,
21 | normalize: false,
22 | invert: false,
23 | opaque: false,
24 | sepia: false,
25 | dither565: false,
26 | disableWebWorker: false
27 | };
28 |
29 | state = {
30 | src: '',
31 | err: '',
32 | height: null,
33 | width: null
34 | };
35 |
36 | componentWillMount = () => {
37 | this.checkStorageSupport();
38 |
39 | if (typeof Worker !== 'undefined' && !this.props.disableWebWorker) {
40 | this.worker = worker();
41 | }
42 | };
43 |
44 | componentDidMount = () => {
45 | this.getOriginalImageSize(this.props);
46 |
47 | this.processInMainThreadOrInWebWorker(
48 | this.worker,
49 | this.props,
50 | this.myStorage
51 | );
52 | };
53 |
54 | componentDidUpdate = () => {
55 | if (this.props.image && !this.props.disableRerender) {
56 | this.processInMainThreadOrInWebWorker(
57 | this.worker,
58 | this.props,
59 | this.myStorage
60 | );
61 | }
62 | };
63 |
64 | componentWillUnmount = () => {
65 | this.worker !== null ? this.worker.terminate() : null;
66 |
67 | removeItem('placeholder', this.myStorage);
68 | };
69 |
70 | checkStorageSupport = () => {
71 | if (typeof Storage !== 'undefined' && this.props.storage) {
72 | return (this.myStorage = root.localStorage);
73 | } else if (!this.props.storage && typeof Storage !== 'undefined') {
74 | this.clearStorage();
75 | return (this.myStorage = null);
76 | }
77 |
78 | return (this.myStorage = null);
79 | };
80 |
81 | passPropsToParent = (props, src, err) =>
82 | props.processedImage !== undefined ? props.processedImage(src, err) : null;
83 |
84 | processInMainThreadOrInWebWorker = (worker, props, storageReference) => {
85 | if (typeof Worker !== 'undefined' && !props.disableWebWorker) {
86 | return this.processInWebWorker(worker, props, storageReference);
87 | } else {
88 | if (ROOT !== undefined && props.disableWebWorker) {
89 | console.info(webWorkerInfo);
90 | return this.processInMainThread(props);
91 | } else {
92 | return console.error(noJimpInstance);
93 | }
94 | }
95 | };
96 |
97 | clearStorage = () => root.localStorage.removeItem('placeholder');
98 |
99 | getOriginalImageSize = props => {
100 | size(props.image)
101 | .then(size => this.setState({ height: size.height, width: size.width }))
102 | .catch(() => {
103 | if (props.processedImage) {
104 | const err = new Error('Unable to get original size of image');
105 | props.processedImage('', err);
106 | }
107 | });
108 | };
109 |
110 | getDefaultImageSize = props => {
111 | const { height, width } = this.state;
112 |
113 | return {
114 | height: getSize(props, height, 'height'),
115 | width: getSize(props, width, 'width')
116 | };
117 | };
118 |
119 | myStorage = null;
120 |
121 | processInMainThread = props => {
122 | ROOT.read(props.image)
123 | .then(image => {
124 | processImage(image, props, ROOT).getBase64(ROOT.AUTO, (err, src) => {
125 | if (this.state.src !== src || this.state.err !== err) {
126 | this.setState({ src, err });
127 | this.passPropsToParent(props, src, err);
128 | if (typeof props.onProcessFinish === 'function') {
129 | props.onProcessFinish();
130 | }
131 | }
132 | });
133 | })
134 | .catch(err => {
135 | this.passPropsToParent(props, '', result.err);
136 | if (typeof props.onProcessFinish === 'function') {
137 | props.onProcessFinish();
138 | }
139 | return;
140 | });
141 | };
142 |
143 | processInWebWorker = async (worker, props, storageReference) => {
144 | if (worker !== null) {
145 | const result = await worker
146 | .process({
147 | props: filterPropsToListen(props),
148 | image: props.image,
149 | customCdn: props.customCdn
150 | })
151 | .catch(err => ({ err }));
152 |
153 | if (typeof result.src === 'undefined' && result.err) {
154 | this.passPropsToParent(props, '', result.err);
155 | if (typeof props.onProcessFinish === 'function') {
156 | props.onProcessFinish();
157 | }
158 | return;
159 | }
160 |
161 | if (result.src !== this.state.src || result.err !== this.state.err) {
162 | this.setState({ src: result.src, err: result.err });
163 | setItem('placeholder', result.src, storageReference);
164 | this.passPropsToParent(props, result.src, result.err);
165 | if (typeof props.onProcessFinish === 'function') {
166 | props.onProcessFinish();
167 | }
168 | }
169 | }
170 | };
171 |
172 | worker = null;
173 |
174 | processedImage = (image, restProps, style, getImageRef) => (
175 | 
92 |
93 | ### normalize
94 |
95 | normalize the channels in an image (contrast stretching). For example the images with poor contrast due to glare.
96 |
97 | **Type** - `boolean`
98 |
99 | **Default** - `false`
100 |
101 | **Example** -
102 |
103 | ```jsx
104 | 
108 |
109 | ### invert
110 |
111 | invert the image colors
112 |
113 | **Type** - `boolean`
114 |
115 | **Default** - `false`
116 |
117 | **Example** -
118 |
119 | ```jsx
120 | 
124 |
125 | ### opaque
126 |
127 | This sets the alpha channel to **opaque** for every pixel.
128 |
129 | **Type** - `boolean`
130 |
131 | **Default** - `false`
132 |
133 | **Example** -
134 |
135 | ```jsx
136 | 
154 |
155 | ### dither565 (similar to ninepatches class in Android)
156 |
157 | mix pixels of two colors
158 |
159 | **Type** - `boolean`
160 |
161 | **Default** - `false`
162 |
163 | **Example** -
164 |
165 | ```jsx
166 | 
170 |
171 | ### scale
172 |
173 | scale an image by a factor
174 |
175 | **Type** - `boolean`
176 |
177 | **Default** - `AUTO`
178 |
179 | **Example** -
180 |
181 | ```jsx
182 | 
316 |
317 | ### cover
318 |
319 | scale the image to the given width and height, some parts of the image may be clipped
320 |
321 | **Type** - `object`
322 |
323 | **Default** - `{}`
324 |
325 | **modes**
326 |
327 | * `horizontal_left`
328 | * `horizontal_center`
329 | * `horizontal_right`
330 | * `vertical_top`
331 | * `vertical_bottom`
332 | * `vertical_middle`
333 |
334 | **Example** -
335 |
336 | ```jsx
337 |