镜像图像"/>
html判断图片改变,Html5 中获取镜像图像
HTML5 中获取镜像图像 - 解决 WebGL 中纹理倒置问题
转载请保留此句:太阳火神的美丽人生 - 本博客专注于敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。
我等 Web 前端之外行,解决起来这类问题,确实有些辣手!
幸好,还能查到一些有用的资料,外加之前在 iOS 中对 UIKit 与 QuarzCore 以及 OpenGLES 中图像倒置问题的研究过程中积累的一些图像处理知识,
将网上这些资料进行有机组合,得出如下还算有份量的(至少对我来说是有份量的)一段代码。
昨天,通过 photoshop 把图像倒过来之后,确实解决问题了,不过日后人家提供的图像,也不能老由我来转,
另外,当代码不在我的掌控之下时,又得解释一些无端的废话,引来不必要的麻烦。
索性,把问题消灭在萌芽之中,尽量远离漩涡为好。
一个独立的函数,输入参数是镜像前的图像,输出参数是镜像后的图像,
本函数暂时只支持水平镜像,垂直镜像,只要将 scale 和 translate 的参数作相应改变,当前示例,是对 y 进行处理,那么垂直镜像就要对 x 坐标进行处理:
functionmirrorImage(orgImage) {
varimageWidth = orgImage.width;
varimageHeight = orgImage.height;
vartempCanvas = document.createElement('canvas');
tempCanvas.width = imageWidth;
tempCanvas.height = imageHeight;
varcontext = tempCanvas.getContext("2d");
context.scale(1, -1);
context.translate(0, -imageHeight);
context.drawImage(orgImage, 0, 0);
varflipImage = context.getImageData(0, 0, imageWidth, imageHeight);
returnflipImage;
}
调用方法如下:
varbackwalltex = THREE.ImageUtils.loadTexture('2的次幂的图片.jpg');
backwalltex.image = mirrorImage(backwalltex.image);
参考资料:
更多推荐
html判断图片改变,Html5 中获取镜像图像
发布评论