沿 X 轴镜像

【问题标题】：Mirroring image along X-axis沿 X 轴镜像
【发布时间】：2019-06-30 11:26:04
【问题描述】：

我必须创建 SPA 前端，我必须在其中上传图像并创建其缩略图，并创建沿 x 轴镜像的新版本图像。我不明白这是什么意思，以及它是如何使用 react 实现的。

谁能帮我理解这个以及它的样子？

【问题讨论】：

这只是视觉上的东西，还是您需要实际生成图像的更改版本？
您可以 a) 将图像绘制到画布 b) 使用 ImageData 操作像素 c) 将新画布保存为图像
Flip / mirror an image horizontally + vertically with css的可能重复
@JamesCoyle 我需要创建一个新版本的图像。

【解决方案1】：

你可以用画布做到这一点：

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
const image = new Image()

image.src = 'https://via.placeholder.com/200/200'
image.addEventListener('load', () => {
  ctx.translate(200, 0)
  ctx.scale(-1, 1)
  ctx.drawImage(image, 0, 0)
})

&lt;canvas id="canvas" width="200" height="200"&gt;&lt;/canvas&gt;

【讨论】：

谢谢詹姆斯，我已经编辑了我的问题以获得更多详细信息。知道如何开始会很棒