前端居中截取不同形状的图片

键.

已于 2023-09-08 10:51:45 修改

阅读量180

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js 前端开发小技巧文章标签：前端 canva可画

于 2023-09-08 10:48:56 首次发布

本文链接：https://blog.csdn.net/beekim/article/details/132753834

为满足类似微信朋友圈九宫格展示效果，本文探讨两种前端实现图片居中裁剪的方法。方案一采用样式居中，适用于紧急情况；方案二利用canvas截取，通过getImageData计算公式进行精确裁剪。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发的时候拿到这样一个需求：
在这里插入图片描述
意思就是要居中截取图片，这个功能跟微信朋友圈的九宫格显示功能差不多的效果。

方案一

用样式居中，这种方案适合紧急情况下的临时方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
     .bg{
     
     
        display: flex;
    }
    .bg1{
     
     
        width: 400px;
        height: 700px;
        margin-left: 10px;
        background: url(换成图片地址)   no-repeat  ;
        background-size: cover;

    }
    .bg2{
     
     
        width: 300px;
        height: 300px;
        margin-left: 10px;
        background:url(换成图片地址) center center no-repeat;
        background-size: cover;
    }
</style>
<body >
    <div class="bg">
        <div class="bg1">
          
        </