因为最近工作需要预览制作一个图片预览的插件，在查看了很多产品（掘金、知乎、简书、石墨等）的图片预览之后，还是觉得石墨的图片预览符合我们的产品需求。

这是一个基于 React Hoos 开发的 仿石墨的图片 放大预览插件。

在社区找了很久之后，没有找到相关的轮子，于是自己撸了一个。

插件的功能是当你的设备支持 canvas 的时候，就使用 canvas 进行绘图，当不支持 canvas 的时候就直接显示图片。

• 放大图片
• 缩小图片
• 原尺寸大小显示
• 适应屏幕
• 下载图片

// 安装
npm install darrell-photo-gallery -D

// 在项目中使用

import PhotoGallery from 'darrell-photo-gallery';
import 'darrell-photo-gallery/lib/main.min.css';

<PhotoGallery
 visible={visible}
 imgData={ImgData}
 currentImg = {9}
 hideModal={
  () => {
    setVisible(false);
  }
 }
/>

目前支持四个参数：

• visible：boolean，预览插件的显示隐藏

• imgData：object，具体属性如下

  interface Img {
    url: string;
    size?: string;
    width?: string;
    height?: string;
    [propName: string]: any;
  }

• currentImg：number，当前图片在图片数组中是第几张

• hideModal：hideModal?(): void;，是一个函数，关闭图片预览弹窗

原理介绍大家可以移步笔者的掘金文章：使用 React Hooks 实现仿石墨的图片预览插件（巨详细）