Html5 中获取镜像图像 - 解决 WebGL 中纹理倒置问题

Html5 中获取镜像图像 - 解决 WebGL 中纹理倒置问题

太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es)

本文遵循“署名-非商业用途-保持一致”创作公用协议

转载请保留此句：太阳火神的漂亮人生 -  本博客专注于 敏捷开发及移动和物联设备研究：iOS、Android、Html5、Arduino、pcDuino。否则，出自本博客的文章拒绝转载或再转载。谢谢合作。

我等 Web 前端之外行，解决起来这类问题，确实有些辣手！

幸好，还能查到一些实用的资料，外加之前在 iOS 中对 UIKit 与 QuarzCore 以及 OpenGLES 中图像倒置问题的研究过程中积累的一些图像处理知识，

将网上这些资料进行有机组合，得出例如以下还算有份量的（至少对我来说是有份量的）一段代码。

昨天，通过  photoshop 把图像倒过来之后，确实解决这个问题了。只是日后人家提供的图像。也不能老由我来转，

另外。当代码不在我的掌控之下时。又得解释一些无端的废话，引来不必要的麻烦。

索性。把问题消灭在萌芽之中，尽量远离漩涡为好。

一个独立的函数，输入參数是镜像前的图像。输出參数是镜像后的图像，

本函数临时仅仅支持水平镜像，垂直镜像，仅仅要将 scale 和 translate 的參数作对应改变，当前演示样例，是对 y 进行处理，那么垂直镜像就要对 x 坐标进行处理：

function mirrorImage(orgImage) {

    var imageWidth = orgImage.width;
    var imageHeight = orgImage.height;

    var tempCanvas = document.createElement('canvas');
    tempCanvas.width = imageWidth;
    tempCanvas.height = imageHeight;

    var context = tempCanvas.getContext("2d");
    context.scale(1, -1);
    context.translate(0, -imageHeight);
    context.drawImage(orgImage, 0, 0);
    var flipImage = context.getImageData(0, 0, imageWidth, imageHeight);

    return flipImage;
}

调用方法例如以下：

    var backwalltex = THREE.ImageUtils.loadTexture('2的次幂的图片.jpg');
    backwalltex.image = mirrorImage(backwalltex.image);

參考资料：

http://www.html5canvastutorials.com/advanced/html5-canvas-mirror-transform-tutorial/

http://www.zeali.net/mirrors/html5canvastutorials/advanced/html5-canvas-transform-scale-tutorial/index.html

http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/