Html5 中获取镜像图像 - 解决 WebGL 中纹理倒置问题
Html5 中获取镜像图像 - 解决 WebGL 中纹理倒置问题
太阳火神的美丽人生 (http://blog.csdn.net/opengl_es)
本文遵循“署名-非商业用途-保持一致”创作公用协议
我等 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.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
