前端（十五）——开源一个用react封装的图片预览组件

已于 2023-08-30 12:26:37 修改
阅读量1.5k 收藏 5
点赞数 4
分类专栏： JS高阶篇 react 开源/封装 文章标签： 前端 github 开源
于 2023-08-28 07:45:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dyk11111/article/details/132050354
版权

在这里插入图片描述

👵博主：小猫娃来啦
👵文章核心：开源一个react封装的图片预览组件

文章目录

组件开源代码下载地址

Gitee：点此跳转下载
CSDN：点此跳转下载

运行

装依赖

npm i

运行

npm start

打开

http://localhost:3000/

效果展示

在这里插入图片描述在这里插入图片描述

实现思路

  • 创建一个React函数组件并命名为ImageGallery。
  • 在组件内部，使用useState钩子来定义状态变量，并初始化为合适的初始值。

selectedImageUrl来追踪当前选中的图片URL；
isOpen来追踪模态框的显示状态；
zoomLevel来追踪图片的缩放级别；
rotateDeg来追踪图片的旋转角度；
flipState来追踪图片的翻转状态等。

  • 渲染组件时，使用map()方法遍历传入的图片URL数组，并为每个元素创建一个缩略图。为每个缩略图添加点击事件处理函数，以便在点击时更新selectedImageUrl和isOpen的状态。
  • 在模态框中，根据isOpen的状态决定是否显示模态框。如果isOpen为真，则显示模态框。
  • 在模态框中，显示选中的大图。根据zoomLevel和rotateDeg应用相应的样式来缩放和旋转图片。

使用CSS的transform属性来实现缩放和旋转效果。

  • 在模态框中，添加放大、缩小、旋转和翻转的功能按钮。为每个按钮添加点击事件处理函数，以便在点击时更新相应的状态变量，如zoomLevel、rotateDeg和flipState。
  • 为模态框添加键盘事件监听。根据按下的键码来触发不同的操作，例如切换图片、放大缩小等功能。
  • 实现拖拽功能，通过鼠标事件监听鼠标按下、移动和松开的过程，在对应的事件处理函数中计算鼠标位移距离，并更新图片的位置。
  • 添加全屏展示功能。为模态框添加全屏按钮，并在点击时调用浏览器的Fullscreen API来进入或退出全屏模式。

使用思路和api

我觉得react没有顺手的图片预览组件，然后就自己封装一个，放在项目文件里，自己本地导入使用，需要微调。也不用担心组件之间的高耦合度，自己也可以控制。

API全部在代码里，手动微调即可。

实现的功能

拖拽，上下左右翻转、旋转，全屏，缩放，缩略图高亮
具体描述如下，缩放级别等数据可以自己改。在哪里改，都有注释，非常清晰

  • 点击缩略图可以在模态框中展示选中的图片，并带有高亮。
  • 可以放大和缩小图片，最大放大到130%，最小缩小到30%。
  • 可以旋转图片，左旋转和右旋转分别是每次旋转90度。
  • 可以上下翻转和水平翻转图片，点击按钮可以进行翻转和恢复默认状态。
  • 可以使用键盘的箭头键进行上一张和下一张图片的切换，同时也支持使用键盘的上下箭头进行放大和缩小。
  • 可以通过拖拽图片进行位置的调整，鼠标按下开始拖拽，松开结束拖拽。
  • 可以进入全屏模式查看图片，再次点击退出全屏。
  • 在模态框中显示缩略图，点击缩略图可以切换到相应的图片。

数据和入口

数据是在APP.jsx里的data，可以换成接口请求到的图片数组
数据入口是在APP.jsx里的<ImagePreview images={images}></ImagePreview>标签上，这个images就是data这个图片数组

在这里插入图片描述

部分代码展示

⭐⭐⭐⭐⭐css
在这里插入图片描述

⭐⭐⭐⭐⭐jsx
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

小猫娃来啦
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
使用react预览上传的图像
weixin_26748899的博客
10-11 1431
Very often, you will find yourself asking a user to upload an image. It is a good idea to present a preview of the picture that is about to be submitted. A significant part of this post has got little...
Gitee开源一个react封装的图片预览组件
08-27
如果我觉得react没有顺手的图片预览组件，就自己封装一个，放在项目文件里，自己本地导入使用，需要微调，自己也知道地方，也不用担心组件之间的高耦合度，自己也可以控制。 api全部在代码里，手动微调即可。 功能...
react-一个几乎完美的ReactImage组件
08-15
react-一个几乎完美的ReactImage组件
React使用antd的图片预览组件，点击哪个图片就预览哪个的设置
08-10 2629
【代码】React使用antd的图片预览组件，点击哪个图片就预览哪个的设置。
推荐一款出色的React图片画廊组件 —— React Photo Gallery
gitblog_00066的博客
05-12 268
推荐一款出色的React图片画廊组件 —— React Photo Gallery 项目地址:https://gitcode.com/neptunian/react-photo-gallery 在Web开发中，我们经常需要创建美观且功能齐全的图片展示区域。【React Photo Gallery】就是这样一款专为React设计的高效、响应式和高度可定制化的图片库组件。它不仅保持了照片的原始比例，还...
react图片预览插件
weixin_45481456的博客
05-31 897
"dependencies": { "@gago-react-gl/core": "^4.1.7", "@gago/axis-chart": "^1.0.42", "@gago/icon": "^0.4.1", "@gago/pie-chart": "0.0.3", "@mapbox/mapbox-gl-draw": "^1.1.2", "@turf/center": "^6.5.0", "babel-plugin-import": "^1.13.3.
react 预览图片 @hanyk/rc-viewer
yeee1128的博客
08-16 861
1.安装包 npm i @hanyk/rc-viewer 2.引入 import RcViewer from "@hanyk/rc-viewer"; 3.使用 let options = { navbar: false, //关闭缩略图 fullscreen: false, //播放全屏 loop: false, //是否循环 上一个 下一个 toolbar: {
我用这 18 个神奇的库，美化了我的项目，真是亮瞎我的眼！
粉丝们务必加入微信粉丝群
09-30 395
作者：Chimezie Enyinnaya 译者：前端小智 来源：blog 有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。 上代码。。。。。。。。。。 1. Lottie-Web/Bodymovin github 地址：https://github.com/airbnb/lottie-web 从我最喜欢的资源库开始。有了.
React实现移动端图片预览组件
Caroline_cai的博客
10-19 1349
安装 npm install --save react-wx-images-viewer 或者 yarn add react-wx-images-viewer 引入 import WxImageViewer from 'react-wx-images-viewer'; 使用 <WxImageViewer onClose={this.onClose('isOpen')} urls={imags} /> 完整代码 import WxImageViewer from 'react-wx-ima
react-这是一个用于做图片预览或者图片查看得react插件
08-15
在React开发领域，图片预览和查看功能是常见的需求，特别是在构建富交互式的Web应用时。...通过深入研究源码，开发者还可以学习到如何将第三方库或功能封装成React组件，以及如何处理图片预览相关的前端技术。
React教程之封装一个Portal可复用组件的方法
08-28
react的核心之一是组件，下面这篇文章主要给大家介绍了关于React教程之封装一个Portal可复用组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
一款基于react的图片预览组件特别适合于异步获取的富文本中的图片
08-10
A ReactJS image Viewer Component for mobile 一款基于react的图片预览组件，特别适合于异步获取的富文本中的图片，点击图片即可全屏显示，并且带有轮播效果。
react-images-upload:用图像预览React输入文件组件
05-11
图片上传器用户界面组件 简单的组件，用于使用React.js构建的预览来上传和验证（客户端）图像。 该软件包使用动画文件预览图像。 安装 npm install --save react-images-upload 用法 使用课程 import React from "react" ; import ImageUploader from "react-images-upload" ; class App extends React . Component { constructor ( props ) { super ( props ) ; this . state = { pictures : [ ] } ; this . onDrop = this . onDrop . bind ( this ) ; } onDrop ( pictureFiles
react-一个用于展示头像的React组件
08-15
一个用于展示头像的React组件
React-Thumb-Preview：一个用于缩略图预览的React组件
02-13
React拇指预览 一个React组件，提供由mousemove事件控制的缩略图预览效果。 用法 通过npm安装： npm install thumb-preview --save 然后调用ThumbPreview组件，通过images道具传递图像路径： var images = [ "/path/to/image_1.jpg" , "/path/to/image_2.jpg" , "/path/to/image_3.jpg" ] React . render ( < ThumbPreview xss=removed> , targetElement ) ; 这是插件的端口 例子 检查index.html ，以了解与此组件之间的比较。 我已经在Chrome 43.0.2357.130（64位）和Firefox 38.0.5中运行了一些基准测试： Chr
react-一个React的图片多剪裁组件
08-15
一个React的图片多剪裁组件
基于react实现的图片预览组件源代码
最新发布
06-12
在本文中，我们将深入探讨如何基于React实现一个功能丰富的图片预览组件，这个组件具有多种交互功能，如左右切换、手势操作以及键盘控制等。首先，我们要了解React的基础概念，它是Facebook开发的一个JavaScript库，...
react-一个简单的甘特图React组件封装
08-15
在这个场景下，我们将讨论如何封装一个简单的甘特图React组件，并探讨相关的React技术和图表绘制策略。 首先，让我们了解React组件的基本概念。React组件是可重用的代码块，它们像JavaScript函数一样接收任意输入...
react 用组件库快速实现轮播图，猛练自然强
Lkkkk666的博客
07-19 766
1.用到的组件库是 react-vant 网址链接: react-vantnpm i react-vantyarn add react-vant2.找到swiper轮播 用它的图片懒加载 图片列表 总结：1.引入组件 2.图片列表，返回一个数组，可以返回地址，也可以返回本地地址，用es6的模块化引入 3.如果让图片自己动起来，组件库中有方法 让自己轮播 <Swiper autoplay={2000} autoplay属性 默认是false，给它设置一个值即可 在轮播板块下面有很多的设置api，可以进行参
用react封装一个弹窗组件
06-06
好的，以下是一个简单的弹窗组件示例： ```javascript import React, { useState } from "react"; const Modal = ({ title, content, onClose }) => { const [isOpen, setIsOpen] = useState(true); const handleModalClose = () => { setIsOpen(false); onClose(); }; return ( <div className={`modal ${isOpen ? "is-active" : ""}`}> <div className="modal-background" onClick={handleModalClose} /> <div className="modal-card"> <header className="modal-card-head"> <p className="modal-card-title">{title}</p> <button className="delete" aria-label="close" onClick={handleModalClose} /> </header> <section className="modal-card-body">{content}</section> </div> </div> ); }; export default Modal; ``` 这个弹窗组件包括一个标题和内容，可以通过设置 `isOpen` 属性来控制显示和隐藏。在关闭弹窗时，我们需要调用 `onClose` 回调函数来通知父组件。 使用方式： ```javascript import React, { useState } from "react"; import Modal from "./Modal"; const App = () => { const [isModalOpen, setIsModalOpen] = useState(false); const handleOpenModal = () => { setIsModalOpen(true); }; const handleCloseModal = () => { setIsModalOpen(false); }; return ( <div> <button onClick={handleOpenModal}>Open Modal</button> <Modal title="Modal Title" content="This is the content of the modal." onClose={handleCloseModal} isOpen={isModalOpen} /> </div> ); }; export default App; ``` 在这个例子中，我们在父组件中定义了一个 `handleOpenModal` 回调函数来打开弹窗，以及一个 `handleCloseModal` 回调函数来关闭弹窗。我们将这些回调函数传递给 `Modal` 组件，并通过 `isOpen` 属性来控制弹窗的显示和隐藏。 注意，这只是一个简单的示例，实际应用中可能需要更多的功能和自定义选项。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小猫娃来啦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值