Ionic2实战-图片点击缩放功能开发

阳光穿透心脏的1/2处 2022-05-11 04:33 340阅读 0赞

原文出处：[https://blog.csdn.net/wei11556/article/details/62037428][https_blog.csdn.net_wei11556_article_details_62037428]  
![70][]

# 前言 #

作为一个功能完备的APP，难免需要显示一些图片，而现在的图片通常尺寸都特别大，需要点击放大以后才可以完全看清晰，所以就添加了图片点击缩放功能。

默认情况下，图片都是以缩略图的形式展示，文件大小也是按照缩略图的清晰度下载。当用户需要放大查看的时候则可以单击图片，会自动下载最新的大图，然后全屏显示。

实现本功能完全是依赖开源朋友们无私的贡献，使用了GitHub上开源插件ionic-img-viewer，只需要三五行代码便可以实现强大的功能。大家也可以直接去这个地址查看插件使用说明：[https://github.com/Riron/ionic-img-viewer][https_github.com_Riron_ionic-img-viewer]

# 步骤 #

1、在package.json文件中加入相关插件依赖，加入完记得惯例要npm install一下

> "ionic-img-viewer": "2.4.0"

2、在app.module.ts文件中导入插件

import { IonicImageViewerModule } from 'ionic-img-viewer';
    
    @NgModule({
      imports: [
        IonicImageViewerModule
      ]
    })
    export class AppModule {}

3、然后就可以开始愉快的使用了，具体的使用方法有两种

> <img src="IMAGE\_URL" imageViewer />

或者

> <img src="IMAGE\_URL" imageViewer="OTHER\_IMAGE\_URL" />

我建议在实际使用的时候用后一种，因为缩略图和可缩放的大图实际上分辨率是不一样的，默认src里面可以写一个小尺寸的地址，imageViewer里面写一个大尺寸的地址，这样可以很好地提高效率。

# 最后 #

另外还有一个值得注意的问题是，应用了该插件以后发现在iOS系统上图片通常在被点击一两秒以后才能被打开，这是因为iOS系统的点击延迟所致，有兴趣的话可以去百度，解决办法就是在需要点击的元素上添加tappable属性，比如：

> <img tappable padding imageViewer="\{ \{productPrice.reportImage\}\}" src="\{ \{productPrice.reportImage\}\}?imageView/2/w/400">

可以有效的解决该问题。

好啦，今天的分享就到此为止，大家一周开心，有问题留言。

作者：逃离火星  
链接：https://www.jianshu.com/p/454a0a16ce54  
來源：简书  
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

[https_blog.csdn.net_wei11556_article_details_62037428]: https://blog.csdn.net/wei11556/article/details/62037428
[70]: /images/20220511/667f173244d042859d7b27a54bc94837.png
[https_github.com_Riron_ionic-img-viewer]: https://link.jianshu.com/?t=https%3A%2F%2Fgithub.com%2FRiron%2Fionic-img-viewer