[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 了 打爆竹~