html javascript图片水平镜像
时间: 2023-07-06 22:34:47 浏览: 65
要实现图片的水平镜像,可以使用 HTML5 中的 canvas 元素。可以使用以下代码:
```javascript
// 获取图片元素
var img = document.getElementById('image');
// 创建 canvas 元素
var canvas = document.createElement('canvas');
// 设置 canvas 元素的宽高和图片元素相同
canvas.width = img.width;
canvas.height = img.height;
// 获取 2D 上下文对象
var ctx = canvas.getContext('2d');
// 绘制原图像
ctx.drawImage(img, 0, 0);
// 水平翻转图像
ctx.translate(canvas.width, 0);
ctx.scale(-1, 1);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
// 获取水平镜像图像
var mirrorImg = new Image();
mirrorImg.src = canvas.toDataURL();
// 显示水平镜像图像
document.body.appendChild(mirrorImg);
```
其中,`image` 是图片元素的 ID,可以根据实际情况修改。通过 `translate` 和 `scale` 方法可以实现水平翻转图像。最后通过 `toDataURL()` 方法获取水平镜像图像,然后显示在页面上。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)