caldis / react-zmage

一个基于 React 的可缩放图片控件 | A scalable image wrapper power by react

react-zmage

react-zmage 是一个基于 React 的的图片缩放控件, 使用 Zmage 标签包裹后的图片可以获得缩放效果, 您可以用这个控件替代原生的 img 标签, 令其附带图片缩放功能

需 react 版本大于 v16.6.0

演示

在线

https://zmage.caldis.me

本地

git clone https://github.com/Caldis/react-zmage
cd react-zmage
npm i
npm run dev

安装

npm i react-zmage --save

使用

1.引入组件

import Zmage from 'react-zmage'

2.将页面中的 img 标签替换为 Zmage 组件

<img src="图片源连接"/>
👆 to 👇
<Zmage src="图片源连接"/>

现在这些图片都可以放大查看了 ！

也可以通过函数调用来唤出图片

// Zmage.browsing 函数接受的参数与 <Zmage/> 组件完全一致
<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}
        />
    );
}

基础配置

立即上手, 你仅仅需要了解下面的几个参数就足够了

在线示例, 请参见 https://zmage.caldis.me

• 基础调用属性

配置项	类型	默认值	描述	示例
src	String	""	图片 Url，与 img 标签的 src 属性相同	示例
alt	String	""	图片占位文字，与 img 标签的 alt 属性相同	示例
set	Object[]	[]	序列图片, 可以在 set 中传入多个图片对象用于在查看模式下呈现多张图片，也可用于呈现放大后的高清图片	示例
defaultPage	Number	0	如果传入了set来展示多张图片, 可以用于指定打开后的默认页	示例

高级配置

不需要了解这些参数也可以很好的使用, 但如果你需要更详细的定制, 可以进一步查阅下面的内容

• 预设配置 (beta)

配置项	类型	默认值	描述	示例
preset	String	"auto"	轻松配置界面的功能及样式, 可设置为 auto desktop mobile	示例 受影响的配置项

• 受控属性

配置项	类型	默认值	描述	示例
browsing	Boolean	empty	控制是否进入查看模式	示例

• 功能控制

配置项	类型	默认值	描述	示例
controller	查看	桌面|移动	将特定项设为 false 来隐藏查看模式下的操作控件	示例
hotKey	查看	桌面|移动	将特定项设为 false 来禁用查看模式下的快捷键	示例
animate	查看	桌面|移动	传入特定的参数指定翻页动画（browsing 动画暂不可配置） 可选值	示例

• 界面样式

配置项	类型	默认值	描述	示例
backdrop	String	"#FFFFFF"	控制图片放大后的背景色	示例
zIndex	Number	1000	控制外部容器的 z-index, 防止被其他元素遮挡	示例
radius	Number	桌面|移动	控制图片在查看模式下的圆角	示例
edge	Number	桌面|移动	控制图片在查看模式下距离屏幕边缘的距离	示例

• 生命周期

配置项	类型	默认值	描述	示例
onBrowsing	func	(browsing)=>{}	生命周期方法, 在显示/隐藏时调用, 会回传显示状态	示例
onZooming	func	(zooming)=>{}	生命周期方法, 在放大/缩小时调用, 会回传缩放状态	示例
onSwitching	func	(paging)=>{}	生命周期方法, 在切换图片时调用, 会回传页码	示例
onRotating	func	(deg)=>{}	生命周期方法, 在旋转图片时调用, 会回传角度	示例

src

"http://zmage.caldis.me/imgSet/childsDream/demo.jpg"

alt

"图片的占位文字，作为图片的标题, 请尽量保持简短"

set

// 如果设置了 Set, 则进入查看模式后第一张图片将会是 set 的首图, 而不是 src
// 如果你需要在查看模式中呈现高精度图片, 可以将其设置为 set 的首图, 或使用 defaultPage 指定
set={[
    {
        // 图片 Url
        src: "http://zmage.caldis.me/imgSet/childsDream/1.jpg",
        // 图片占位文字
        alt: "图片的占位文字，作为图片的标题, 请尽量保持简短",
        // 图片样式
        style: { borderRadius: 30 },
        // 图片类名
        className: 'testClassName'
    },
    {
        // 另一个图片 Url
        src: "http://zmage.caldis.me/imgSet/childsDream/2.jpg",
        // 另一段图片占位文字
        alt: "图片的占位文字，作为图片的标题, 请尽量保持简短",
    }
]}

defaultPage

set: [
    {
        // 图片 Url
        src: "http://zmage.caldis.me/imgSet/childsDream/1.jpg",
        // 图片占位文字
        alt: "图片的占位文字，尽量保持简短，描述图片作用",
    }
]

browsing

browsing={this.state.contrlledZmageState}

controller

controller={{
    // 关闭按钮
    close: true,
    // 缩放按钮
    zoom: true,
    // 下载按钮
    download: true,
    // 旋转按钮
    rotate: true,
    // 翻页按钮
    flip: true,
    // 多页指示
    pagination: true,
}}

hotKey

hotKey={{
    // 关闭（ESC）
    close: true,
    // 缩放（空格）
    zoom: true,
    // 翻页（左右）
    flip: true,
}}

animate

animate={{
    flip: 'fade',
}}

backdrop

backdrop="linear-gradient(90deg, rgba(0,212,255,1) 0%, rgba(26,94,215,1) 100%)"

zIndex

zIndex={19260817}

radius

radius={5}

edge

edge={20}

onBrowsing

onBrowsing={state => {
    console.info("Browsing State: ", state)
}}

onZooming

onZooming={state => {
    console.info("Zooming State: ", state)
}}

onSwitching

onSwitching={page => {
    console.info("Switching page: ", page)
}}

onRotating

onRotating={deg => {
    console.info("Rotating State: ", deg, "deg")
}}

贡献

我们随时欢迎发起一个 PR 来帮助我们改进代码 如果发现任何问题, 也欢迎 发起一个ISSUE 来反馈你的意见

引用

- [Material Icons](https://material.io/tools/icons/)

证书

react-zmage 基于 MIT licensed 发布

react-zmage's Issues

旋转功能有没有

在table中使用zmage

在table中使用（假设每页显示10条数据），数据有多页，从第二页开始，点击图片后，都是显示的第一页的十张图片，怎么搞？没有设置controller，看controller里默认值pagination: true

怎么修改放大图片后关闭的按钮

怎么修改放大图片后关闭的按钮

不想让放大的图片遮挡其他元素

视乎不支持ssr，服务端渲染报window is not defined

如题

图片太大，给Zmage设置宽高为50，图片放大就模糊了，请问这个怎么解决

能在上角或者别的位置，做两个箭头来切换图片么？

图片旋转

你好 我想问下 由于后台传过来的图片全都是倒立的 排列的时候可进行旋转 但是放大后不能旋转（还是倒立的） 请问怎么更改放大后的旋转呢（如果进行更改.imageLayer__1CUl类名进行旋转的话 动画就没有了 很是突兀）

怎样给放大的图片改为不是全屏播放的？

因为我做的时后台管理系统，左边侧边栏为菜单，如果点击图片放大会把菜单栏也遮住，意思就是把不必要的空白处删除。怎么做啊

bug

图片未找到时，点击放大在缩小后 img位置固定在中间了。

能否添加一个图片下载的功能

能否添加一个图片下载的功能

放大后的图片缩放比例是否可以支持自定义。

是否能支持设置scale3d (1,1,1)。不然放大后图片会失真。

关闭图片时的动画 能否进行参数配置

某些使用场景下 图片高度过高 剩余部分 被隐藏的情况下 点击图片放大后

1. 点击关闭 图片缩回原位置后 有一秒的停顿 此时的图片放大的图片还未消失 但是大小会比原图 (限制了宽高) 大很多 导致遮挡住页面的其他部分 有解决办法嘛?

或者能不能 加快 关闭时的动画 这样 图片变大时 遮住其他部分的时间较短 不易发现

doesn't work well

如果我把几张图片放在一起，设置了每个图片的宽度为100vw，第一张图片点击失效，点击其它图片会把几张图片加在一起以一个长图的方式出现，反而变相缩小了图片，求解？

能提供 api 来支持富文本 img 标签放大

放大的背景颜色，不可控。

能否增加翻页到第一张或最后一张时，对应翻页按钮置灰不可点击选项

demo页有旋转功能，实际使用没有

这样的学法，没有旋转功能，demo页是有的

建议添加左右翻图片的按钮

can not completely close when load a invalid picture url

when I use zmage load a invalid picture url like this

<Zmage controller={ { close: true, zoom: false, flip: true, } } src={ invalid_url }/>

then I zoom in this picture , then close the wrapperLayer still here

背景设置为黑色透明时，操作图标区域背景跟随变化，图标不明显

图标区域背景默认白色会好些。

演示网址操作这个功能好像不是很流畅

演示网址操作这个功能好像不是很流畅

急！急！急！引入的react16.2以上，引入还是报错

引用方法：

报错信息：

如果src的圖片為404。則取消時會有一張alt文字大圖覆蓋取消不了

服务端渲染window未定义。。

服务端渲染window未定义。。

为什么在antd pro 中关闭的时候图片卡在哪里

v

点击图片报异常

代码
import React, { Fragment } from 'react';
import ReactDOM from 'react-dom';
import Zmage from 'react-zmage'

const mountNode = document.getElementById('root');
ReactDOM.render(

, mountNode);

渲染到页面上点击图片报错
VM637 vendor.dll.js:619 Uncaught Error: Expected ref to be a function or a string.

你好 怎么取消动画效果呢

我项目里面的图片是不规则的 但是图片容器是正方形
然后关闭动画的结尾就显得很卡

多图模式下，第一张图片超出展示区域

进入查看模式显示正常

当向左或者向右查看完剩余的图片再回到第一张图片的时候，会放大

演示地址建议来个箭头

演示地址没注意到滚动条还真不知道下面是演示，我点几次马上使用直接就来到github，我还以为什么意思、、

放大之后图片不会缩小，缩回原位

点击图片有放大，但是关闭之后白色背景消失，图片没有缩小还是查看模式下的图片，界面点击事件全部失效

引入之后报错

你好，我在项目中通过文档给出的方式引入并使用，浏览器报错了，报错信息如截图所示

不支持动态

我看了下是不支持动态加载图片吧，渲染后才加载会导致无法加载大图

当界面存在z-index>999后，设置zIndex无效

google浏览器：当界面存在z-index>999后，设置zIndex无效，wrapperLayer还是会被挡住
想给zmage直接加个display: relative; 如果给zmage直接加样式【style】

当使用set属性时，点击该图片显示的总是set设置的第一张图片

company:[
{
src:companyImg1,
alt:"涉密计算机信息系统集成资质证书"
},
{
src:companyImg2,
alt:"高新技术企业批准证书"
},
]
const optionCompany = {
"set":this.state.company
};
{this.state.company.map((item,index)=>{
return(

<Zmage
src={item.src}
{...optionCompany}
/>

)
})}

require is not defined问题

你好我的react16.4 + typescript 3.0.1 或 react16.5.2 + typeccript3.1.3 环境使用该插件时运行报错

Uncaught ReferenceError: require is not defined at eval (external_"react":1) at Object.react (zmage.development.js?e0ce:371) at __webpack_require__ (zmage.development.js?e0ce:21) at Module.eval (index.js:3) at eval (index.js:251) at Module../src/index.js (zmage.development.js?e0ce:334) at __webpack_require__ (zmage.development.js?e0ce:21) at eval (zmage.development.js?e0ce:85) at eval (zmage.development.js?e0ce:88) at Object../node_modules/react-zmage/lib/zmage.development.js (vendors.bundle.js?1bb6e90959802b1f0263:1)

unknown plugin 'add-module-exports' in .babelrc

react版本16.4.0 使用时报错unknown plugin 'add-module-exports' in .babelrc

图片无法设置触摸放大缩小

每次用户双手触摸拉大图片之后， 整个页面的样式也变了，
希望能增加一个禁止用户双手放大图片的入口

功能不能正常使用

"react": "^16.4.0",

关闭按钮和全屏按钮都是不可用的

同样一组图片，预览模式下设置的defaultPage不同，点击轮播图后效果缩放效果不一样

同样的一组图片，预览模式下设置不同的defaultPage，如果图片大小尺寸有区别，则进入预览模式的首页是小图片时后面图片的缩放大小基本都差不多，如果首页为较大的图片，则点击下一页再次转回来时该图片会局部放大失真

图片地址怎么开始显示小图，点击显示大图

用于列表页，需要展示很多图片。列表使用小图地址。

当点击图片看原图时，使用大图地址。

set 的props的刚更新问题

index.js文件中确定是否确定不使用componentWillReceiveProps？
componentWillReceiveProps(nextProps) {
this.setState({
set:this.buildSet(nextProps)
})
}
那么如何保证当前的props是最新的，项目中已遇到该问题，自行修改了包内容，望见谅。
wapper的z-index的层级不可设置也是不好使用的一个点

可否支持添加自定义控制按钮

现有旋转、放大、关闭、换页操作按钮，很简洁。
只是不能在预览时自定义其它操作，比如下载，能否通过添加自定义控制按钮的方式扩展呢？

will-change兼容问题导致模糊

在搜狗8.5版本下，will-change这个css3新属性不受支持

set无效：Invalid prop `set` supplied to `ReactZmage`.

react：^16.4.2　
react-zmage：^0.3.0
代码如下　:
import Zmage from "react-zmage";
import Img1 from "../../image/horco1.jpg";
import Img2 from "../../image/horco2.jpg";

                            <Zmage src={Img1} alt="展示序列图片" set={[
                                {
                                    src: {Img2},
                                    alt: "First image description",
                                },{
                                    src: {Img3},
                                    alt: "Second image description",
                                }]}
                                 />

点开图片后一直在有圈圈加载显示，点击图片就变回原样

你好，很方便；点开图片后一直在有圈圈加载显示，还有放大就模糊了怎么办？

多图模式下，我点第二张或第三张，放大的永远是第一张

transform 没有兼容低版本浏览器

transform:"translate3d(-50%, -50%, 0) translate3d("+r+"px, "+p+"px, 0px) translate3d(0px, "+l+"px, 0px) scale3d("+i+", "+i+", 1) rotate3d(0, 0, 1, "+g+"deg)"
这一段应该加上prefix~ 不然在某些浏览器上位置不正确

图片翻转

挺好的，要是能加一个能够使图片360度翻转的功能就更好了

多图模式下，设置defaultPage无法锁定轮播图的焦点

图片放大后的轮播图首页底部按钮不是选中状态。导致的结果是，如预览模式打开首页为第一张图片，则没有问题，点击下一页是第二张。如设置defaultPage为其他页面，则预览模式打开的首页是该图片，但是点击下一张又会跳转到图片序列里的第二张