From 5315d62d351c47b1b989a8cf3f652317607eb8c5 Mon Sep 17 00:00:00 2001 From: mai <168496714@qq.com> Date: Sat, 3 Mar 2018 11:48:05 +0800 Subject: [PATCH 1/9] Added re-render --- src/components/ProcessImage.js | 77 ++++++++++++++++++++-------------- src/utils/propsFactory.js | 1 + src/validators/props.js | 3 +- src/worker.js | 27 ++++++------ 4 files changed, 64 insertions(+), 44 deletions(-) diff --git a/src/components/ProcessImage.js b/src/components/ProcessImage.js index 182f8f6..2b776bc 100644 --- a/src/components/ProcessImage.js +++ b/src/components/ProcessImage.js @@ -1,16 +1,16 @@ -import React, { Component } from 'react'; -import ProgressiveImage from 'react-progressive-image'; -import size from 'browser-image-size'; -import work from 'webworkify-webpack'; -import root from 'window-or-global'; -import { filterPropsToListen, getImageProps } from '../utils/propsFactory'; -import getSize from '../utils/getDimensions'; -import { noJimpInstance, webWorkerInfo } from '../utils/errorMsg'; -import { setItem, getItem, removeItem } from '../utils/storage'; -import ROOT from '../utils/build'; -import MainPropTypes from '../validators/props'; - -const processImage = require('../utils/options'); +import React, { Component } from "react"; +import ProgressiveImage from "react-progressive-image"; +import size from "browser-image-size"; +import work from "webworkify-webpack"; +import root from "window-or-global"; +import { filterPropsToListen, getImageProps } from "../utils/propsFactory"; +import getSize from "../utils/getDimensions"; +import { noJimpInstance, webWorkerInfo } from "../utils/errorMsg"; +import { setItem, getItem, removeItem } from "../utils/storage"; +import ROOT from "../utils/build"; +import MainPropTypes from "../validators/props"; + +const processImage = require("../utils/options"); class ProcessImage extends Component { static propTypes = MainPropTypes; @@ -27,8 +27,8 @@ class ProcessImage extends Component { }; state = { - src: '', - err: '', + src: "", + err: "", height: null, width: null }; @@ -36,8 +36,8 @@ class ProcessImage extends Component { componentWillMount = () => { this.checkStorageSupport(); - if (typeof Worker !== 'undefined' && !this.props.disableWebWorker) { - this.worker = work(require.resolve('../worker.js')); + if (typeof Worker !== "undefined" && !this.props.disableWebWorker) { + this.worker = work(require.resolve("../worker.js")); // this.worker = new NewWorker(); this.sendPropsToWorker(this.props, this.worker); @@ -54,16 +54,26 @@ class ProcessImage extends Component { ); }; + componentDidUpdate = () => { + if (this.props.image && !this.props.disableRerender) { + if (typeof Worker !== "undefined" && !this.props.disableWebWorker) { + this.sendPropsToWorker(this.props, this.worker); + } else { + this.processInMainThread(this.props); + } + } + }; + componentWillUnmount = () => { this.worker !== null ? this.worker.terminate() : null; - removeItem('placeholder', this.myStorage); + removeItem("placeholder", this.myStorage); }; checkStorageSupport = () => { - if (typeof Storage !== 'undefined' && this.props.storage) { + if (typeof Storage !== "undefined" && this.props.storage) { return (this.myStorage = root.localStorage); - } else if (!this.props.storage && typeof Storage !== 'undefined') { + } else if (!this.props.storage && typeof Storage !== "undefined") { this.clearStorage(); return (this.myStorage = null); } @@ -75,7 +85,7 @@ class ProcessImage extends Component { props.processedImage !== undefined ? props.processedImage(src, err) : null; processInMainThreadOrInWebWorker = (worker, props, storageReference) => { - if (typeof Worker !== 'undefined' && !props.disableWebWorker) { + if (typeof Worker !== "undefined" && !props.disableWebWorker) { return this.processInWebWorker(worker, props, storageReference); } else { if (ROOT !== undefined && props.disableWebWorker) { @@ -87,7 +97,7 @@ class ProcessImage extends Component { } }; - clearStorage = () => root.localStorage.removeItem('placeholder'); + clearStorage = () => root.localStorage.removeItem("placeholder"); getOriginalImageSize = props => { size(props.image).then(size => @@ -99,8 +109,8 @@ class ProcessImage extends Component { const { height, width } = this.state; return { - height: getSize(props, height, 'height'), - width: getSize(props, width, 'width') + height: getSize(props, height, "height"), + width: getSize(props, width, "width") }; }; @@ -109,8 +119,10 @@ class ProcessImage extends Component { processInMainThread = props => { ROOT.read(props.image).then(image => { processImage(image, props, ROOT).getBase64(ROOT.AUTO, (err, src) => { - this.setState({ src, err }); - this.passPropsToParent(props, src, err); + if(this.state.src!==src || this.state.err!==err){ + this.setState({ src, err }); + this.passPropsToParent(props, src, err); + } }); }); }; @@ -118,9 +130,12 @@ class ProcessImage extends Component { processInWebWorker = (worker, props, storageReference) => { if (worker !== null) { worker.onmessage = e => { - this.setState({ src: e.data.src, err: e.data.err }); - setItem('placeholder', e.data.src, storageReference); - this.passPropsToParent(props, e.data.src, e.data.err); + // avoid loop + if (e.data.src !== this.state.src || e.data.err !== this.state.err) { + this.setState({ src: e.data.src, err: e.data.err }); + setItem("placeholder", e.data.src, storageReference); + this.passPropsToParent(props, e.data.src, e.data.err); + } }; } }; @@ -141,9 +156,9 @@ class ProcessImage extends Component { ); placeholderImage = image => - getItem('placeholder', this.myStorage) === null + getItem("placeholder", this.myStorage) === null ? image - : getItem('placeholder', this.myStorage); + : getItem("placeholder", this.myStorage); showImage = (img, props, restProps) => ( { processedImage, storage, disableWebWorker, + disableRerender, ...rest } = props; diff --git a/src/validators/props.js b/src/validators/props.js index 5c2f22a..b84572f 100644 --- a/src/validators/props.js +++ b/src/validators/props.js @@ -83,7 +83,8 @@ const MainPropTypes = { resize: resizePropType, sepia: PropTypes.bool, scale: PropTypes.number, - scaleToFit: scaleToFitPropType + scaleToFit: scaleToFitPropType, + disableRerender:PropTypes.bool, }; export default MainPropTypes; diff --git a/src/worker.js b/src/worker.js index 6935b35..1b78305 100644 --- a/src/worker.js +++ b/src/worker.js @@ -2,17 +2,20 @@ const processImage = require('./utils/options'); module.exports = function worker(self) { self.onmessage = function(e) { - importScripts( - 'https://cdn.rawgit.com/nitin42/5fef1095f281aa0cdf36ad6e5c460c9a/raw/359af525cb063ac002ebcf39274fb6c7d12e2f3e/jimp.min.js' - ); - Jimp.read(e.data.image).then(function(image) { - processImage(image, e.data.props, Jimp).getBase64(Jimp.AUTO, function( - err, - src - ) { - self.postMessage({ src, err }); - self.close(); - }); - }); + // how to ensure Jimp can work? + try { + if (!Jimp) {} + } catch (error) { + importScripts('https://cdn.rawgit.com/nitin42/5fef1095f281aa0cdf36ad6e5c460c9a/raw/359af525cb063ac002ebcf39274fb6c7d12e2f3e/jimp.min.js'); + } + Jimp.read(e.data.image).then(function(image) { + processImage(image, e.data.props, Jimp).getBase64(Jimp.AUTO, function( + err, + src + ) { + self.postMessage({ src, err }); + }); + }); + }; }; From da0e408e84d9b0a8a0574bfc19a8ca5398ff335b Mon Sep 17 00:00:00 2001 From: mai <168496714@qq.com> Date: Sat, 3 Mar 2018 11:51:25 +0800 Subject: [PATCH 2/9] Updated example and api --- Docs/Api.md | 3 +++ public/App.js | 38 +++++++++++++++++++++++++++++--------- 2 files changed, 32 insertions(+), 9 deletions(-) diff --git a/Docs/Api.md b/Docs/Api.md index c3fb690..0a1086a 100644 --- a/Docs/Api.md +++ b/Docs/Api.md @@ -410,5 +410,8 @@ disable the web worker and process the image in the main thread (not recommended If you disable the web worker, you will need to add [this](https://github.com/nitin42/react-imgpro/blob/master/src/jimp.min.js) file in your `index.html` in order to access `Jimp` instance. +### disableRerender +disable the process image in re-render by options changed (recommended use with worker) + diff --git a/public/App.js b/public/App.js index cae6fab..5423a96 100644 --- a/public/App.js +++ b/public/App.js @@ -7,8 +7,10 @@ const src = 'https://lh3.ggpht.com/rd52IsX4tX3ManFjv1bTM0eA21CblZ3_1tKul300NHNNq class App extends Component { state = { - src: '', - err: '' + src: "", + err: "", + sepia: true, + mixAmount: 10 }; render() { @@ -17,17 +19,35 @@ class App extends Component { this.setState({ src, err })} /> + + + ); } From 604447c97e24e6e3d824c1b8b9d4d6dc730c478a Mon Sep 17 00:00:00 2001 From: mai <168496714@qq.com> Date: Sat, 3 Mar 2018 11:57:32 +0800 Subject: [PATCH 3/9] Added cusomCdn option --- src/utils/propsFactory.js | 1 + src/validators/props.js | 1 + src/worker.js | 35 ++++++++++++++++++++--------------- 3 files changed, 22 insertions(+), 15 deletions(-) diff --git a/src/utils/propsFactory.js b/src/utils/propsFactory.js index 0de9505..46be977 100644 --- a/src/utils/propsFactory.js +++ b/src/utils/propsFactory.js @@ -77,6 +77,7 @@ const getImageProps = props => { storage, disableWebWorker, disableRerender, + customCdn, ...rest } = props; diff --git a/src/validators/props.js b/src/validators/props.js index b84572f..f7b7e5c 100644 --- a/src/validators/props.js +++ b/src/validators/props.js @@ -85,6 +85,7 @@ const MainPropTypes = { scale: PropTypes.number, scaleToFit: scaleToFitPropType, disableRerender:PropTypes.bool, + customCdn:PropTypes.string, }; export default MainPropTypes; diff --git a/src/worker.js b/src/worker.js index 1b78305..1537c8c 100644 --- a/src/worker.js +++ b/src/worker.js @@ -1,21 +1,26 @@ -const processImage = require('./utils/options'); +const processImage = require("./utils/options"); +const defaultCdn = + "https://cdn.rawgit.com/nitin42/5fef1095f281aa0cdf36ad6e5c460c9a/raw/359af525cb063ac002ebcf39274fb6c7d12e2f3e/jimp.min.js"; module.exports = function worker(self) { self.onmessage = function(e) { - // how to ensure Jimp can work? - try { - if (!Jimp) {} - } catch (error) { - importScripts('https://cdn.rawgit.com/nitin42/5fef1095f281aa0cdf36ad6e5c460c9a/raw/359af525cb063ac002ebcf39274fb6c7d12e2f3e/jimp.min.js'); - } - Jimp.read(e.data.image).then(function(image) { - processImage(image, e.data.props, Jimp).getBase64(Jimp.AUTO, function( - err, - src - ) { - self.postMessage({ src, err }); - }); - }); + // how to ensure Jimp can work? + try { + if (!Jimp) {} + } catch (error) { + const { customCdn } = e.data; + const cdn = customCdn ? customCdn : defaultCdn; + importScripts(cdn); + } + + Jimp.read(e.data.image).then(function(image) { + processImage(image, e.data.props, Jimp).getBase64(Jimp.AUTO, function( + err, + src + ) { + self.postMessage({ src, err }); + }); + }); }; }; From 251f0c5107db980ffa374401ab5969164527d597 Mon Sep 17 00:00:00 2001 From: mai <168496714@qq.com> Date: Sat, 3 Mar 2018 11:59:22 +0800 Subject: [PATCH 4/9] Updated Api --- Docs/Api.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/Docs/Api.md b/Docs/Api.md index 0a1086a..58bdebd 100644 --- a/Docs/Api.md +++ b/Docs/Api.md @@ -413,5 +413,26 @@ If you disable the web worker, you will need to add [this](https://github.com/ni ### disableRerender disable the process image in re-render by options changed (recommended use with worker) +**Type** - `boolean` + +**Default** - `false` + +**Example** - + +```jsx + +``` + +### customCdn +support you can add custom cdn for jimp + + +**Type** - `string` + +**Example** - + +```jsx + +``` From f50779423783368b552bdd654fa3f5743d51a708 Mon Sep 17 00:00:00 2001 From: mai <168496714@qq.com> Date: Sun, 1 Apr 2018 14:55:23 +0800 Subject: [PATCH 5/9] Fixed lint --- src/components/ProcessImage.js | 58 +++++++++++++++++----------------- src/validators/props.js | 4 +-- src/worker.js | 8 ++--- 3 files changed, 35 insertions(+), 35 deletions(-) diff --git a/src/components/ProcessImage.js b/src/components/ProcessImage.js index 2b776bc..ed776c5 100644 --- a/src/components/ProcessImage.js +++ b/src/components/ProcessImage.js @@ -1,16 +1,16 @@ -import React, { Component } from "react"; -import ProgressiveImage from "react-progressive-image"; -import size from "browser-image-size"; -import work from "webworkify-webpack"; -import root from "window-or-global"; -import { filterPropsToListen, getImageProps } from "../utils/propsFactory"; -import getSize from "../utils/getDimensions"; -import { noJimpInstance, webWorkerInfo } from "../utils/errorMsg"; -import { setItem, getItem, removeItem } from "../utils/storage"; -import ROOT from "../utils/build"; -import MainPropTypes from "../validators/props"; - -const processImage = require("../utils/options"); +import React, { Component } from 'react'; +import ProgressiveImage from 'react-progressive-image'; +import size from 'browser-image-size'; +import work from 'webworkify-webpack'; +import root from 'window-or-global'; +import { filterPropsToListen, getImageProps } from '../utils/propsFactory'; +import getSize from '../utils/getDimensions'; +import { noJimpInstance, webWorkerInfo } from '../utils/errorMsg'; +import { setItem, getItem, removeItem } from '../utils/storage'; +import ROOT from '../utils/build'; +import MainPropTypes from '../validators/props'; + +const processImage = require('../utils/options'); class ProcessImage extends Component { static propTypes = MainPropTypes; @@ -27,8 +27,8 @@ class ProcessImage extends Component { }; state = { - src: "", - err: "", + src: '', + err: '', height: null, width: null }; @@ -36,8 +36,8 @@ class ProcessImage extends Component { componentWillMount = () => { this.checkStorageSupport(); - if (typeof Worker !== "undefined" && !this.props.disableWebWorker) { - this.worker = work(require.resolve("../worker.js")); + if (typeof Worker !== 'undefined' && !this.props.disableWebWorker) { + this.worker = work(require.resolve('../worker.js')); // this.worker = new NewWorker(); this.sendPropsToWorker(this.props, this.worker); @@ -56,7 +56,7 @@ class ProcessImage extends Component { componentDidUpdate = () => { if (this.props.image && !this.props.disableRerender) { - if (typeof Worker !== "undefined" && !this.props.disableWebWorker) { + if (typeof Worker !== 'undefined' && !this.props.disableWebWorker) { this.sendPropsToWorker(this.props, this.worker); } else { this.processInMainThread(this.props); @@ -67,13 +67,13 @@ class ProcessImage extends Component { componentWillUnmount = () => { this.worker !== null ? this.worker.terminate() : null; - removeItem("placeholder", this.myStorage); + removeItem('placeholder', this.myStorage); }; checkStorageSupport = () => { - if (typeof Storage !== "undefined" && this.props.storage) { + if (typeof Storage !== 'undefined' && this.props.storage) { return (this.myStorage = root.localStorage); - } else if (!this.props.storage && typeof Storage !== "undefined") { + } else if (!this.props.storage && typeof Storage !== 'undefined') { this.clearStorage(); return (this.myStorage = null); } @@ -85,7 +85,7 @@ class ProcessImage extends Component { props.processedImage !== undefined ? props.processedImage(src, err) : null; processInMainThreadOrInWebWorker = (worker, props, storageReference) => { - if (typeof Worker !== "undefined" && !props.disableWebWorker) { + if (typeof Worker !== 'undefined' && !props.disableWebWorker) { return this.processInWebWorker(worker, props, storageReference); } else { if (ROOT !== undefined && props.disableWebWorker) { @@ -97,7 +97,7 @@ class ProcessImage extends Component { } }; - clearStorage = () => root.localStorage.removeItem("placeholder"); + clearStorage = () => root.localStorage.removeItem('placeholder'); getOriginalImageSize = props => { size(props.image).then(size => @@ -109,8 +109,8 @@ class ProcessImage extends Component { const { height, width } = this.state; return { - height: getSize(props, height, "height"), - width: getSize(props, width, "width") + height: getSize(props, height, 'height'), + width: getSize(props, width, 'width') }; }; @@ -119,7 +119,7 @@ class ProcessImage extends Component { processInMainThread = props => { ROOT.read(props.image).then(image => { processImage(image, props, ROOT).getBase64(ROOT.AUTO, (err, src) => { - if(this.state.src!==src || this.state.err!==err){ + if (this.state.src !== src || this.state.err !== err) { this.setState({ src, err }); this.passPropsToParent(props, src, err); } @@ -133,7 +133,7 @@ class ProcessImage extends Component { // avoid loop if (e.data.src !== this.state.src || e.data.err !== this.state.err) { this.setState({ src: e.data.src, err: e.data.err }); - setItem("placeholder", e.data.src, storageReference); + setItem('placeholder', e.data.src, storageReference); this.passPropsToParent(props, e.data.src, e.data.err); } }; @@ -156,9 +156,9 @@ class ProcessImage extends Component { ); placeholderImage = image => - getItem("placeholder", this.myStorage) === null + getItem('placeholder', this.myStorage) === null ? image - : getItem("placeholder", this.myStorage); + : getItem('placeholder', this.myStorage); showImage = (img, props, restProps) => ( Date: Mon, 2 Apr 2018 21:00:09 +0800 Subject: [PATCH 6/9] Added onPressFinish callback --- src/components/ProcessImage.js | 6 ++++++ src/utils/propsFactory.js | 1 + src/validators/props.js | 3 ++- 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/ProcessImage.js b/src/components/ProcessImage.js index ed776c5..fc2b95d 100644 --- a/src/components/ProcessImage.js +++ b/src/components/ProcessImage.js @@ -122,6 +122,9 @@ class ProcessImage extends Component { if (this.state.src !== src || this.state.err !== err) { this.setState({ src, err }); this.passPropsToParent(props, src, err); + if (typeof props.onProcessFinish === 'function') { + onProcessFinish(); + } } }); }); @@ -135,6 +138,9 @@ class ProcessImage extends Component { this.setState({ src: e.data.src, err: e.data.err }); setItem('placeholder', e.data.src, storageReference); this.passPropsToParent(props, e.data.src, e.data.err); + if (typeof props.onProcessFinish === 'function') { + onProcessFinish(); + } } }; } diff --git a/src/utils/propsFactory.js b/src/utils/propsFactory.js index 46be977..5d7868b 100644 --- a/src/utils/propsFactory.js +++ b/src/utils/propsFactory.js @@ -78,6 +78,7 @@ const getImageProps = props => { disableWebWorker, disableRerender, customCdn, + onProcessFinish, ...rest } = props; diff --git a/src/validators/props.js b/src/validators/props.js index 8b8df00..127746f 100644 --- a/src/validators/props.js +++ b/src/validators/props.js @@ -85,7 +85,8 @@ const MainPropTypes = { scale: PropTypes.number, scaleToFit: scaleToFitPropType, disableRerender: PropTypes.bool, - customCdn: PropTypes.string + customCdn: PropTypes.string, + onProcessFinish: PropTypes.func }; export default MainPropTypes; From 8871bfdd509d726858a6a82faf1a8c71292a0178 Mon Sep 17 00:00:00 2001 From: mai <168496714@qq.com> Date: Mon, 2 Apr 2018 22:56:01 +0800 Subject: [PATCH 7/9] Fixed typo --- src/components/ProcessImage.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/ProcessImage.js b/src/components/ProcessImage.js index fc2b95d..ef6dcf3 100644 --- a/src/components/ProcessImage.js +++ b/src/components/ProcessImage.js @@ -123,7 +123,7 @@ class ProcessImage extends Component { this.setState({ src, err }); this.passPropsToParent(props, src, err); if (typeof props.onProcessFinish === 'function') { - onProcessFinish(); + props.onProcessFinish(); } } }); @@ -139,7 +139,7 @@ class ProcessImage extends Component { setItem('placeholder', e.data.src, storageReference); this.passPropsToParent(props, e.data.src, e.data.err); if (typeof props.onProcessFinish === 'function') { - onProcessFinish(); + props.onProcessFinish(); } } }; @@ -180,7 +180,6 @@ class ProcessImage extends Component { render() { const { src } = this.state; const restProps = getImageProps(this.props); - return this.showImage(src, this.props, restProps); } } From b134692ba6de51108f2b1f14c16279a83a04dd34 Mon Sep 17 00:00:00 2001 From: mai <168496714@qq.com> Date: Thu, 5 Apr 2018 21:07:25 +0800 Subject: [PATCH 8/9] Updated example --- .gitignore | 3 +-- public/App.js | 35 ++++++++++++++++++++++------------- 2 files changed, 23 insertions(+), 15 deletions(-) diff --git a/.gitignore b/.gitignore index 4152a05..b7dab5e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,2 @@ node_modules -build -public \ No newline at end of file +build \ No newline at end of file diff --git a/public/App.js b/public/App.js index 5423a96..46799cf 100644 --- a/public/App.js +++ b/public/App.js @@ -1,16 +1,17 @@ import React, { Component } from 'react'; import { render } from 'react-dom'; -import ProcessImage from '../build/main.js'; +import ProcessImage from '../src'; -const src = 'https://lh3.ggpht.com/rd52IsX4tX3ManFjv1bTM0eA21CblZ3_1tKul300NHNNqYDoXr-x3qwuiYbF_Ae450RX=h900'; +const src = 'http://orscxqn8h.bkt.clouddn.com/18-3-3/943334.jpg'; class App extends Component { state = { - src: "", - err: "", + src: '', + err: '', sepia: true, - mixAmount: 10 + mixAmount: 10, + isProcessing: false }; render() { @@ -18,21 +19,27 @@ class App extends Component {
{ + this.setState({ + isProcessing: false + }); + }} colors={{ mix: { - color: "mistyrose", + color: 'mistyrose', amount: this.state.mixAmount } }} />