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 中纹理倒置问题的更多相关文章

  1. asp.net core不通过构造方法从容器中获取对象及解决通过这种方法NLog获取对象失败的问题

    一般想从容器中获取对象,我们都是通过构造方法获取对象,但有些条件不允许不能通过构造方法获取对象,我们必须单独从容器中单独创建获取找个对象,这样我们就不行把找个容器静态保存起来供全局diaoy 一. 简 ...

  2. java中获取接口(方法)中的参数名字(eclipse设置编译参数)(java8 javac -parameters)

    interface接口参数 jdk1.7及以前使用spring功能实现的: 注意: 1.该功能只能获取类的方法的参数名,不能获取接口的方法的参数名. public static void test() ...

  3. ASP.NET 4.0 ListView等容器控件中获取ClientID值与HTML中自动生成ID字符串不一样问题。

    ASP.NET 4.0 中 ClientIDMode的属性 可以设置获取不同ID格式的值. 项目中遇到的问题: 1.ListView1 ItemDataBound事件中,获取ClientID结果与自动 ...

  4. android 中获取当前焦点所在屏幕中的位置 view.getLocationOnScreen(location)

    final int[] location = new int[2]; view.getLocationOnScreen(location); final int[] location = new in ...

  5. 【2017-06-27】Js中获取地址栏参数、Js中字符串截取

    一.Js中获取地址栏参数 //从地址栏获取想要的参数 function GetQueryString(name) { var reg = new RegExp("(^|&)" ...

  6. 在WPF的MVVM框架中获取下拉选择列表中的选中项

    文章概述: 本演示介绍怎样在WPF的MVVM框架中.通过数据绑定的方式获取下拉列表中的选中项.程序执行后的效果例如以下图所看到的: 相关下载(代码.屏幕录像):http://pan.baidu.com ...

  7. sitecore开发入门之如何在代码中获取SITECORE图像URL

    using Sitecore; using Sitecore.Data.Items; using Sitecore.Resources.Media; public string GetUrl() { ...

  8. e664. 在图像中获取子图像

    // From an Image image = createImage(new FilteredImageSource(image.getSource(), new CropImageFilter( ...

  9. 如何在 messager/alert/confirm等消息提示框中 获取 / 设置 嵌入 html内容中的 input[type=checkbox]等的选中状态?

    总结, 有3点: 不能/不要 在 这些消息框 / 提示框/ 对话框中的 回调函数中去写代码: 获取嵌入 内容中input.checkbox的选中状态, 因为 虽然在这些框存在的时候, 这个 check ...

随机推荐

  1. linux中级-JAVA企业级应用TOMCAT实战

    1. Tomcat简介 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目,由Apache.Sun和其他一些公司及个人共 ...

  2. DIOCP之注册编码解码器与ClientContext

    FTcpServer.registerCoderClass(TIOCPStreamDecoder, TIOCPStreamEncoder);//注册编码器与解码器 FTcpServer.registe ...

  3. Redis系列-存储篇list主要操作函数小结

    在总结list之前,先要弄明白几个跟list相关的概念: 列表:一个从左到右的队列,个人理解更类似于一个栈,常规模式下,先进列表的元素,后出. 表头元素:列表最左端第一个元素. 表尾元素:列表最右端的 ...

  4. delphi Sender和Tag的用法

    var  Form1: TForm1;  SelectedColor:TColor;//clBlack; //Defaultimplementation{$R *.dfm}procedure TFor ...

  5. hdu 4472 Count (递推)

    Count Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  6. linux下php-5.4.8.tar.gz编译安装全攻略

    首先安装基础依赖组建,注:这些依赖组建也是LINUX+PHP+MYSQL+APACHE+NGINX+MEMCACHED时必要的系统组件  LANG=C yum -y install gcc gcc-c ...

  7. Python常用的第三方库

    最近学习python 做些数据挖掘相关的练习,涉及到很多第三方的库,所以做一总结. Setuptools 可以让程序员更方便的创建和发布 Python 包,特别是那些对其它包具有依赖性的状况. 我特别 ...

  8. Redis管理之持久化

    Redis的一大重要特征就是支持持久化. Redis提供了两种不同的持久化方式:RDB和AOF. RDB持久化可以在指定的时间间隔内生成数据集的快照.由于是定期的生成数据集的快照,所以,如果服务器出现 ...

  9. springmvc log4j配置

    1. web.xml <!-- 加载Log4J 配置文件 --> <context-param> <param-name>log4jConfigLocation&l ...

  10. 去除icon图标特效,阴影,反光

    在icon默认情况: 程序的图标会被apple进行美化, 自动圆角, 加上阴影和反光效果:如果不想要这种效果:在Info.plist中 添加一个Icon already includes gloss ...