如何通过浏览器下载经CSS transform:scale(-1,1)镜像后的图片？

可以，仅用浏览器原生API就能实现，不需要任何扩展或第三方工具，核心思路是利用Canvas绘制出镜像后的图片，再导出下载。具体步骤如下：

• 打开浏览器开发者工具（按F12或Ctrl+Shift+I），切换到Console标签页。
• 获取页面中的目标图片元素，把下面代码里的选择器替换成你实际的图片选择器（比如图片的id、class或标签选择器）：

  const img = document.querySelector('img.mirrored'); // 示例选择器，按需替换
  

• 创建Canvas并设置与图片一致的尺寸：

  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  const ctx = canvas.getContext('2d');
  

• 对Canvas上下文应用水平镜像变换，再绘制图片（因为缩放后坐标系反转，需要调整绘制的起始位置）：

  ctx.scale(-1, 1);
  ctx.drawImage(img, -img.width, 0);
  

• 生成下载链接并自动触发下载：

  const link = document.createElement('a');
  link.href = canvas.toDataURL('image/png'); // 可改为image/jpeg等格式
  link.download = 'mirrored-image.png'; // 自定义下载的文件名
  link.click();
  

注意事项 #

如果图片是跨域资源，可能会触发Canvas污染问题导致无法导出。这种情况需要确保图片所在服务器配置了正确的CORS响应头（如Access-Control-Allow-Origin），或者图片与当前页面属于同一域名。

内容的提问来源于stack exchange，提问作者mario ruiz