Ionic 5中如何按尺寸动态分割图片并实现选区预览？

刚好做过类似的需求，给你一套完整的Ionic 5实现方案，直接就能用！

• 先把Base64图片加载到Canvas中，利用Canvas的getImageData和toDataURL方法完成区域裁剪，完全不会遮挡原图内容
• 根据你指定的分割数量（比如3、8），自动计算最优的行列分布（优先让分割块接近正方形，视觉更协调）
• 把每个裁剪后的区域转成新的Base64，用Ionic组件展示预览，支持选中交互

1. 页面HTML（image-split.page.html） #

用Ionic标准组件搭建布局，包含图片上传、分割参数设置、预览区域，逻辑清晰：

<ion-header>
  <ion-toolbar>
    <ion-title>图片分割工具</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <!-- 图片上传区域 -->
  <ion-card>
    <ion-card-content>
      <input type="file" accept="image/*" (change)="onImageSelected($event)" style="display: none;" #fileInput>
      <ion-button expand="full" (click)="fileInput.click()">选择图片</ion-button>
      <img [src]="originalImage" *ngIf="originalImage" class="original-img" />
    </ion-card-content>
  </ion-card>

  <!-- 分割参数设置 -->
  <ion-card *ngIf="originalImage">
    <ion-card-header>
      <ion-card-title>分割设置</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-item>
        <ion-label>总块数</ion-label>
        <ion-input type="number" min="1" [(ngModel)]="splitCount" (ionChange)="calculateGrid()"></ion-input>
      </ion-item>
      <ion-button expand="full" (click)="splitImage()" [disabled]="splitCount < 1">开始分割</ion-button>
    </ion-card-content>
  </ion-card>

  <!-- 分割预览区域 -->
  <ion-card *ngIf="splitImages.length > 0">
    <ion-card-header>
      <ion-card-title>分割预览</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-grid>
        <ion-row *ngFor="let row of splitImages; let i = index">
          <ion-col *ngFor="let img of row; let j = index" size="{{12 / cols}}">
            <img [src]="img" class="split-img" [class.selected]="selectedIndex === i * cols + j" (click)="selectBlock(i * cols + j)" />
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>
</ion-content>

2. 页面TS逻辑（image-split.page.ts） #

核心是图片转Canvas、分割计算、裁剪生成新Base64的逻辑，注释很详细，直接套用即可：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-image-split',
  templateUrl: './image-split.page.html',
  styleUrls: ['./image-split.page.scss'],
})
export class ImageSplitPage implements OnInit {
  originalImage: string = '';
  splitCount: number = 3;
  cols: number = 0;
  rows: number = 0;
  splitImages: string[][] = [];
  selectedIndex: number = -1;

  constructor() { }

  ngOnInit() {
  }

  // 选择图片并转成Base64
  onImageSelected(event: any) {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        this.originalImage = e.target?.result as string;
        this.calculateGrid(); // 自动计算行列分布
      };
      reader.readAsDataURL(file);
    }
  }

  // 根据总块数计算最优行列（尽量接近正方形）
  calculateGrid() {
    if (this.splitCount < 1) return;
    this.cols = Math.ceil(Math.sqrt(this.splitCount));
    this.rows = Math.ceil(this.splitCount / this.cols);
    // 若需要优先纵向分割，调换cols和rows的赋值即可
  }

  // 分割图片核心逻辑
  splitImage() {
    this.splitImages = [];
    const img = new Image();
    img.src = this.originalImage;
    img.onload = () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      if (!ctx) return;

      const imgWidth = img.width;
      const imgHeight = img.height;
      const blockWidth = Math.floor(imgWidth / this.cols);
      const blockHeight = Math.floor(imgHeight / this.rows);

      // 循环裁剪每个块
      for (let i = 0; i < this.rows; i++) {
        const rowImages: string[] = [];
        for (let j = 0; j < this.cols; j++) {
          // 处理最后一行/列的剩余尺寸，避免图片被截断
          const actualWidth = (j === this.cols - 1) ? imgWidth - j * blockWidth : blockWidth;
          const actualHeight = (i === this.rows - 1) ? imgHeight - i * blockHeight : blockHeight;

          canvas.width = actualWidth;
          canvas.height = actualHeight;
          ctx.drawImage(img, j * blockWidth, i * blockHeight, actualWidth, actualHeight, 0, 0, actualWidth, actualHeight);
          rowImages.push(canvas.toDataURL('image/png'));

          // 达到指定分割数后停止循环
          if (rowImages.length + i * this.cols === this.splitCount) {
            this.splitImages.push(rowImages);
            return;
          }
        }
        this.splitImages.push(rowImages);
      }
    };
  }

  // 选中某个分割块
  selectBlock(index: number) {
    this.selectedIndex = index;
    // 这里可以添加选中后的逻辑，比如保存选中块的Base64
    console.log('选中块索引：', index);
    console.log('选中块Base64：', this.splitImages[Math.floor(index / this.cols)][index % this.cols]);
  }
}

3. 页面样式（image-split.page.scss） #

简单调整样式，让预览更美观，选中状态有高亮提示：

.original-img {
  width: 100%;
  margin-top: 10px;
  border-radius: 8px;
}

.split-img {
  width: 100%;
  margin: 4px 0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.split-img.selected {
  border: 3px solid #3880ff;
  box-shadow: 0 0 8px rgba(56, 128, 255, 0.5);
}

• Canvas裁剪精度：处理最后一行/列的剩余尺寸，避免图片被生硬截断，保证内容完整性
• 行列自动适配：通过平方根计算最优行列，让分割块尽量接近正方形，视觉体验更好
• 选中交互：点击预览块可高亮，方便后续对选中块进行保存、上传等操作
• Base64兼容性：直接用toDataURL生成Base64，完美适配Ionic的图片展示逻辑

内容的提问来源于stack exchange，提问作者cakePHP