我一直在处理一个小页面，它只能用于从网络摄像头拍摄照片并使其可下载。一切都很好，我用网络摄像头连接了一个视频元素，并拍摄了＃34;截图＆＃34;一个框架，并把它与我想要的大小的画布元素。 问题是我想让照片和视频看起来像是镜子。对于视频和画布元素没有问题，因为这个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的东西是不适合的。是的，一旦用户拍摄第一张照片，右侧的默认相机图标将被替换。一旦视频开始，将有三个矩形，从左边开始，第一个是视频预览，第二个是画布元素，最后一个是生成的图像文件。在Ubuntu 13和Chromium浏览器的LAMP本地设置下，所有内容都经过测试并运行良好。
这是我的Fiddle
P.D：这是我的index.html