From edaf39dfefb71a65dd05445025eaa52c5fa46f48 Mon Sep 17 00:00:00 2001 From: Vadim Fedorov Date: Thu, 5 Jul 2018 01:55:28 +0700 Subject: [PATCH] add lib; --- lib/CanvasController.js | 118 ++++++++++++++++++++++++++++++++++++ lib/Const.js | 1 + lib/index.js | 129 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 248 insertions(+) create mode 100644 lib/CanvasController.js create mode 100644 lib/Const.js create mode 100644 lib/index.js diff --git a/lib/CanvasController.js b/lib/CanvasController.js new file mode 100644 index 0000000..dc22618 --- /dev/null +++ b/lib/CanvasController.js @@ -0,0 +1,118 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + +var CanvasController = function (_PureComponent) { + _inherits(CanvasController, _PureComponent); + + function CanvasController() { + _classCallCheck(this, CanvasController); + + return _possibleConstructorReturn(this, (CanvasController.__proto__ || Object.getPrototypeOf(CanvasController)).apply(this, arguments)); + } + + _createClass(CanvasController, [{ + key: 'componentDidMount', + value: function componentDidMount() { + this.getImageData(); + } + }, { + key: 'getCanvasSideSizes', + value: function getCanvasSideSizes(imgElem) { + var sideSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Math.max(imgElem.naturalWidth, imgElem.naturalHeight); + var width = imgElem.naturalWidth, + height = imgElem.naturalHeight; + + var widthIsBigger = width > height; + + return { + width: widthIsBigger ? sideSize : sideSize * (width / height), + height: widthIsBigger ? sideSize * (height / width) : sideSize + }; + } + }, { + key: 'getImageData', + value: function getImageData() { + if (!this.props.imgElem) { + console.error('CanvasController: no imgElem!'); + + return; + } + + if (this.props.sideSize <= 0) { + console.error('CanvasController: sideSize can\'t be lower or equal to zero!'); + + return; + } + + var _props = this.props, + imgElem = _props.imgElem, + sideSize = _props.sideSize, + onImageData = _props.onImageData; + + var _getCanvasSideSizes = this.getCanvasSideSizes(imgElem, sideSize), + width = _getCanvasSideSizes.width, + height = _getCanvasSideSizes.height; + + var ctx = this.canvas.getContext("2d"); + var imageData = []; + + this.canvas = Object.assign(this.canvas, { width: width, height: height }); + + ctx.clearRect(0, 0, width, height); + ctx.drawImage(imgElem, 0, 0, width, height); + + try { + imageData = ctx.getImageData(0, 0, width, height).data; + } catch (e) { + console.error('CanvasController: catch error on getImageData!', e); + } + + onImageData(imageData); + } + }, { + key: 'render', + value: function render() { + var _this2 = this; + + return _react2.default.createElement('canvas', { + ref: function ref(canvas) { + return _this2.canvas = canvas; + } + }); + } + }]); + + return CanvasController; +}(_react.PureComponent); + +CanvasController.propTypes = { + sideSize: _propTypes2.default.number, + imgElem: _propTypes2.default.instanceOf(Element).isRequired, + onImageData: _propTypes2.default.func +}; +CanvasController.defaultProps = { + imgElem: null, + onImageData: function onImageData() {} +}; +exports.default = CanvasController; \ No newline at end of file diff --git a/lib/Const.js b/lib/Const.js new file mode 100644 index 0000000..9a390c3 --- /dev/null +++ b/lib/Const.js @@ -0,0 +1 @@ +"use strict"; \ No newline at end of file diff --git a/lib/index.js b/lib/index.js new file mode 100644 index 0000000..290ef87 --- /dev/null +++ b/lib/index.js @@ -0,0 +1,129 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _CanvasController = require('./CanvasController'); + +var _CanvasController2 = _interopRequireDefault(_CanvasController); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + +var ReactImageParser = function (_PureComponent) { + _inherits(ReactImageParser, _PureComponent); + + function ReactImageParser() { + var _ref; + + _classCallCheck(this, ReactImageParser); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + var _this = _possibleConstructorReturn(this, (_ref = ReactImageParser.__proto__ || Object.getPrototypeOf(ReactImageParser)).call.apply(_ref, [this].concat(args))); + + var img = _this.props.img; + + + _this.state = { + img: img, + style: { display: 'none' } + }; + + _this.onImgLoad = _this.onImgLoad.bind(_this); + _this.onImgError = _this.onImgError.bind(_this); + _this.imageParsed = _this.imageParsed.bind(_this); + return _this; + } + + _createClass(ReactImageParser, [{ + key: 'imageParsed', + value: function imageParsed() { + var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; + + this.props.onImageParsed(data); + this.setState({ + isImageParsed: true + }); + } + }, { + key: 'onImgLoad', + value: function onImgLoad(e) { + this.setState({ + imgElem: e.target + }); + } + }, { + key: 'onImgError', + value: function onImgError(src) { + return function () { + return console.error('react-image-parser: error on load image "' + src + '"'); + }; + } + }, { + key: 'render', + value: function render() { + var _props = this.props, + maxImgSideSize = _props.maxImgSideSize, + onImageParsed = _props.onImageParsed; + var _state = this.state, + img = _state.img, + imgElem = _state.imgElem, + isImageParsed = _state.isImageParsed; + + + if (isImageParsed) { + return null; + } + + var shouldParseImage = typeof onImageParsed === 'function' && !!imgElem; + + return _react2.default.createElement( + 'div', + { style: this.state.style }, + shouldParseImage && _react2.default.createElement(_CanvasController2.default, { + imgElem: imgElem, + sideSize: maxImgSideSize, + onImageData: this.imageParsed + }), + !imgElem && img && _react2.default.createElement('img', { + src: img, + alt: 'ParseImageColorsController img', + onLoad: this.onImgLoad, + onError: this.onImgError(img) + }) + ); + } + }]); + + return ReactImageParser; +}(_react.PureComponent); + +ReactImageParser.propTypes = { + img: _propTypes2.default.string.isRequired, + maxImgSideSize: _propTypes2.default.number, + onImageParsed: _propTypes2.default.func +}; +ReactImageParser.defaultProps = { + img: null, + onImageParsed: function onImageParsed() {} +}; +exports.default = ReactImageParser; \ No newline at end of file