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 reprint. 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 gives you a piece of code that has some weight (at least for me) as follows.

Yesterday, after the image was reversed by Photoshop, it did solve the problem. It's just an image from someone else in the future. I can't always turn around,

Other than that. When the code is not under my control. We have to explain some gratuitous nonsense, which leads to unnecessary trouble.

Simply. Eliminate the problem in the bud and try to stay away from the whirlpool as well.

An independent function in which 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, only the scale and translate of the parameters should be changed, the current demo 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;}

Call methods such as the following:

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

References:

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/

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