Разделить изображение на части ionic

Question

Я хочу динамически разделить изображение на несколько частей на основе размеров в ioni c 5.

скажем

• 3 штуки
• 8 частей
• любое число

Я пробовал css трюки, чтобы сделать белую цветную линию на изображении, но это скрывает часть изображения.

Я прочитал эти два блока, но помогло мне

разделить изображение base64 на части

Разделить изображение на части

Я хочу показать предварительный просмотр выбора.

эталонное изображение Пожалуйста, помогите

Answer 1

Прежде всего, вам нужно сгенерировать компонент. Я назвал его img-tile-style . затем вы помещаете эти коды в файлы. html. css и .ts.

HTML:

<div class="image-holder">
  <img [src]="imgSrc">
  <div class="grid"></div>
</div>

CSS: (измените img - > ширина и высота и . сетка -> цвет границы для настройки)

.image-holder {
  width: fit-content;
  height: fit-content;
  position: relative;
}

.image-holder img {
  width: 300px;
  height: 400px;
}

.image-holder .grid {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px gray solid;
}

TypeScript: (измените цвет границы для настройки)

export class ImgTileStyleComponent implements OnInit {

  @Input() imgSrc: string;
  @Input() row: number;
  @Input() col: number;

  constructor() {}

  ngOnInit(): void {
    console.log(this.imgSrc, this.row, this.col);

    console.log('here');
    const grid = document.getElementsByClassName('grid')[0];
    console.log(grid);
    const row = '<div class="row" style="display: flex; flex-direction: row; flex-grow: 1;"></div>';
    const cell = '<div class="cell" style="flex-grow: 1; box-sizing: border-box; border: 1px gray solid;"></div>';
    for (let i = 0; i < this.row; i++) {
      grid.insertAdjacentHTML('beforeend', row);
    }
    for (let i = 0; i < this.row; i++) {
      const el = document.getElementsByClassName('row')[i];
      for (let j = 0; j < this.col; j++) {
        el.insertAdjacentHTML('beforeend', cell);
      }
    }
  }

}

тогда в своем проекте вы просто используете тег: <app-img-tile-style></app-img-tile-style>

атрибуты, которые вы должны установить:

imgSr c imgSrc = "./assets/images/defaultCompanyPic.png"

row -> row =" 4 "

col -> col =" 3 "

полный пример здесь:

<app-img-tile-style imgSrc="./assets/images/defaultCompanyPic.png" row="4" col="3"></app-img-tile-style>

Я поместил этот компонент в репозиторий на Github. Ссылка: img-tile-style .

Answer 2

вы можете использовать что-то подобное с некоторыми стилями ...

HTML:

 <div class="image-holder">
    <img src="./assets/images/defaultCompanyPic.png">
    <div class="grid">
      <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
      </div>
      <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
      </div>
      <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
      </div>
      <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
      </div>
    </div>
  </div>

CSS:

.image-holder {
  width: fit-content;
  height: fit-content;
  position: relative;
}

.image-holder img {
  width: 300px;
  height: 400px;
}

.image-holder .grid {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px gray solid;
}

.image-holder .grid .row {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}

.image-holder .grid .row .cell {
  flex-grow: 1;
  box-sizing: border-box;
  border: 1px gray solid;
}

Удачи!