Javascript 在节点画布中水平旋转图像？

---

我需要帮助使用节点画布执行类似操作。只需将图像翻转到另一个方向即可。

您可以通过将图像平移到最右侧，然后沿x轴从右向左缩放来反转图像

constdrawimage=（ctx，image）=>{
设{width，height}=image
赋值（ctx.canvas，{width，height}）
ctx.save（）
平移（宽度，0）；
ctx.刻度（-1,1）；
ctx.drawImage（图像，0，0）
ctx.restore（）
}

演示

const getContext=（选择器）=>
document.querySelector（selector.getContext（'2d'））
/*源自：https://stackoverflow.com/a/52060802/1762224 */
const loadImage=（url）=>{
返回新承诺（解决=>{
常量图像=新图像（）
addEventListener（'load'，（）=>resolve（图像））
image.src=url
})
}
常量drawImage=（ctx、图像、flipX、flipY）=>{
设{width，height}=image
赋值（ctx.canvas，{width，height}）
ctx.save（）
if（flipX | | flipY）{
ctx.translate（flipX？宽度：0，flipY？高度：0）
ctx.刻度（flipX？-1:1，flipY？-1:1）
}
ctx.drawImage（图像，0，0）
ctx.restore（）
}
loadImage（'https://i.stack.imgur.com/wF6Vr.png')
。然后（图像=>{
drawImage（getContext（'.original'），图像）
drawImage（getContext（'.flipped-x'），image，true）
drawImage（getContext（'.flipped-y'），image，false，true）
drawImage（getContext（'.flipped both'），image，true，true）
})

。在线{
显示：内联块；
宽度：20%；
}

Node或browser JS，两者略有不同。如果只是Node，则可以删除JS标记并添加Node.JS标记。您可以在浏览器画布中通过设置负比例（例如，

ctx.scale（-1,1）

在使用变换后重置变换）翻转X轴来执行相同的操作@格肖姆：谢谢，我拯救了/恢复了国家。我还将图像加载包装在承诺中。