图片自适应裁剪与缩放-vue组件（仿微信小程序）

功能概述

        制作一个组件，如微信的image标签一样拥有13种mode，以及懒加载功能。本次可以说是一次功能的移植。功能属性名均参照微信api文档制作。使用方式也与小程序的image基本一致。因为开发小程序时觉得这个标签给的属性不错，所以在vue中我也做了个一样的组件。没有开发过小程序的同志可以查看微信api文档或者更继续参考下文。

13种mode

        13种mode包括4种缩放，9种裁剪。各种mode展示如下图。

图1.mode展示

        13种mode解释如下图，截取自微信api文档。

图2-1.mode解释

图2-2.mode解释

        其中widthFix在在图中没有展示出特性，特别解释下，widthFix主要用于多长图，只固定宽度，高度自适应。

代码详解

        html部分，我们把这个组件做成div嵌套一个img标签的形式，所有的裁剪模式中，我们不缩放图片，所以不设置img宽高，给div的样式overflow：hidden；只显示图片在div尺寸的部分。然后通过flex布局控制img在div的位置，来控制div显示img的部分。具体样式请查看我的gitee源码。

图3.标签设计

        主要js控制缩放模式。缩放模式下，我们控制图片宽高，img样式只填写width：100%；或 height：100%；。具体宽高均由外层div控制，当img拥有width：100% 或 height：100% 时，图片会自动缩放。
        解释下面代码：首先我定义了一个scaleModeList，这个数组中有4个字符串，分别是4种缩放mode。
当用indexof返回-1时证明传递的mode不属于缩放模式，所以直接返回空，不继续执行，否则继续。
当scaleToFile模式时，不等比缩放，我们设置img宽高均为100%（这里我有公共样式wh100，h100，w100）。
当widthFix模式时，只固定宽度，我们设置img的宽为100%（我给了img一个w100的class）。
当是另外两种缩放时，我们需要检查原图片宽高那个更长一些，这里我们用naturalHeight与naturalWidth取原图宽高比较。
aspactFit是显示完整图片等比缩放，设置长边是100%，
aspactFill是等比缩放长边裁剪，设置短边100%。（只设置宽或高时图片就是等比缩放的）

图4.缩放控制

以上已经介绍完了主体本分。想了解完整代码或者直接下载使用可以查看我的gitee-image.vue。
ps.使用例在helloworld.vue中

想了解懒加载部分详解可阅读我的另一篇vue中图片预加载&懒加载

转载到其他平台需含本文的链接