[显示图片 JavaScript] 用 JavaScript 显示、隐藏和操作图像210

在 JavaScript 中操作图像是一项常见的任务，尤其是对于创建交互式 Web 应用程序。本文将探讨如何使用 JavaScript 显示、隐藏和操作图像，以及一些常见的用例。

显示图像

要显示图像，可以使用 () 方法获取图像元素，然后设置其 src 属性为图像 URL。例如：```javascript
const image = ("myImage");
= "";
```

隐藏图像

要隐藏图像，可以使用以下几种方法之一：* 设置 display 属性为 none：这是隐藏图像的最简单方法。
```javascript
= "none";
```
* 设置 visibility 属性为 hidden：这将隐藏图像，但仍然占用布局空间。
```javascript
= "hidden";
```
* 使用 HTML5 visibility API：这提供了一种更灵活的方法来控制图像的可见性。
```javascript
= true;
```

操作图像

除了显示和隐藏图像外，JavaScript 还允许您操作图像：* 获取图像大小：使用 width 和 height 属性。
```javascript
(`图像宽度：${}`);
(`图像高度：${}`);
```
* 裁剪图像：使用 canvas 元素和 drawImage() 方法。
```javascript
// 创建画布元素
const canvas = ("canvas");
= 100;
= 100;
// 从图像中裁剪部分
const ctx = ("2d");
(image, 0, 0, 100, 100);
```
* 旋转图像：使用 transform 属性和 rotate() 函数。
```javascript
= "rotate(90deg)";
```
* 更改图像滤镜：使用 filter 属性。
```javascript
= "blur(2px)";
```