Html5 中获取镜像图像 - 解决 WebGL 中纹理倒置问题
来源:互联网 发布:用友软件u8教程 编辑:程序博客网 时间:2024/06/05 11:05
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/
- Html5 中获取镜像图像 - 解决 WebGL 中纹理倒置问题
- WebGL中纹理贴图过滤器(filter)参数设置详解
- HTML5+webGL 多纹理的拼贴
- OpenCV图像几何变换——转置,镜像,倒置
- html5中图像元素
- 2017.08.04 通过openGL纹理在Unity中获取摄像机图像
- HTML5中canvas标签加载图像的问题
- HTML5中获取地理位置
- Html5的局:WebGL的纹理格式的转换
- Metaio中关于镜像问题
- java中获取路径问题完全解决
- html5中立体贴图有拖影问题的解决
- 如何解决html5开发中常见的中文乱码问题
- HTML5中Access-Control-Allow-Origin解决跨域问题
- HTML5中Access-Control-Allow-Origin解决跨域问题
- 【HTML5入门】解决eclipse中tomcat8080端口被占用问题
- HTML5中Access-Control-Allow-Origin解决跨域问题
- 关于解决Direct中不使用DXUT框架解决.x文件的纹理路径问题的解决
- 如何将多张jpg转换成pdf
- poj3140(树形DP,删边)
- 服务端统一时间戳 boost::date_time UTC
- Android API之Typeface代码演示
- 套接字编程非阻塞
- Html5 中获取镜像图像 - 解决 WebGL 中纹理倒置问题
- 搭建RHadoop环境
- ACdream 1095 EOF女神的相反数(数学:二进制处理)
- My first blog
- mysql错误处理之ERROR 1665 (HY000)
- Android ListView不响应OnItemClickListener解决办法
- 解决eclipse中android添加重载函数时参数为arg0,arg1的问题
- 【splay tree】 UVA 11922 Permutation Transformer
- 忘记MySQL的密码怎么办?