縮放和裁剪圖像並在頂部繪制一個 svg-square（角度）

Question

“stackblitz 值一千字”： https ://stackblitz.com/edit/angular-zoom-crop-marker

基本上我想要做的是在圖像（ <img> ）的某個位置上方繪制一個正方形，並在放大/縮小和裁剪時動態調整圖像。 stackblitz 鏈接有 3 個視圖，一個是普通圖像的基本視圖，一個可縮放視圖（我也使用過）以及一個在可縮放時“放大和裁剪”圖像的視圖 - 這就是我需要你的地方幫助。

我應該以某種方式使用 object-fit 進行裁剪嗎？ 如果我使用畫布來處理這個會更好嗎？ 我已經研究了整整一天，我覺得我的 css 知識太有限了，無法解決這個問題。

額外問題：我將如何讓放大縮小按鈕僅使用 css flex-box 每行添加/刪除一個圖像？ （即：不是在高度和寬度上靜態添加 x 個像素，而是增加或減少每個圖像的大小，以便刪除或添加另一個圖像（每行），同時始終填充所有可用空間）

先感謝您！

Answer 1

設法自己解決了。 stackblitz 更新了一個有效的解決方案。