实现图片自动居中裁剪

一时失言乱红尘 2024-04-17 05:41 68阅读 0赞

# 问题描述： #

> 由于后台返回图片的大小不一致，但是前端要求把他们展示成大小一致且不变形。
> 
> 小程序使用mode:aspectFill
> 
> 但是如果是pc端和移动端。应该如何实现img标签图片的居中和自动裁切？

# 问题解决： #

## 1. 非真正的裁剪 ##

\---------》即只进行前端预览时裁剪

### 1.1  使用css background ###

（不推荐，因为不方便维护。当需要动态改变时需要去操作单独的style）

简单说明一下background-size 的属性，因为被W3C讲得有点绕，总结就是：

cover:让图片填充满父节点，超出部分隐藏，仅显示中间，这才是我们想要的效果。

contain:让图片根据父节点宽高等比例缩放。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70][]

### 1.2 使用css3 object-fit属性 ###

（css3新增属性，可能会有浏览器兼容问题）

这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能。

.aspectFill img{
        width: 200px;
        height: 200px;
        object-fit: cover;
    }

object 属性有5个属性值，具体含义如下;

*  fill: 中文释义“填充”。**默认值**。图片拉伸填满容器, 不保证保持原有的比例缩放。
 *  contain: 中文释义“包含”。保持原有尺寸比例缩放。长边匹配，短边留空。
 *  cover: 中文释义“覆盖”。保持原有尺寸比例缩放。短边匹配，裁剪过长区域。即是我们想要的效果
 *  none: 中文释义“无”。保持原有尺寸比例。不缩放。
 *  scale-down: 中文释义“降低”。如若依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70 1][]

### 1.3 套一个父级元素，居中定位，超出部分隐藏 ###

\---------》（不会有浏览器兼容问题）

使用一个与目标图片大小一致的div, 设置overflow: hidden;

里面的 img标签，图片用absolute定位设置为居中

将图片宽高按比例缩放。

html

<div class="banner-img__wrapper">
        <img src="url" class="banner-img">
    </div>

css

.banner-img__wrapper {
        position: relative;
        /* 目标宽高 */
        width: 100px; 
        height: 100px;
        overflow: hidden;
    }
    .banner-img{
        position: absolute;
        left: 50%;
        top: 50%;
        transform-origin: left top;
        /* 图片原宽高去缩放，选择宽高缩放比中较大的一个 */
        /* 如这里图片原宽高是 496*640, 宽缩放比=100/496,高缩放比=100/640,则较大的为100/496~0.2 */
        transform: scale(0.2) translate(-50%, -50%);
    }

![uploading.gif][]正在上传…重新上传取消

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70 2][]

### 1.4  将1.3写成一个组件 ###

待整理~

## 2. 真正的裁剪 ##

### 2.1 利用canvas进行裁剪 ###

利用wx.getImageInfo 获取图片信息res，如宽高等，然后锁定宽高比（按照 canvas\_width / canvas\_height）

进行图片缩放裁剪，满足短边全部显示，长边的裁剪两边，只显示中间

let img_width;
    let img_height;
    // 裁剪正方形/长方形
    // 需设置图片有在合法域名中，才能拿到图片的信息！！
    // res 为wx.getImageInfo 的返回值
    img_width = res.width;
    img_height = res.height;
    
    let canvas_width = width; // 海报中给目标图片预留的宽、高
    let canvas_height = height;
    let clip_left,clip_top; //左偏移值，上偏移值
    let clip_width,clip_height; //截取宽度，截取高度
    
    // 按画布锁定宽高比, 满足短边，裁剪长边来剪裁图片，效果类似 aspectFill
    clip_height = img_width * (canvas_height / canvas_width);
    // 如果按照这个比例裁剪后的图片高度与原图高度还高，证明图片 高度是短边，宽度是长边
    if(clip_height > img_height){ 
      clip_height = img_height;
      clip_width = img_height * (canvas_width / canvas_height);
      clip_left = (img_width - clip_width) / 2 + left;
      clip_top = 0 + top;
    }else{
      clip_width = img_width;
      clip_left = 0 + left;
      clip_top = (img_height - clip_height) / 2 + top;
    }
    
    // url，图片水平偏移，图片垂直偏移，图片截取宽度，图片高度，图片理想水平偏移，图片理想高度偏移，
    this.ctx.drawImage(url, clip_left, clip_top, clip_width, clip_height, left, top, canvas_width, canvas_height);
    this.ctx.restore();

如果文章对你有帮助，麻烦点赞哦，一起走花路吧~

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/9af2fa76544940d494feb32a85015562.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/d7e56a1eb825425aa05ce295575632fb.png
[uploading.gif]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jc2RuaW1nLmNuL3JlbGVhc2UvcGhvZW5peC93cml0ZS9hc3NldHMvdXBsb2FkaW5nLmdpZg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/0906af826bae4bf0b53e851357e709a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/fa14ac2d9dca4d9cb83564d2027e997b.png