騰訊CodeStar第二季前端突擊隊腐蝕的畫解法步驟筆記

全部題目地址：http://codestar.alloyteam.com/q2

本題內容：http://www.cnblogs.com/yedeying/p/3617593.html

腐蝕的畫涉及到的圖片有4張：

http://codestar.alloyteam.com/q2/puzzle/4/1.png
http://codestar.alloyteam.com/q2/puzzle/4/2.png
http://codestar.alloyteam.com/q2/puzzle/4/3.png
http://codestar.alloyteam.com/q2/puzzle/4/4.png

Step1——拿到圖像數據

不多接觸canvas，不過對獲取canvas畫布內像素數據的方法有印象，查了下，輕鬆解決。

1. 建立畫布元素canvas；
2. 獲取2D渲染上下文，相關方法：getContext('2d')；
3. 將圖片繪製到畫布裏，相關方法：drawImage(imgElem, 0, 0, imgWidth, imgHeight)；
4. 獲取畫布裏的ImageData對象，相關方法：getImageData(0, 0, canvas.width, canvas.height)；
5. 取出所有像素信息，第4步中返回對象裏的data屬性，一個類數組的對象，每一個像素由rgba四個值組成，一個像素佔4個元素；

Step2——像計算機同樣閱讀

這一步是個坑，只提示轉成0跟1，但轉換方式沒說，可能性有不少，若是不是有高人提示，不多會想到二值化。

1. 遍歷上面提到的data屬性，每4個元素取前3個，即rgb；
2. 對rgb值判斷，小於等於127爲0，大於127爲1；
3. 逐個拼接以上獲得的0和1；

Step3——變成ASCII字符

一開始還在想怎麼把二進制轉ASCII，本來覺得得寫個對象，用查表方式來處理，後來高人提示能夠先轉十進制再轉，fromCharCode接受十進制參數不接二進制，我咋就沒想到轉二進制呢，該打。

1. 「二進制」字符串遍歷，每8個一組，轉十進制，相關方法：parseInt(str, 2)，用二進制方式解析字符串，返回十進制數值；
2. 第1步8個字符（0和1）已經變成一個十進制，同時使用String.fromCharCode()方法解析成ASCII字符；
3. 所有轉換完畢，判斷字符串「AlloyImage」位置，相關方法：indexOf(str)；
4. 截取0到「A」的位置間的字符串，相關方法slice，substring；

Step4——轉成base64數據

這一步已經很明顯，圖片url的base64表示方式，這代表結果將會是一張圖片。一開始糾結着ASCII怎麼轉Base64，嘗試了base64加密，出來的結果沒法顯示成圖片，失望時想到jq的base64插件，下載後看了下readme，發現window.btoa的判斷，一查才知道，強大的JavaScript已經有base64 to ascii的方法了（目前僅chrome、safari、firefox支持，http://help.dottoro.com/ljvfsbvr.php），果斷直接使用，成功顯示出圖片。

1. 建立img元素，createElement()；
2. 設置src值爲'data:image/png;base64,' + btoa(str)；
3. 將img元素添加到document中，appendChild()；
4. 問題答案成功顯示，4張圖片，4個答案。

 

後記：作完這道題，又學到了不少東西，同時也鞏固了一些快生疏的知識。

臨睡前再扯一句：願全部前端，擁抱新技術，珍愛生命，遠離IE6789。