Get mirrored images in HTML5-resolve texture inversion issues in WebGL

Get mirrored images in HTML5-resolve texture inversion issues in WebGL

The beautiful Life of the Sun Vulcan (http://blog.csdn.net/opengl_es)

This article follows "Attribution-non-commercial use-consistent" authoring public agreement

Reprint Please keep this sentence: Sun Vulcan's Beautiful Life-this blog focuses on Agile development and mobile and IoT device research: IOS, Android, HTML5, Arduino, Pcduino , Otherwise, the article from this blog refused to reprint or re-reproduced, thank you for your cooperation.

I wait outside the Web front end line, solves this kind of problem, indeed some tricky!

Fortunately, some useful information is available, plus some image processing knowledge accumulated in the previous study of UIKit and Quarzcore and the inversion of images in Opengles in IOS,

The organic combination of this information on the web shows that there is a piece of code (at least for me) that has some weight.

Yesterday, through Photoshop to reverse the image, it does solve the problem, but in the future, the image provided by others can not be old by me to turn,

In addition, when the code is not under my control, but also to explain some of the unwarranted nonsense, attracting unnecessary trouble.

Simply, eliminate the problem in the bud, try to stay away from the whirlpool as well.

A separate function, the input parameter is the image before mirroring, the output parameter is the image after mirroring,

This function temporarily only supports horizontal mirroring, vertical mirroring, as long as the scale and translate parameters of the corresponding changes, the current example is to deal with Y, then the vertical image will be processed by the x-coordinate:

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;}

The calling method is as follows:

    var Backwalltex = three. Imageutils.loadtexture (' 2 of the power of the picture. jpg ');    Backwalltex.image = Mirrorimage (backwalltex.image);

Resources:

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/