版权声明:本文已在我的公众号 :【FEvivi】 ,原创首发, 欢迎关注~!如需转载,请注明出处 https://blog.csdn.net/zr15829039341/article/details/84555462
最近在项目中的一个需求是, 小图点击可以弹框放大,然后能查看原图,顺时针一直旋转,每次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:可轻撩哈哈
感谢大佬们阅读,希望大家头发浓密,睡眠良好,情绪稳定,早日实现财富自由~