Html5 中获取镜像图像 - 解决 WebGL 中纹理倒置问题
2017-04-19 08:28
381 查看
Html5 中获取镜像图像 - 解决 WebGL 中纹理倒置问题
太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es)
本文遵循“署名-非商业用途-保持一致”创作公用协议
转载请保留此句:太阳火神的漂亮人生 - 本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino。否则,出自本博客的文章拒绝转载或再转载。谢谢合作。
我等 Web 前端之外行,解决起来这类问题,确实有些辣手!
幸好,还能查到一些实用的资料,外加之前在 iOS 中对 UIKit 与 QuarzCore 以及 OpenGLES 中图像倒置问题的研究过程中积累的一些图像处理知识,
将网上这些资料进行有机组合,得出例如以下还算有份量的(至少对我来说是有份量的)一段代码。
昨天,通过 photoshop 把图像倒过来之后,确实解决这个问题了。只是日后人家提供的图像。也不能老由我来转,
另外。当代码不在我的掌控之下时。又得解释一些无端的废话,引来不必要的麻烦。
索性。把问题消灭在萌芽之中,尽量远离漩涡为好。
一个独立的函数,输入參数是镜像前的图像。输出參数是镜像后的图像,
本函数临时仅仅支持水平镜像,垂直镜像,仅仅要将 scale 和 translate 的參数作对应改变,当前演示样例,是对 y 进行处理,那么垂直镜像就要对 x 坐标进行处理:
调用方法例如以下:
參考资料:
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/
太阳火神的漂亮人生 (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 中纹理倒置问题
- 关于cocos2d-html5纹理模糊的问题解决办法
- 解决在html5页面中嵌入视频时只有声音却不显示图像的问题
- 用flash获取摄像头照出来的图像变形的问题解决方法
- HTML5 video标签有声音有播放但看不到图像的问题解决
- 利用双缓冲解决屏幕图像闪烁问题
- asp.net中SqlDataReader获取数据存在的问题解决方法
- 解决HIbernate分页问题获取表总行数的小Bug
- 总结Asp.net中Page加载PostData的具体过程 进而解决"获取动态创建的控件的PostData数据"问题
- swf获取html参数的问题(终于完全解决) (版本9,0,124,)
- ASP.NET多个用户控件回车提交表单问题解决和获取用户控件上的ID方法
- 解决SSIS连接ODBC数据源时“无法从运行时连接管理器获取托管连接”的问题
- 在php中使用mb_substr($row['title'],0,15,'utf-8')解决获取的字符后面几们的乱码问题
- [Java]JAVA获取相对路径问题的解决
- [Java]JAVA获取相对路径问题的解决
- 【转】ASP.net2。0中解决无法获取 GridView 隐藏列值问题
- 如何解决在delphi中拖动image时图像闪烁的问题
- .net 2.0 中对于非服务器端的input元素 type为file后台无法获取的问题的解决方法
- 总结Asp.net中Page加载PostData的具体过程 进而解决"获取动态创建的控件的PostData数据"问题
- crystal report 图像字段处理和提示登录框问题的解决办法