react-watermark-component
Version:
react-watermark-component is a component that can generate a water mark background image.
138 lines (106 loc) • 12.1 kB
JavaScript
;
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 _class, _temp2;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _WaterMarkCanvas = require('./WaterMarkCanvas');
var _WaterMarkCanvas2 = _interopRequireDefault(_WaterMarkCanvas);
var _SecurityDefense = require('./SecurityDefense');
var _SecurityDefense2 = _interopRequireDefault(_SecurityDefense);
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 defaultOptions = {
chunkWidth: 200,
chunkHeight: 60,
textAlign: 'left',
textBaseline: 'bottom',
globalAlpha: 0.17,
font: '14px Microsoft Yahei',
rotateAngle: -0.26,
fillStyle: '#666'
};
var waterMarkStyle = 'position: absolute;left: 0;right: 0;top:0;bottom:0;opacity: 0.7;z-index: 9999;pointer-events: none;overflow: hidden;background-color: transparent;background-repeat: repeat;';
var noop = function noop() {};
var WaterMark = (_temp2 = _class = function (_React$Component) {
_inherits(WaterMark, _React$Component);
function WaterMark() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, WaterMark);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = WaterMark.__proto__ || Object.getPrototypeOf(WaterMark)).call.apply(_ref, [this].concat(args))), _this), _this.getStyles = function () {
var _this$props = _this.props,
waterMarkText = _this$props.waterMarkText,
options = _this$props.options;
var newOptions = Object.assign({}, defaultOptions, options);
return (0, _WaterMarkCanvas2.default)(waterMarkText, newOptions);
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(WaterMark, [{
key: 'componentDidMount',
value: function componentDidMount() {
var dom = document.getElementById('water-mark-observer');
var parent = document.getElementById('water-mark-wrapper');
var securityAlarm = this.props.securityAlarm;
var security = new _SecurityDefense2.default(waterMarkStyle, this.getStyles, securityAlarm);
security.registerNodeRemoveListener(dom, parent);
security.registerNodeAttrChangeListener(dom);
}
}, {
key: 'render',
value: function render() {
var children = this.props.children;
var styles = {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
opacity: 0.7,
zIndex: 9999,
pointerEvents: 'none',
overflow: 'hidden',
backgroundImage: 'url("' + this.getStyles() + '")',
backgroundColor: 'transparent',
backgroundRepeat: 'repeat'
};
return _react2.default.createElement(
'div',
{ style: { position: 'relative' }, id: 'water-mark-wrapper' },
_react2.default.createElement('div', { style: styles, id: 'water-mark-observer' }),
children
);
}
}]);
return WaterMark;
}(_react2.default.Component), _class.propTypes = {
children: _propTypes2.default.element.isRequired,
waterMarkText: _propTypes2.default.string.isRequired,
securityAlarm: _propTypes2.default.func,
options: _propTypes2.default.shape({
chunkWidth: _propTypes2.default.number,
chunkHeight: _propTypes2.default.number,
textAlign: _propTypes2.default.string,
textBaseline: _propTypes2.default.string,
globalAlpha: _propTypes2.default.number,
font: _propTypes2.default.string,
rotateAngle: _propTypes2.default.number,
fillStyle: _propTypes2.default.string
})
}, _temp2);
WaterMark.defaultProps = {
securityAlarm: noop,
options: defaultOptions
};
exports.default = WaterMark;
module.exports = exports['default'];
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9pbmRleC5qcyJdLCJuYW1lcyI6WyJkZWZhdWx0T3B0aW9ucyIsImNodW5rV2lkdGgiLCJjaHVua0hlaWdodCIsInRleHRBbGlnbiIsInRleHRCYXNlbGluZSIsImdsb2JhbEFscGhhIiwiZm9udCIsInJvdGF0ZUFuZ2xlIiwiZmlsbFN0eWxlIiwid2F0ZXJNYXJrU3R5bGUiLCJub29wIiwiV2F0ZXJNYXJrIiwiZ2V0U3R5bGVzIiwicHJvcHMiLCJ3YXRlck1hcmtUZXh0Iiwib3B0aW9ucyIsIm5ld09wdGlvbnMiLCJPYmplY3QiLCJhc3NpZ24iLCJkb20iLCJkb2N1bWVudCIsImdldEVsZW1lbnRCeUlkIiwicGFyZW50Iiwic2VjdXJpdHlBbGFybSIsInNlY3VyaXR5IiwiU2VjdXJpdHlEZWZlbnNlIiwicmVnaXN0ZXJOb2RlUmVtb3ZlTGlzdGVuZXIiLCJyZWdpc3Rlck5vZGVBdHRyQ2hhbmdlTGlzdGVuZXIiLCJjaGlsZHJlbiIsInN0eWxlcyIsInBvc2l0aW9uIiwibGVmdCIsInJpZ2h0IiwidG9wIiwiYm90dG9tIiwib3BhY2l0eSIsInpJbmRleCIsInBvaW50ZXJFdmVudHMiLCJvdmVyZmxvdyIsImJhY2tncm91bmRJbWFnZSIsImJhY2tncm91bmRDb2xvciIsImJhY2tncm91bmRSZXBlYXQiLCJSZWFjdCIsIkNvbXBvbmVudCIsInByb3BUeXBlcyIsIlByb3BUeXBlcyIsImVsZW1lbnQiLCJpc1JlcXVpcmVkIiwic3RyaW5nIiwiZnVuYyIsInNoYXBlIiwibnVtYmVyIiwiZGVmYXVsdFByb3BzIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7O0FBQUE7Ozs7QUFDQTs7OztBQUNBOzs7O0FBQ0E7Ozs7Ozs7Ozs7OztBQUVBLElBQU1BLGlCQUFpQjtBQUNyQkMsY0FBWSxHQURTO0FBRXJCQyxlQUFhLEVBRlE7QUFHckJDLGFBQVcsTUFIVTtBQUlyQkMsZ0JBQWMsUUFKTztBQUtyQkMsZUFBYSxJQUxRO0FBTXJCQyxRQUFNLHNCQU5lO0FBT3JCQyxlQUFhLENBQUMsSUFQTztBQVFyQkMsYUFBVztBQVJVLENBQXZCOztBQVdBLElBQU1DLGlCQUFpQiw4S0FBdkI7QUFDQSxJQUFNQyxPQUFPLFNBQVBBLElBQU8sR0FBWSxDQUFFLENBQTNCOztJQUVNQyxTOzs7Ozs7Ozs7Ozs7Ozs0TEEwQkpDLFMsR0FBWSxZQUFNO0FBQUEsd0JBQ21CLE1BQUtDLEtBRHhCO0FBQUEsVUFDUkMsYUFEUSxlQUNSQSxhQURRO0FBQUEsVUFDT0MsT0FEUCxlQUNPQSxPQURQOztBQUVoQixVQUFNQyxhQUFhQyxPQUFPQyxNQUFQLENBQWMsRUFBZCxFQUFrQmxCLGNBQWxCLEVBQWtDZSxPQUFsQyxDQUFuQjtBQUNBLGFBQU8sK0JBQW1CRCxhQUFuQixFQUFrQ0UsVUFBbEMsQ0FBUDtBQUNELEs7Ozs7O3dDQWJtQjtBQUNsQixVQUFNRyxNQUFNQyxTQUFTQyxjQUFULENBQXdCLHFCQUF4QixDQUFaO0FBQ0EsVUFBTUMsU0FBU0YsU0FBU0MsY0FBVCxDQUF3QixvQkFBeEIsQ0FBZjtBQUZrQixVQUdWRSxhQUhVLEdBR1EsS0FBS1YsS0FIYixDQUdWVSxhQUhVOztBQUlsQixVQUFNQyxXQUFXLElBQUlDLHlCQUFKLENBQW9CaEIsY0FBcEIsRUFBb0MsS0FBS0csU0FBekMsRUFBb0RXLGFBQXBELENBQWpCO0FBQ0FDLGVBQVNFLDBCQUFULENBQW9DUCxHQUFwQyxFQUF5Q0csTUFBekM7QUFDQUUsZUFBU0csOEJBQVQsQ0FBd0NSLEdBQXhDO0FBQ0Q7Ozs2QkFRUTtBQUFBLFVBQ0NTLFFBREQsR0FDYyxLQUFLZixLQURuQixDQUNDZSxRQUREOztBQUVQLFVBQU1DLFNBQVM7QUFDYkMsa0JBQVUsVUFERztBQUViQyxjQUFNLENBRk87QUFHYkMsZUFBTyxDQUhNO0FBSWJDLGFBQUssQ0FKUTtBQUtiQyxnQkFBUSxDQUxLO0FBTWJDLGlCQUFTLEdBTkk7QUFPYkMsZ0JBQVEsSUFQSztBQVFiQyx1QkFBZSxNQVJGO0FBU2JDLGtCQUFVLFFBVEc7QUFVYkMsbUNBQXlCLEtBQUszQixTQUFMLEVBQXpCLE9BVmE7QUFXYjRCLHlCQUFpQixhQVhKO0FBWWJDLDBCQUFrQjtBQVpMLE9BQWY7O0FBZUEsYUFDRTtBQUFBO0FBQUEsVUFBSyxPQUFPLEVBQUVYLFVBQVUsVUFBWixFQUFaLEVBQXNDLElBQUcsb0JBQXpDO0FBQ0UsK0NBQUssT0FBT0QsTUFBWixFQUFvQixJQUFHLHFCQUF2QixHQURGO0FBRUdEO0FBRkgsT0FERjtBQU1EOzs7O0VBdkRxQmMsZ0JBQU1DLFMsVUFDckJDLFMsR0FBWTtBQUNqQmhCLFlBQVVpQixvQkFBVUMsT0FBVixDQUFrQkMsVUFEWDtBQUVqQmpDLGlCQUFlK0Isb0JBQVVHLE1BQVYsQ0FBaUJELFVBRmY7QUFHakJ4QixpQkFBZXNCLG9CQUFVSSxJQUhSO0FBSWpCbEMsV0FBUzhCLG9CQUFVSyxLQUFWLENBQWdCO0FBQ3ZCakQsZ0JBQVk0QyxvQkFBVU0sTUFEQztBQUV2QmpELGlCQUFhMkMsb0JBQVVNLE1BRkE7QUFHdkJoRCxlQUFXMEMsb0JBQVVHLE1BSEU7QUFJdkI1QyxrQkFBY3lDLG9CQUFVRyxNQUpEO0FBS3ZCM0MsaUJBQWF3QyxvQkFBVU0sTUFMQTtBQU12QjdDLFVBQU11QyxvQkFBVUcsTUFOTztBQU92QnpDLGlCQUFhc0Msb0JBQVVNLE1BUEE7QUFRdkIzQyxlQUFXcUMsb0JBQVVHO0FBUkUsR0FBaEI7QUFKUSxDOzs7QUF5RHJCckMsVUFBVXlDLFlBQVYsR0FBeUI7QUFDdkI3QixpQkFBZWIsSUFEUTtBQUV2QkssV0FBU2Y7QUFGYyxDQUF6Qjs7a0JBS2VXLFMiLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnXG5pbXBvcnQgZ2V0V2F0ZXJNYXJrQ2FudmFzIGZyb20gJy4vV2F0ZXJNYXJrQ2FudmFzJ1xuaW1wb3J0IFNlY3VyaXR5RGVmZW5zZSBmcm9tICcuL1NlY3VyaXR5RGVmZW5zZSdcblxuY29uc3QgZGVmYXVsdE9wdGlvbnMgPSB7XG4gIGNodW5rV2lkdGg6IDIwMCxcbiAgY2h1bmtIZWlnaHQ6IDYwLFxuICB0ZXh0QWxpZ246ICdsZWZ0JyxcbiAgdGV4dEJhc2VsaW5lOiAnYm90dG9tJyxcbiAgZ2xvYmFsQWxwaGE6IDAuMTcsXG4gIGZvbnQ6ICcxNHB4IE1pY3Jvc29mdCBZYWhlaScsXG4gIHJvdGF0ZUFuZ2xlOiAtMC4yNixcbiAgZmlsbFN0eWxlOiAnIzY2Nidcbn1cblxuY29uc3Qgd2F0ZXJNYXJrU3R5bGUgPSAncG9zaXRpb246IGFic29sdXRlO2xlZnQ6IDA7cmlnaHQ6IDA7dG9wOjA7Ym90dG9tOjA7b3BhY2l0eTogMC43O3otaW5kZXg6IDk5OTk7cG9pbnRlci1ldmVudHM6IG5vbmU7b3ZlcmZsb3c6IGhpZGRlbjtiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtiYWNrZ3JvdW5kLXJlcGVhdDogcmVwZWF0OydcbmNvbnN0IG5vb3AgPSBmdW5jdGlvbiAoKSB7fVxuXG5jbGFzcyBXYXRlck1hcmsgZXh0ZW5kcyBSZWFjdC5Db21wb25lbnQge1xuICBzdGF0aWMgcHJvcFR5cGVzID0ge1xuICAgIGNoaWxkcmVuOiBQcm9wVHlwZXMuZWxlbWVudC5pc1JlcXVpcmVkLFxuICAgIHdhdGVyTWFya1RleHQ6IFByb3BUeXBlcy5zdHJpbmcuaXNSZXF1aXJlZCxcbiAgICBzZWN1cml0eUFsYXJtOiBQcm9wVHlwZXMuZnVuYyxcbiAgICBvcHRpb25zOiBQcm9wVHlwZXMuc2hhcGUoe1xuICAgICAgY2h1bmtXaWR0aDogUHJvcFR5cGVzLm51bWJlcixcbiAgICAgIGNodW5rSGVpZ2h0OiBQcm9wVHlwZXMubnVtYmVyLFxuICAgICAgdGV4dEFsaWduOiBQcm9wVHlwZXMuc3RyaW5nLFxuICAgICAgdGV4dEJhc2VsaW5lOiBQcm9wVHlwZXMuc3RyaW5nLFxuICAgICAgZ2xvYmFsQWxwaGE6IFByb3BUeXBlcy5udW1iZXIsXG4gICAgICBmb250OiBQcm9wVHlwZXMuc3RyaW5nLFxuICAgICAgcm90YXRlQW5nbGU6IFByb3BUeXBlcy5udW1iZXIsXG4gICAgICBmaWxsU3R5bGU6IFByb3BUeXBlcy5zdHJpbmdcbiAgICB9KVxuICB9XG5cbiAgY29tcG9uZW50RGlkTW91bnQoKSB7XG4gICAgY29uc3QgZG9tID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3dhdGVyLW1hcmstb2JzZXJ2ZXInKVxuICAgIGNvbnN0IHBhcmVudCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd3YXRlci1tYXJrLXdyYXBwZXInKVxuICAgIGNvbnN0IHsgc2VjdXJpdHlBbGFybSB9ID0gdGhpcy5wcm9wc1xuICAgIGNvbnN0IHNlY3VyaXR5ID0gbmV3IFNlY3VyaXR5RGVmZW5zZSh3YXRlck1hcmtTdHlsZSwgdGhpcy5nZXRTdHlsZXMsIHNlY3VyaXR5QWxhcm0pXG4gICAgc2VjdXJpdHkucmVnaXN0ZXJOb2RlUmVtb3ZlTGlzdGVuZXIoZG9tLCBwYXJlbnQpXG4gICAgc2VjdXJpdHkucmVnaXN0ZXJOb2RlQXR0ckNoYW5nZUxpc3RlbmVyKGRvbSlcbiAgfVxuXG4gIGdldFN0eWxlcyA9ICgpID0+IHtcbiAgICBjb25zdCB7IHdhdGVyTWFya1RleHQsIG9wdGlvbnMgfSA9IHRoaXMucHJvcHNcbiAgICBjb25zdCBuZXdPcHRpb25zID0gT2JqZWN0LmFzc2lnbih7fSwgZGVmYXVsdE9wdGlvbnMsIG9wdGlvbnMpXG4gICAgcmV0dXJuIGdldFdhdGVyTWFya0NhbnZhcyh3YXRlck1hcmtUZXh0LCBuZXdPcHRpb25zKVxuICB9XG5cbiAgcmVuZGVyKCkge1xuICAgIGNvbnN0IHsgY2hpbGRyZW4gfSA9IHRoaXMucHJvcHNcbiAgICBjb25zdCBzdHlsZXMgPSB7XG4gICAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICAgIGxlZnQ6IDAsXG4gICAgICByaWdodDogMCxcbiAgICAgIHRvcDogMCxcbiAgICAgIGJvdHRvbTogMCxcbiAgICAgIG9wYWNpdHk6IDAuNyxcbiAgICAgIHpJbmRleDogOTk5OSxcbiAgICAgIHBvaW50ZXJFdmVudHM6ICdub25lJyxcbiAgICAgIG92ZXJmbG93OiAnaGlkZGVuJyxcbiAgICAgIGJhY2tncm91bmRJbWFnZTogYHVybChcIiR7dGhpcy5nZXRTdHlsZXMoKX1cIilgLFxuICAgICAgYmFja2dyb3VuZENvbG9yOiAndHJhbnNwYXJlbnQnLFxuICAgICAgYmFja2dyb3VuZFJlcGVhdDogJ3JlcGVhdCdcbiAgICB9XG5cbiAgICByZXR1cm4gKFxuICAgICAgPGRpdiBzdHlsZT17eyBwb3NpdGlvbjogJ3JlbGF0aXZlJyB9fSBpZD1cIndhdGVyLW1hcmstd3JhcHBlclwiPlxuICAgICAgICA8ZGl2IHN0eWxlPXtzdHlsZXN9IGlkPVwid2F0ZXItbWFyay1vYnNlcnZlclwiIC8+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvZGl2PlxuICAgIClcbiAgfVxufVxuXG5XYXRlck1hcmsuZGVmYXVsdFByb3BzID0ge1xuICBzZWN1cml0eUFsYXJtOiBub29wLFxuICBvcHRpb25zOiBkZWZhdWx0T3B0aW9uc1xufVxuXG5leHBvcnQgZGVmYXVsdCBXYXRlck1hcmtcbiJdfQ==