59 | this.next()}
75 | prev={() => this.prev()}
76 | closeModal={() => this.closeImg()}
77 | option={{
78 | move: true,
79 | waterMarkText: '多功能图片组件',
80 | rotate: true,
81 | zoom: true
82 | }}
83 | />}
84 |
85 | );
86 | }
87 | }
88 |
89 | export default Container;
90 |
--------------------------------------------------------------------------------
/src/imageModal/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Move from './common/move';
3 | import Zoom from './common/zoom';
4 | import WaterMark from './common/watermark';
5 |
6 | import RotateIcon from './images/rotate.png';
7 | import CloseIcon from './images/close.png';
8 |
9 | import './index.css';
10 | class ImageModal extends Component {
11 | constructor(props) {
12 | super(props);
13 | this.state = {
14 | imgRotate: 0
15 | }
16 | }
17 |
18 | componentDidMount() {
19 | const {
20 | option: {
21 | move, waterMarkText
22 | }
23 | } = this.props;
24 | let imageModalDom = this.refs.imageModal;
25 | let imageContentDom = imageModalDom.querySelector('.cxj-image-content');
26 |
27 | // 注册拖拽
28 | move && Move(imageModalDom);
29 |
30 | // 画水印 部分图片不画水印，比如聊天图片
31 | if (waterMarkText) {
32 | new WaterMark(imageContentDom, { fillText: waterMarkText }).draw();
33 | }
34 | }
35 |
36 | componentWillReceiveProps(nextProps) {
37 | const {
38 | src
39 | } = this.props;
40 | if (src !== nextProps.src) {
41 | this.setState({ imgRotate: 0 });
42 | }
43 | }
44 |
45 | handleRotateRight = () => {
46 | this.setState({ imgRotate: this.state.imgRotate + 90 });
47 | }
48 |
49 | handleRotateLeft = () => {
50 | this.setState({ imgRotate: this.state.imgRotate - 90 })
51 | }
52 |
53 | render() {
54 | let { src, prev, next, closeModal, option: { rotate, zoom } } = this.props;
55 | let { imgRotate } = this.state;
56 | return (
57 | -
60 | {imageList.map((src, i) =>
-
61 |
this.handleImgClick(i) } 67 | /> 68 |
)}
69 |
70 |
58 |
84 | );
85 | }
86 | }
87 |
88 | export default ImageModal;
89 |
--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const path = require('path');
4 | const fs = require('fs');
5 | const url = require('url');
6 |
7 | // Make sure any symlinks in the project folder are resolved:
8 | // https://github.com/facebook/create-react-app/issues/637
9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 |
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 |
14 | function ensureSlash(inputPath, needsSlash) {
15 | const hasSlash = inputPath.endsWith('/');
16 | if (hasSlash && !needsSlash) {
17 | return inputPath.substr(0, inputPath.length - 1);
18 | } else if (!hasSlash && needsSlash) {
19 | return `${inputPath}/`;
20 | } else {
21 | return inputPath;
22 | }
23 | }
24 |
25 | const getPublicUrl = appPackageJson =>
26 | envPublicUrl || require(appPackageJson).homepage;
27 |
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right zoom && Zoom(e, this.refs.imageModal)}
63 | onContextMenu={e => {
64 | e.preventDefault();
65 | +e.button === 2 && closeModal();}
66 | }
67 | >
68 | {rotate &&
69 | 
70 | }
71 | {rotate &&
72 |
73 | }
74 |
75 | 
76 |
77 | {prev && <}
78 | {next && >}
79 |
83 |
80 |
81 |
82 |