react + antd 封装一个图片预览，旋转，查看原图组件

最近在项目中的一个需求是，小图点击可以弹框放大，然后能查看原图，顺时针一直旋转，每次90度。

实现方法：

使用react开发，所以直接选用antd 的组件， Upload 。结合CSS3的旋转属性；查看原图可以直接使用window.open()打开新的标签页。

实习代码：

   constructor(props){
        super(props);
        /**
         * 初始值current 设为 90°
         * 第一次旋转 rotate(90deg)
         */
        this.state={
            visible:false,
            previewImage:'',
            current:90,
            transStyle:''
        }
    }
    // 预览，设置查看的当前图片，设置弹框为展开
    preview = (file) => {
        this.setState({
            previewImage: file.url || file.thumbUrl,
            visible: true
        });
    }
    // 取消预览，这里需要将下一次旋转的初始值0,rotate(0deg)
    cancelPreview= () => {
        this.setState({
            visible: false,
            current:90,
            transStyle:'rotate('+0+'deg)'
        });
    }
    //  点击选择  设置当前current旋转角度为上一次+90°
    translate = () => {
        this.setState({
            current:(this.state.current+90)%360,
            transStyle:'rotate('+this.state.current+'deg)'
        });
    }

      const content = (
            <div style={{textAlign:'center'}}>
                <Button 
                    onClick = {
                        // onClick:()=>{window.open(this.state.previewImage,'_blank')}
                        /**
                         * window.open此处是可以实现的，但是因为后台存储线上图片的格式更加安全，导致window.open打开的时候就直接下载了。
                         * 所以采用下面的方式实现
                         */
                        ()=> {
                            let str='<!DOCTYPE html><html><body ><img src='+ this.state.previewImage +' /></body></html>';
                            var a=window.open("",'_blank')
                            a.document.write(str);
                        }
                    }
                >查看原图</Button>
                <span style={{marginLeft:6}}>
                    <Button
                        onClick = { this.translate }
                    >
                        旋转<Icon type="reload" theme="outlined" />
                    </Button>
                </span>
            </div>
        )

      return (
            <div className="hideDeleteBtn">
                <Upload
                    action="//jsonplaceholder.typicode.com/posts/"
                    listType="picture-card"
                    fileList={trans(this.props.imgList)}
                    onPreview={this.preview.bind(this)}
                />
                <Modal
                    visible={ this.state.visible }
                    footer={content}
                    onCancel={this.cancelPreview.bind(this)}
                >
                    <div style={{ marginTop:20,height:470, transform:this.state.transStyle, display:'flex', alignItems:'center'}}>
                        <img
                            alt="example"
                            style={{width: '100%',height:'100%' }}
                            src={this.state.previewImage}
                        />
                    </div>
                    {/* <div style={{clear:'both'}} /> */}
                </Modal>
            </div>
        );

基本的实现就是这样，主要是在antd组件 Upload的基础上使用的，旋转这个还蛮好的，值得好好学习一下。有什么问题可以私我哦。

关注我获取更多前端资源和经验分享

关注后回复 vivi 获取我的微信号，望不吝赐教，pps：可轻撩哈哈

感谢大佬们阅读，希望大家头发浓密，睡眠良好，情绪稳定，早日实现财富自由~

react + antd 封装一个图片预览，旋转，查看原图组件

猜你喜欢