基于React的图片缩放、旋转、反转、翻页等效果的实现

本文主要是基于viewjs的图片展示

话不多说，先看效果

可以看到对于图片的缩放、旋转、下一张，反转等，符合我们做图片展示框架的要求。

安装viewjs

因为前端使用的是react，所以我们找到一个viewjs的react实现，
项目引入："react-viewer": "^3.2.1",

或：npm install react-viewer --save

代码使用

在render函数里加入如下代码

view 遮罩

          <Viewer
            visible={this.state.visible}
            onClose={this.setImageVisible}
            onMaskClick={this.setImageVisible}
            images={images}
            activeIndex={this.state.activeIndex}
            attribute={true}
            customToolbar={(toolbars) => {
              return toolbars.concat([
                {
                  key: "download",
                  render: (<div>C</div>),
                  onClick: (activeImage) => {
                	console.log(activeImage);
              	  },
                },
              ]);
            }}
          />

几个props说明下：

• visible 表示组件是否可见，true 可见，false不可见，可由action控制
• onClose和onMaskClose是一个action，点击之后会将visible 变成false，从而可以关闭mask
• activeIndex 表示展示在mask上的图片的下标
• images表示所有图片的数据，可以是url，可以是转码后的base64字符串

具体可以参考：react-view github

最主要的是构建images
结构如下：

{
	[
		{
			src: 'http://xxx',
			alt: '图片描述'
		},
		{
			src: 'http://xxx',
			alt: '图片描述2'
		}
	]
}

渲染图片

然后在需要渲染图片的地方，把图片渲染出来：

<div className={imgListClass}>
      {images.map((item, index) => {
            return (
                <div key={index.toString()} className="img-item">
                     <img src={item.src} onClick={() => {
                        this.setState({
                          visible: true,
                          activeIndex: index,
                        });
                      }}/>
                    </div>
                  );
        })}
</div>

  setImageVisible = () => {
    this.setState({ visible: false });
  };

这样就大功告成了。

另外react-viewer可支持动态渲染，当使用axios向后台请求数据时，只需要将加载后的数据add进images这个state里，就可以在mask中的预览图看到。