react + antd 封裝一個圖片預覽，旋轉，檢視原圖元件
阿新 • • 發佈：2018-12-31
最近在專案中的一個需求是， 小圖點選可以彈框放大，然後能檢視原圖，順時針一直旋轉，每次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：可輕撩哈哈
感謝大佬們閱讀，希望大家頭髮濃密，睡眠良好，情緒穩定，早日實現財富自由~