Angular 8 中的圖像映射動態調整大小

Question

我想動態調整圖像地圖的大小。 我只找到了 jQuery 的解決方案（ https://github.com/stowball/jQuery-rwdImageMaps ）

我如何在 Angular 中實現這一點？

Answer 1

您可以使用https://github.com/davidjbradshaw/image-map-resizer它適用於 javascript 調用：

樣本

在 HTML 中：

 <img src="...." width="100%"  usemap="#usaMap" (load)="imageResized();">

在 TS 中：

declare function imageMapResize(): void;

@Component({...

})
...
imageResized() {
  imageMapResize(); // Javascript function in imageMapResizer.min.js 
}

Answer 2

以前的答案有效，但是，您必須將imageMapResizer.min.js下載到資產文件夾中。

然后，您應該將其導入index.html文件中，如下所示：

<script src="./assets/imageMapResizer.min.js"></script>

我認為該文件應該導入到 angular.json 文件中，但它不起作用...... index.html 為我做了這個伎倆。