Html5 中擷取鏡像映像 - 解決 WebGL 中紋理倒置問題

標籤：javascrip   draw   nbsp   用途   center   前端   one   bsp   top   

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 中紋理倒置問題