資訊專欄INFORMATION COLUMN
摘要：本文會介紹位圖處理，矢量圖和圖像處理，重點是，并且最后會附上一個小應用。以上列舉部分，更多備胎在此矢量圖處理講完位圖再說矢量圖。矢量圖在繪制圖標商業動畫元素上應用非常廣范。
計算機圖像處理是一門很成熟的技術，任何一門可操作系統接口的語言都能很輕易的實現各種處理操作。但是前端限于瀏覽器環境和接口限制，處理起來會有諸多不便，這里所說的前端圖像處理，是真的指不借助任何后端服務純前端實現的圖像處理。本文會介紹canvas位圖處理，SVG矢量圖和CSS3圖像處理，重點是canvas，并且最后會附上一個TrimPNG小應用。
canvas位圖處理HTML5 canvas為我們提供了一塊畫布，讓前端也有了操作位圖的功能：圖片旋轉、縮放、濾鏡、壓縮等都可以通過JS來實現。
圖像基本處理通過設置drawImage參數可以實現圖片繪制、縮放、拉伸和裁剪等操作(注意canvas無法繪制體積過大圖片，否則會卡甚至崩掉，大圖可以分塊讀取繪制)：
詳細用法參考 drawImage()，DEMO源碼戳這里 JS Bin.
只需要drawImage一個方法，就可以實現基本圖形處理功能，再結合鼠標或滾輪事件，就可以實現更復雜的局部放大預覽，縮放等功能了。
圖像濾鏡處理現在的朋友圈發個圖都要用濾鏡美一下，復古清純膠片LOMO各種風格應有盡有。canvas提供了getImageData方法來獲取圖像上每一個像素點的RGBA信息，這樣我們就能對圖片進行像素級處理了。通過特定算法來重寫imageData中的像素信息，然后用setImageData方法把新的數據重新繪制在canvas上，這樣就可以實現圖像濾鏡打碼加特效等一系列功能。
比如我們現在要實現一個復古濾鏡:
// 復古濾鏡處理算法：獲取每個像素的RGB信息，并按特定權重返回其加權平均值
let sepiaFilter = function(imgData) {
let d = imgData.data
for (let i = 0; i < d.length; i += 4) {
let r = d[i]
let g = d[i + 1]
let b = d[i + 2]
d[i] = (r * 0.393) + (g * 0.769) + (b * 0.189) // red
d[i + 1] = (r * 0.349) + (g * 0.686) + (b * 0.168) // green
d[i + 2] = (r * 0.272) + (g * 0.534) + (b * 0.131) // blue
}
return imgData
}
//圖像地址必須和當前頁面同域，否則會報cross-origin錯誤
img.src = "/img/logo@2x.png"
img.onload = () => {
ctx.drawImage(img, 0, 0) // 繪制原圖
let imgData = ctx.getImageData(0, 0, img.width, img.height) // 獲取圖片信息
ctx.putImageData(sepiaFilter(imgData), 100, 0) // 繪制處理后圖片
}
詳細用法參考 getImageData() 和 putImageData()，DEMO源碼戳這里 JSFiddle.
濾鏡處理關鍵在于濾鏡算法，要想寫出更高級的特效需要有計算機圖形學基礎，對卷積矩陣、拉普拉斯變換、傅里葉變換等數學知識也要了解，這個坑很大我就不挖了。
圖像base64存儲加完特效后如果我們想把圖像保存下來，就可以用toDataURL方法來對圖片進行格式轉換、壓縮存儲了。
// 支持三種文件類型：image/png(默認) | image/jpeg | image/webp(僅Chrome)
canvas.toDataURL() // 默認存儲為png
// 僅jpeg/webp支持質量參數(0~1,默認0.92)
canvas.toDataURL("image/jpeg", 0.1) // 存儲為質量為0.1的jpeg
由于存儲形式是base64編碼，原來圖片的每三個字節都會被擴展成4字節，所以整體上編碼后數據會比原來多約1/3。以下是通過toDataURL存儲后的圖片和原圖大小相關對比數據(數據僅供參考，不具通用性)：
可見存儲后圖片體積并不是原來的4/3，實際上處理后的圖片都會比原圖大好幾倍，并且不同的圖片增大的體積也是不確定的。如果是要上傳圖片到服務器，可以把base64轉化成Blob二進制數據壓縮上傳；如果要直接在前端顯示或供用戶下載，jpg還好可以設置質量參數，要是png就沒法壓縮了。
只是用toDataURL還不夠，用戶需要通過手動點擊圖片-右鍵圖片存儲為來保存圖片，如果要實現點擊下載按鈕自動下載圖片還需要修改圖片類型為octet-stream，然后利用HTML5的download屬性強制讓瀏覽器下載。
程序員的備胎詳細用法參考toDataURL(). 自動下載圖片DEMO源碼快戳我 JSFiddle.
有了以上基礎，再結合成熟的圖形處理算法，我們可以完成日常工作中大部分圖像處理需求，以下列出了一些相關輪子可做備胎。備胎這種東西多多益善，萬一以后用到了呢？
注意：本人很專一。
html2canvas將web頁面通過canvas來實現截屏，其原理就是遍歷DOM結構和樣式，然后在canvas中繪制出來，通過toDataURL輸出圖片。但由于canvas圖片的同源策略限制，如果圖片和網站不同源的話會截取不出來的。另外在微信中測試時，即使用同源的圖片截取出來的圖片也有問題，所以要想將其用于生產環境，還是得看場景，有很多坑要踩。
code-to-image代碼轉圖片工具。有時候你在不同的平臺寫文章貼代碼，由于不同平臺代碼格式化規范不一，所以經常會出現代碼排版問題，通過這個工具將代碼轉成圖片就可以避免排版問題了。
Cropper一個專門用來做圖片裁剪的應用。
tracking.js這是一個專業的計算機視覺處理JS庫，包含了大量圖形處理算法，可用來做人臉識別，色彩追蹤等酷炫功能。
qrcode2用JS動態生成二維碼，這個庫還是很實用的，原理就是qrcode算法+canvas繪圖，不支持canvas的用table兼容。
AlloyImage騰訊出的基于HTML5的專業級圖像處理開源引擎，功能很強大，簡直就是Web版的PS。
以上列舉部分，更多備胎在此： https://github.com/0326/canvas
SVG矢量圖處理講完位圖再說矢量圖。矢量圖在繪制圖標、商業LOGO、動畫元素上應用非常廣范。Web最開始支持的矢量圖形并不是現在的SVG，而是微軟主推的VML，所以在低版本IE下面只支持VML而不支持SVG，直到后來SVG成為W3C標準并被普及，微軟才在IE9中支持SVG。
SVG遵循XML規范，可以很好的集成在HTML里面，同時支持JS腳本控制，還有基于SMIL標準的動態內容支持，做起動畫來也是非常方便。目前基于SVG的JS圖形庫輪子也是非常多，如svg.js, Snap.svg, Velocity.js, D3.js等等，目前暫無SVG應用需求，等用的時候再翻牌子吧。
CSS圖像處理如果你的圖像特效只是用來給用戶展示，并不需要存儲的話，可以直接用CSS處理，基本的調整圖片大小、拉伸、旋轉、裁切等操作直接幾個CSS屬性width/height/skew/rotate/clip-path等就能搞定了。如果想加特效，使用CSS濾鏡Duang的一下就出來了，不需要任何圖形學基礎和數學知識：
總結詳細說明見 CSS filter - MDN, DEMO 源碼見JS Bin.
最后介紹個小工具TrimPNG。大家都知道TinyPNG可以壓縮PNG, TrimPNG顧名思義就是去除圖片空白和白邊的，實現了自動摳圖和切圖的功能（logo我是直接抄的TinyPNG，都是熊貓，應該不要緊?）
用到的技術點上面都說到了，裁切實現原理就是橫向縱向分別掃描兩次像素點陣，找出上下左右最外面的非透明點，然后定位出有效圖像區域。去除白邊算法目前還比較傻逼，只要是接近白色的點都被我干掉了，后面再完善好了 去白邊算法優化了一下，采用標記清除策略（聽著耳熟吧，其實就是從GC受的啟發...），先掃描一遍標記出可疑白點，然后再掃描一遍，凡是與透明區域相鄰的可疑白點就清除，當然這個算法也比較死，如果有更專業更智能的請務必告訴我。
體驗地址：http://quanfeng.tech/trimpng/
本文只拋磚，作為工作時技能儲備，如有任何補充歡迎留言交流~，另外，你們這幫人吶，都收藏了就順便點個推薦尼！⊙ o ⊙
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115494.html
摘要：靜態頁兼容指南下的網頁字符亂碼問題原因這個可能是網頁沒有設置編碼造成。圖標會瞬間顯示出來，但是卻沒有動畫或者過渡效果。問題解析暫時理解為的不支持的改變，直接操作會破壞動畫。如果在兩個屬性的操作中間插入操作，線程在處理的時候將會按順序執行。 IE 靜態頁兼容指南 1. IE 下的網頁字符亂碼 問題原因： 這個可能是網頁沒有設置 meta charset 編碼造成。 解決方法： 添加如下代...
摘要：靜態頁兼容指南下的網頁字符亂碼問題原因這個可能是網頁沒有設置編碼造成。圖標會瞬間顯示出來，但是卻沒有動畫或者過渡效果。問題解析暫時理解為的不支持的改變，直接操作會破壞動畫。如果在兩個屬性的操作中間插入操作，線程在處理的時候將會按順序執行。 IE 靜態頁兼容指南 1. IE 下的網頁字符亂碼 問題原因： 這個可能是網頁沒有設置 meta charset 編碼造成。 解決方法： 添加如下代...
摘要：一些有用的一些有用的，包括轉換小箭頭三角形媒體查詢等中文指南是當下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯誤 2016 年最好用的表單驗證庫 SMValidator.js 前端表單驗證工具分享 淺談前端線上部署與運維 說到前端部署，可能大多數前端工程師在工作中都是使用的公司現成的部署系統，與SRE對接、一起完...
摘要：一些有用的一些有用的，包括轉換小箭頭三角形媒體查詢等中文指南是當下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯誤 2016 年最好用的表單驗證庫 SMValidator.js 前端表單驗證工具分享 淺談前端線上部署與運維 說到前端部署，可能大多數前端工程師在工作中都是使用的公司現成的部署系統，與SRE對接、一起完...
閱讀 2675·2021-11-16 11:53
閱讀 2737·2021-07-26 23:38
閱讀 2073·2019-08-30 15:55
閱讀 1751·2019-08-30 13:21
閱讀 3650·2019-08-29 17:26
閱讀 3305·2019-08-29 13:20
閱讀 875·2019-08-29 12:20
閱讀 3192·2019-08-26 10:21
