【React进步系列】 前端图片全屏放大缩小功能推荐 react-photo-view

已于 2024-07-23 10:32:17 修改
阅读量472 收藏 1
点赞数 3
分类专栏： React进步系列 文章标签： 前端 react.js 前端框架
于 2024-04-10 18:39:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42900858/article/details/137606438
版权
本文描述了一家公司如何解决图片预览需求，作者先前尝试自己实现但效果不佳，后来在GitHub上找到并推荐了轻量级的react-photo-view库，该库支持全屏显示、左右切换、滚轮缩放等功能，满足业务需求且易于集成。
摘要由CSDN通过智能技术生成

前言

公司业务需要对图片点击全屏显示,并且支持图片左右切换,滚轮放大缩小.还要有放大缩小按钮.让做个和飞书文档里差不多的图片预览功能.

其实之前我自己写了一个全屏的蒙层去全屏显示图片.宽高都给图片拉大了.但是当图片很高时,依旧看不清,而且也无法满足新的业务需求.

于是我看了下飞书的功能,手写一个也可以,但是时间紧任务重啊.于是我去github上找了找开源的库,找了半天终于发现一个轻量,好用,又满足我需求的开源库

推荐react-photo-view

下面是官网例图
在这里插入图片描述
可以图片组左右切换,还可以放大缩小(鼠标滚轮也会放大缩小),还能旋转,全屏,顶部工具栏还可以自定义,太香了.
直接放到项目用.特别方便,分享给大家使用.我就喜欢使用这种轻量好用的开源库.花里胡哨没用.还多余增加项目的大小.

github地址

react-photo-view

官网地址

react-photo-view官网

七宝文
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
react-基于viewerjs实现的react图片预览组件支持的旋转缩放和缩放等操作
08-15
基于viewer.js实现的react图片预览组件，支持的旋转，缩放和缩放等操作
react仿淘宝图片放大镜效果
04-23
使用react写一个仿图片放大镜效果使用react写一个仿图片放大镜效果
基于React的图片预览组件
weixin_38974419的博客
12-09 5279
需求：最近项目中遇到要进行图片预览的需求，在网上找了一大圈可用的图片预览组件，起初选择react-wx-images-viewer作为预览组件二次开发，但后来发现虽然这个组件在Git上113个star，但这个组件用起来并不给力。切换图片时有种要飞的感觉，而且支持的功能也不是特别丰富，所以果断放弃了react-wx-images-viewer。然后在网络上继续寻找，最后发现一个开源预览组件非常好用，动画效果体验较好，支持的功能比较丰富，在这里记录下二次封装过程。 采用的图片预览组件：react-photo-
高效图片查看利器：react-images-viewer
gitblog_00063的博客
06-10 271
高效图片查看利器：react-images-viewer 项目地址:https://gitcode.com/guonanci/react-images-viewer 项目介绍 react-images-viewer 是一款轻量级、响应式的 React 图片查看库，它使你能够轻松地在应用中实现高质量的图片浏览体验。该项目由 GuoNanCi 开发并维护，支持自定义控制、键盘导航以及多种图片格式，是为...
React项目实现图片预览-viewerjs-react 点击图片放大查看组件，可翻转插件
z611739的博客
10-12 3912
项目经常有查看大图预览的需求，如果是自己写的用模态框写的查看大图，只是简单看看还可以，如果需要旋转，放大缩小，反转操作，就会很麻烦。我们可以使用viewerjs-react 使用viewerjs-react插件实现图片的预览 1.安装viewerjs-react npm install --save viewerjs@^1.9.0 viewerjs-react 2.组件中引入viewerjs-react 3.使用 4 效果展示： npm地址：view...
探索交互新可能：React-Zmage 图片缩放组件
gitblog_00011的博客
05-16 449
探索交互新可能：React-Zmage 图片缩放组件 项目地址:https://gitcode.com/Caldis/react-zmage 当我们在网页设计中追求卓越的用户体验时，细节往往成为关键。今天，我们向您隆重推荐一款强大的开源组件——React-Zmage。这是一个专为React开发者打造的图片缩放控件，它让您的图片不仅具备基础展示功能，还能轻松实现缩放效果，提升用户浏览体验。 项目介绍...
react使用antd中的table表格渲染一张或者多张图片并且实现点击放大预览图片
m0_69892739的博客
03-24 1219
【代码】react使用antd中的table表格渲染一张或者多张图片并且实现点击放大预览图片。
【react】 PhotoProvider, PhotoView实现点击图片，图片可放大或移动的效果
m0_52743009的博客
10-26 1278
react中PhotoProvider, PhotoView实现点击图片，图片可放大或移动的效果
react-这是一个用于做图片预览或者图片查看得react插件
08-15
这是一个用于做图片预览或者图片查看得react插件
点击图片放大弹出
qq_35941755的博客
11-08 673
点击图片放大弹出
react-photo-view图片预览组件
最新发布
06-11
一款超精致的图片预览组件 支持触摸手势，拖动/平移/物理效果...支持自定义节点扩展，轻松实现全屏预览、旋转控制、图片介绍以及更多功能 基于 typescript，7KB Gzipped，支持服务端渲染 简单易用的 API，上手零成本
react-React的图像查看器组件支持基于viewerjs的旋转缩放缩放等
08-15
React的图像查看器组件，支持基于viewer.js的旋转，缩放，缩放等
一款基于react的图片预览组件特别适合于异步获取的富文本中的图片
08-10
A ReactJS image Viewer Component for mobile 一款基于react的图片预览组件，特别适合于异步获取的富文本中的图片，点击图片即可全屏显示，并且带有轮播效果。
react-img-zooms:react实现图片的放大、缩小、旋转及移动功能组件
05-09
使用 React+typescript 的组件库 react实现图片的放大、缩小、旋转及移动功能组件 npm install react-image-zoom --save 使用 // 引入组件 import { ImgZoom } from 'react-image-zoom' // 代码示例 <ImgZoom dataSource={{ > ImgZoom Component property propType required default description dataSource object yes { url: '', scale: 1, rotate: 0,
点击缩略图，放大图片，大图以轮播的形式展现
01-16
点击缩略图，放大图片，大图以轮播的形式展现，轮播图中默认展现当前点击的图片
react-imageViewer：用于全屏显示图像的React组件
02-03
React图像查看器 移动友好型图片幻灯片React组件 例 产品特点 接近原生体验（由提供） 捏放大/缩小 无需不必要的渲染（该组件一次只能渲染3张图像） 同时支持触摸和鼠标事件 开始使用 运行yarn add react-imageslides react react-dom程序包具有对等依赖于react@^16.3.0 react-dom@^16.3.0 ， yarn add react-imageslides react react-dom react@^16.3.0 react-dom@^16.3.0和alloyfinger 。 渲染它！ import React from 'react' ; import ReactDOM from 'react-dom' ; import ImageSlides from 'react-imageslides' ; const images = [ 'http://dingyue.nosdn.127.net/lXMRCRbP9PYbv2gMBmHGXRnjspn6pT1PM5DrIGcEZSUTu1531904526913c
react-photo-view-master.zip
07-22
import PhotoView from 'react-photo-view'; const App = () => { const imageSource = 'https://example.com/image.jpg'; return ( src={imageSource} initialZoom={1} minZoom={1} maxZoom={3} onTap...
MinJieLiu-react-photo-view-master_React_
10-04
在React开发中，有时我们需要为用户创建一个直观且功能丰富的图片预览体验，"MinJieLiu-react-photo-view-master" 就是这样一个专为React设计的图片预览组件。这款组件提供了许多实用功能，包括但不限于左右切换、...
浏览图片，点击放大liula
CK_YL的博客
02-07 628
点击小图放大图片，就是把图片带到另一个页面进行放大浏览， 1.首先找到几张图片 2.在首页面加载一个RecyclerView 的布局控件 实现它的Adapter 让它以横向排列。在Adapter里面实现Itme的点击事件的实现方法，在Activity里面调用，点击跳转到另一个页面，需要传两个数据，图片的集合，和点击的图片位置。 mGrid = (RecyclerView) findVie
react native使用react-native-photo-editor组件，没有权限保存图片
05-24
在 React Native 中，保存图片需要获取写入权限。您可以使用 React Native 的 PermissionsAndroid API 来请求用户的许可。 以下是一些示例代码，可以在保存图片之前请求权限： ```javascript import { PermissionsAndroid, Platform } from 'react-native'; import RNFetchBlob from 'rn-fetch-blob'; async function requestStoragePermission() { try { const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE, { title: 'Storage Permission', message: 'App needs access to your storage to save photos', }, ); if (granted === PermissionsAndroid.RESULTS.GRANTED) { console.log('Storage permission granted'); } else { console.log('Storage permission denied'); } } catch (err) { console.warn(err); } } async function saveImage(imageUri) { if (Platform.OS === 'android') { await requestStoragePermission(); } const { config, fs } = RNFetchBlob; const date = new Date(); const imagePath = `${fs.dirs.DCIMDir}/photo_${date.getTime()}.png`; await config({ fileCache: true, addAndroidDownloads: { useDownloadManager: true, notification: true, path: imagePath, }, }).fetch('GET', imageUri); console.log('Image saved to', imagePath); } ``` 这里使用了 RNFetchBlob 模块来下载和保存图片。在 Android 平台上，我们先请求存储权限，然后使用 `addAndroidDownloads` 配置项将图片保存到设备上。 请注意，如果您正在使用 Expo，您需要使用 `expo-permissions` 模块来请求权限。您可以使用以下代码示例： ```javascript import { Platform } from 'react-native'; import * as ImagePicker from 'expo-image-picker'; import * as Permissions from 'expo-permissions'; import RNFetchBlob from 'rn-fetch-blob'; async function requestStoragePermission() { const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL); if (status === 'granted') { console.log('Storage permission granted'); } else { console.log('Storage permission denied'); } } async function saveImage(imageUri) { if (Platform.OS === 'android') { await requestStoragePermission(); } const { config, fs } = RNFetchBlob; const date = new Date(); const imagePath = `${fs.dirs.DCIMDir}/photo_${date.getTime()}.png`; await config({ fileCache: true, addAndroidDownloads: { useDownloadManager: true, notification: true, path: imagePath, }, }).fetch('GET', imageUri); console.log('Image saved to', imagePath); } ``` 请注意，这里使用了 Expo 的 `Permissions` 模块来请求存储权限，而不是使用 `PermissionsAndroid`。此外，Expo 也提供了自己的 `ImagePicker` 模块，可以用来选择图片，而不需要使用第三方组件。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值