React-Zmage实现图片放大旋转等操作

前几天需要做一个图片放大的效果，找来找去找到了React-Zmage貌似现在还不支持鼠标滚轮放大缩小，但是也基本满足需求了，现在先来看一张效果图。

Video_2019-10-27_120117.gif

安装很简单

npm i react-zmage 

安装好之后就可以在页面引用了，官网有很多实例，这里是做一些简单介绍。网址在这里https://zmage.caldis.me/。

第一种方法

用Zmage替换img

<Zmage
    src="https://your.image.link.jpg"
    alt="最简单的使用方式"
/>

第二种方法

用onClick方法

<a onClick={() => Zmage.browsing({ src:imagePath })}>任意元素</a>

第三种方法

在typescript中使用

import ReactZmage from 'react-zmage';

// 在生命周期等方法中使用
public componentDidMount() {
    const zmage = new ReactZmage({
        // ...options
    });
}

// 也支持组件方式使用
public render(): JSX.Element {
    const defaultConfig = {
        src: 'http://zmage.caldis.me/imgSet/childsDream/demo.jpg',
        alt: '示例图片',
    };

    return (
        <ReactZmage
            {...defaultConfig}
        />
    );
}

接下来看个简单的实例吧,先创建一个新的react项目，然后把App.js 的代码替换为本段代码即可，记得安装react-zmage

import React from 'react';
import './App.css';
import Zmage from 'react-zmage'

function App() {
  
  return (
    <div className="App">
      <header className="App-header">
        <Zmage src='./tree.jpg' className="App-logo" alt="tree" /><br/>
        <a onClick={() => Zmage.browsing({ src:'./tree.jpg' })}>点击显示大图片</a>
      </header>
    </div>
  );
}

export default App;

想要源码的同学欢迎扫描微信公众号爱游戏爱编程，回复图片放大即可获取源码。其实也不用去获取源码，自己新建个react项目，直接把上面一段代码粘过去即可，换个图片就行。

爱游戏爱编程.jpg