手把手教你写一个图片预览组件

一、前言

本篇主要介绍，vue项目手写一个图片预览组件，组件主要包括图片方法、图片缩小、显示原图、下载、复制等功能。

二、实现方式

首先我们需要做一个图片预览组件都有的功能表头，如下图

主要功能包括，放大、缩放比例显示、缩小、原图比例、旋转、复制、下载，如果是多图预览的话，还有上一张、下一张。接下来我们逐个实现各个功能。

1.初始化窗口显示完整图片

我们在一打开图片预览的时候，就是要看到图片的全貌，有时候图片会比我们预览的窗口要大许多，因此我们需要初始化的时候计算图片的大小和窗口大小的对应比例。代码如下