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

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

Video_2019-10-27_120117.gif

安装很简单

npm i react-zmage 

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

第一种方法

Zmage替换img


第二种方法

onClick方法

 Zmage.browsing({ src:imagePath })}>任意元素

第三种方法

在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 (
        
    );
}

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

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

function App() {
  
  return (
    
  );
}

export default App;

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

React-Zmage实现图片放大旋转等操作_第1张图片
爱游戏爱编程.jpg

你可能感兴趣的:(React-Zmage实现图片放大旋转等操作)