瀏覽代碼

修改图片查看

mentoswzq 4 年之前
父節點
當前提交
4af92f33f8
共有 3 個文件被更改,包括 23 次插入177 次删除
  1. 17 177
      js/component/common/imgList/index.js
  2. 1 0
      package.json
  3. 5 0
      yarn.lock

+ 17 - 177
js/component/common/imgList/index.js

@@ -1,81 +1,26 @@
 import React,{Component} from 'react';
-import {Button, Icon, message, Upload} from 'antd';
+import {Upload} from 'antd';
 import './index.less';
+import Viewer from 'viewerjs';
+import 'viewerjs/dist/viewer.css'
 
-// const url1 = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601012352754&di=d33308119328f5ed987bd90031f98cfa&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F27%2F81%2F01200000194677136358818023076.jpg';
-// const url2 = 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1601001245&di=60b5e1a42beb791524b46d7e3677f1f4&src=http://a2.att.hudong.com/13/86/01300001285722131043860050752.jpg';
+//const url1 = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601012352754&di=d33308119328f5ed987bd90031f98cfa&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F27%2F81%2F01200000194677136358818023076.jpg';
+//const url2 = 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1601001245&di=60b5e1a42beb791524b46d7e3677f1f4&src=http://a2.att.hudong.com/13/86/01300001285722131043860050752.jpg';
 class ImgList extends Component{
     constructor(props) {
         super(props);
         this.state={
             seeMore: false,
-            previewVisible: false,
-            previewImage: '',
-            rotateDeg: 0,
             fileList: props.fileList.map((v,i)=>{
                 v.index = i;
                 // v.url = i%2 ? url1 : url2;
                 return v
             }) || [],
-            selectImgIndex: 0, //选择的图片索引
         }
-        this.handleCancel = this.handleCancel.bind(this);
-        this.downImg = this.downImg.bind(this);
-        this.upImg = this.upImg.bind(this);
-        this.rotate = this.rotate.bind(this);
     }
 
-    handleCancel(e) {
-        e.stopPropagation();
-        this.setState({
-            previewVisible:false,
-            previewImage: '',
-            rotateDeg: 0,
-            selectImgIndex: 0,
-        },()=>{
-            document.getElementsByClassName('imgBox')[0].style.backgroundSize = 'contain';
-        })
-    }
-
-    rotate() {
-        let rotateDeg = this.state.rotateDeg + 90;
-        this.setState({
-            rotateDeg,
-        })
-    }
-
-    upImg() {
-        const {fileList} = this.state;
-        let index = this.state.selectImgIndex - 1;
-        if(index < 0){
-            message.warn('已经是第一张了哦')
-        }else{
-            let file = fileList[index];
-            this.setState({
-                previewImage: file.url || file.thumbUrl,
-                selectImgIndex: index,
-                rotateDeg: 0,
-            },()=>{
-                document.getElementsByClassName('imgBox')[0].style.backgroundSize = 'contain';
-            })
-        }
-    }
-
-    downImg() {
-        const {fileList} = this.state;
-        let index = this.state.selectImgIndex + 1;
-        if(index >= fileList.length){
-            message.warn('已经是最后一张了哦')
-        }else{
-            let file = fileList[index];
-            this.setState({
-                previewImage: file.url || file.thumbUrl,
-                selectImgIndex: index,
-                rotateDeg: 0,
-            },()=>{
-                document.getElementsByClassName('imgBox')[0].style.backgroundSize = 'contain';
-            })
-        }
+    componentDidMount() {
+      this.gallery = new Viewer(document.getElementById('images'));
     }
 
     render() {
@@ -92,127 +37,22 @@ class ImgList extends Component{
                               fileList.slice(0,10)
                       }
                       onPreview={(file) => {
-                        this.setState({
-                            previewImage: file.url || file.thumbUrl,
-                            previewVisible: true,
-                            selectImgIndex: file.index,
-                        },()=>{
-                            document.getElementsByClassName('imgBox')[0].style.backgroundSize = 'contain';
-                        })
+                          this.gallery.view(file.index).show();
                       }}
                     />
                 </div>
                 {fileList.length > 10 ? <div className='seeMore' onClick={()=>{this.setState({seeMore:!this.state.seeMore})}}>
                     {this.state.seeMore ? '收起' : '查看更多'}
                 </div> : <div/>}
-                <div className={'imgModal'} style={{display:this.state.previewVisible ? 'flex' : 'none'}}>
-                    <div className='floatingLayer' onClick={this.handleCancel}/>
-                    <div style={{
-                        position:"absolute",
-                        zIndex:99998,
-                        width:'calc(100vh - 40px)',
-                        height:'calc(100vh - 40px)',
-                        transform: `rotate(${this.state.rotateDeg}deg)`,
-                        padding:'20px',
-                    }}>
-                        <div className='imgBox' style={{
-                            width:'100%',
-                            height:'100%',
-                            background: `rgba(0,0,0,0) url('${this.state.previewImage}') no-repeat center`,
-                            backgroundSize: 'contain',
-                        }}/>
-                    </div>
-                    <div className='actionBar'>
-                        <div
-                            style={{
-                                cursor:"pointer",
-                                background:'rgba(0,0,0,.5)',
-                                position: 'fixed',
-                                top: '30px',
-                                left: '0',
-                                right: '0',
-                                textAlign:'center',
-                                zIndex: '99999',
-                                color:'#FFFFFF',
-                                fontSize:'50px',
-                                fontWeight:"bolder",
-                            }}
-                        >
-                            {this.state.selectImgIndex + 1}/{fileList.length}
-                        </div>
-                        <div
-                            style={{
-                                cursor:"pointer",
-                                background:'rgba(0,0,0,0)',
-                                position: 'fixed',
-                                top: '60px',
-                                right: '60px',
-                                zIndex: '99999',
-                                color:'#FFFFFF',
-                            }}
-                            onClick={this.handleCancel}
-                        >
-                            <Icon
-                                type="close"
-                                style={{
-                                    fontSize:'50px',
-                                    color:'#FFFFFF'
-                                }}
-                            />
-                        </div>
-                        <div
-                            style={{
-                                cursor:"pointer",
-                                background:'rgba(0,0,0,0)',
-                                position: 'fixed',
-                                top: 'calc(50vh - 50px)',
-                                left: '4%',
-                                zIndex: '99999',
-                            }}
-                            onClick={this.upImg}>
-                            <Icon
-                                type="left-circle-o"
-                                style={{
-                                    fontSize:'50px',
-                                    color:'#FFFFFF'
-                                }}
-                            />
-                        </div>
-                        <div
-                            style={{
-                                cursor:"pointer",
-                                background:'rgba(0,0,0,0)',
-                                position: 'fixed',
-                                top: 'calc(50vh - 50px)',
-                                right: '4%',
-                                zIndex: '99999',
-                            }}
-                            onClick={this.downImg}>
-                            <Icon
-                                type="right-circle-o"
-                                style={{
-                                    fontSize:'50px',
-                                    color:'#FFFFFF'
-                                }}
-                            />
-                        </div>
-                    </div>
-                    <div style={{
-                        display:'flex',
-                        flexFlow:'row',
-                        marginTop:'20px',
-                        justifyContent:'center',
-                        position: 'fixed',
-                        bottom: '7px',
-                        zIndex: '99999',
-                        left:0,
-                        right:0,
-                    }}>
-                        <Button onClick={this.rotate}>
-                            旋转
-                        </Button>
-                    </div>
-                </div >
+                <ul id="images" style={{display:'none',zIndex:-1,}}>
+                    {
+                        fileList.map((value,index)=>(
+                            <li key={index}>
+                                <img src={value.url || value.thumbUrl}/>
+                            </li>
+                        ))
+                    }
+                </ul>
             </div>
         )
     }

+ 1 - 0
package.json

@@ -59,6 +59,7 @@
     "react-pdf": "^1.6.1",
     "react-quill": "^1.0.0",
     "viewer": "^0.10.11",
+    "viewerjs": "^1.6.2",
     "xlsx-oc": "^1.0.2"
   }
 }

+ 5 - 0
yarn.lock

@@ -6873,6 +6873,11 @@ viewer@^0.10.11:
   resolved "https://registry.yarnpkg.com/viewer/-/viewer-0.10.11.tgz#df2476d27c5fc5914a1953901bb3f545d951cb1b"
   integrity sha1-3yR20nxfxZFKGVOQG7P1RdlRyxs=
 
+viewerjs@^1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/viewerjs/-/viewerjs-1.6.2.tgz#0826eaa9bb143875690b0506712335722dcbeaa3"
+  integrity sha512-EHepcPFz2YOv0wOKMUU7JwcUGdF3EmTH8A4owYeNPCM1t5XuE7ePelACY8ltWvh6O2yPOdJ9CI3T6m04RjsmpQ==
+
 vm-browserify@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.0.tgz#bd76d6a23323e2ca8ffa12028dc04559c75f9019"