Javascript 将反转画布转换为可下载图像

我一直在开发一个小页面，它只用于制作网络摄像头中的照片，并使其可下载。一切都很顺利，我将网络摄像头与视频元素连接起来，拍摄了一个框架的屏幕截图，并将其与我想要的大小放在画布元素中。 问题是我想让照片和视频看起来像一面镜子。对于视频和画布元素没有问题，因为此CSS代码完美地反转了图像：

  -moz-transform: scaleX(-1); /* Firefox */
  -o-transform: scaleX(-1); /* Opera */   
  -webkit-transform: scaleX(-1); /* Chrome y Safari */
  transform: scaleX(-1); /* w3org */
  filter: FlipH; /* Internet Explorer */

问题是，当我将画布转换为.png文件以便用户下载时，CSS规则集没有得到遵守，因此图像与视频预览中的图像相反看起来很奇怪。 我可以在浏览器上使用相同的代码将其反转，但这当然不会改变用户将下载的文件

那么，有没有办法让他们尊重CSS规则？或者至少在我创建之前反转图像

更新：

---

我正在播放的视频是从网络摄像头中拍摄的，你必须点击显示“开始视频”的按钮。无论如何，在小提琴上，html的东西不适合。是的，一旦用户拍摄第一张照片，右侧的默认相机图标将被替换。一旦视频开始，将有三个矩形，从左边开始，第一个是视频预览，第二个是画布元素，最后一个是生成的图像文件。在Ubuntu13和Chromium浏览器上的LAMP本地设置下，一切都经过测试，运行良好

这是我的

---

p.D:这是我的

我用小提琴链接更新了第一篇帖子。我正在播放的视频是从网络摄像头中拍摄的，你必须点击显示“开始视频”的按钮。无论如何，在小提琴上，html的东西不适合。是的，一旦用户拍摄第一张照片，右侧的默认相机图标将被替换。一旦视频开始，将有三个矩形，从左边开始，第一个是视频预览，第二个是画布元素，最后一个是生成的图像文件。在Ubuntu13和Chromium浏览器上的LAMP本地设置下，一切都经过测试，运行良好。这就是你拍摄照片时的样子：视频预览是不是还没有开始？Javascript控制台说了些什么？是的，它说：未捕获引用错误：未定义getMedia