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

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

<a target="_blank" href="http://blog.csdn.net/opengl_es">轉載請保留此句：太陽火神的美麗人生 -  本部落格專注于 靈活開發及移動和物聯裝置研究：iOS、Android、Html5、Arduino、pcDuino，否則，出自本部落格的文章拒絕轉載或再轉載，謝謝合作。</a>

我等 Web 前端之外行，解決起來這類問題，确實有些辣手！

幸好，還能查到一些有用的資料，外加之前在 iOS 中對 UIKit 與 QuarzCore 以及 OpenGLES 中圖像倒置問題的研究過程中積累的一些圖像處理知識，

将網上這些資料進行有機組合，得出如下還算有份量的（至少對我來說是有份量的）一段代碼。

昨天，通過  photoshop 把圖像倒過來之後，确實解決問題了，不過日後人家提供的圖像，也不能老由我來轉，

另外，當代碼不在我的掌控之下時，又得解釋一些無端的廢話，引來不必要的麻煩。

索性，把問題消滅在萌芽之中，盡量遠離漩渦為好。

一個獨立的函數，輸入參數是鏡像前的圖像，輸出參數是鏡像後的圖像，

本函數暫時隻支援水準鏡像，垂直鏡像，隻要将 scale 和 translate 的參數作相應改變，目前示例，是對 y 進行處理，那麼垂直鏡像就要對 x 坐标進行處理：

調用方法如下：

參考資料：

<a target="_blank" href="http://www.html5canvastutorials.com/advanced/html5-canvas-mirror-transform-tutorial/">http://www.html5canvastutorials.com/advanced/html5-canvas-mirror-transform-tutorial/</a>

<a target="_blank" href="http://www.zeali.net/mirrors/html5canvastutorials/advanced/html5-canvas-transform-scale-tutorial/index.html">http://www.zeali.net/mirrors/html5canvastutorials/advanced/html5-canvas-transform-scale-tutorial/index.html</a>

<a target="_blank" href="http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/">http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/</a>