[React] 点击---图片90°旋转

 

点击小眼睛 进行图片预览

预览使用modal弹窗 不设置宽高  自适应图片的大小

 

 

旋转按钮 每点击一次 旋转90°

render下 给Spin标签设置一个旋转按钮的图标 并带事件

  const antIcon = <Icon type='reload'
                titie="旋转"
                className='common-icon-style' style={{
                    color: '#4dc182',
                    color: "#bfbfbf",
                    marginLeft: "5px",
                    cursor: "pointer",
                    float: "right",
                }}
                onClick={this.handleRote} />

draggable="false" 不可拖拽  

  <Modal
                            visible={this.state.visible}
                            title={<div>
                                <div style={{
                                    display: "flex", justifyContent: "space-between", alignItems: "center", paddingRight: "14px", marginTop: "-4px"
                                }}>
                                    <span>图片预览</span>
                                    <Spin indicator={antIcon} size='middle' />
                                </div>
                            </div>}
                            onCancel={this.handleClose}
                            bodyStyle={{ padding: 5, overflow: 'auto' }}
                            footer={null}
                            className="view-modal"
                        >
                            <div className="view-content" >
                                <img id="preview-img" draggable="false" src={this.state.imgPath} alt="" style={{ width: '100%' }} />
                                {/* <span  style={{float:"right"}} onClick={this.handleRote}>旋转</span> */}
                            </div>
                        </Modal>

  //预览图片
        handlePreview = (path) => {
            this.setState({
                imgPath: path
            }, () => {
                this.setState({
                    visible: true
                }, () => {

                })
            })
        }
        //关闭预览
        handleClose = () => {
            this.setState({
                visible: false
            }, () => {
                if (document.getElementById("preview-img")) {
                    document.getElementById("preview-img").style.transform = "rotate(" + 0 + "deg)";
                }
            })
        }

  //旋转图片

        handleRote = () => {

            var deg = this.state.deg;

            deg += 90;

            this.setState({

                deg,

            })

            // transform:rotate(7deg);

            // -ms-transform:rotate(7deg);  /* IE 9 */

            // -moz-transform:rotate(7deg);     /* Firefox */

            // -webkit-transform:rotate(7deg); /* Safari 和 Chrome */

            // -o-transform:rotate(7deg);   /* Opera */

            document.getElementById("preview-img").style.transform = "rotate(" + deg + "deg)";

            document.getElementById("preview-img").style.WebkitTransform = "rotate(" + deg + "deg)";

            document.getElementById("preview-img").style.MozTransform = "rotate(" + deg + "deg)";

            document.getElementById("preview-img").style.OTransform = "rotate(" + deg + "deg)";

            document.getElementById("preview-img").style.MsTransform = "rotate(" + deg + "deg)";

        }

　　

 

 

 在操作旋转按钮时 若过快连续点击 会将图片和文字进行一个选中状态  实在影响美观 与用户预览图片时的纯粹

 

 

 当遇到这种情况 需要把图片文字禁止选中打开

view-modal 定义需要禁止的范围 外层div 

 .view-modal{
     // 设置文字图片禁止选中
    -moz-user-select:none; /*火狐*/
    -webkit-user-select:none; /*webkit浏览器*/
    -ms-user-select:none; /*IE10*/
    -khtml-user-select:none; /*早期浏览器*/
    user-select:none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    .ant-modal-close-x{
        width: 34px !important;
    }
    .common-icon-style :hover{
        color: rgba(0, 0, 0, 0.45);
        font-weight: 700;
    }
 }

o 了 打爆竹~