公司有個需求實現客戶端圖片壓縮上傳。複習一下相關api。
學習回顧
antd-mobile 有個imagePicker的實現，打算去讀一下源碼。但是自己一直在想這個客戶端圖片壓縮的性能問題。團隊的意思是找個性能高的lib去做這個壓縮以提升用戶體驗。我卻覺得，遇上真的特別大的圖片，最好的體驗其實是不壓縮就上傳(如果4g網絡情況好的話)
抱着這個想法，想試一試antd-mobile的性能（主要是選擇圖片以後渲染在頁面的速度，雖然我的需求不需要直接渲染出頁面（我的是即時上傳了以後從雲端返回預覽的url)。但是兩者都涉及到要處理這個上傳的圖片。就花了一個小時看看有沒有雲端的真機測試可以租用。
題外話：雲端IOS真機測試的情況
畢竟浪費了一個小時，必須做點總結。
意外發現現在IOS的遠程操作其實很難實現，國內社區的方案也不成熟。有一個ios-remote的國產開源作品似乎很不錯。這裏有個教程 。這個不是雲服務，但是很可能不少雲服務用了這個。
國內真的有這個的是Testin。我問客服的。沒試。
AWS Device Farm也宣稱可以，沒實測。這個：http://awsdevicefarm.info
百度的只有Android真機玩兒。
從選擇的上傳文件得到ImageData
網上研究了一下，具體有這麼幾種辦法。
FileReader.readAsDataUrl(file) : URLString
這個就是對選擇的圖片文件做一個base64的轉碼。把2進制轉換成數據文本url，挺慢的。不過支持的移動瀏覽器多，android 3就有支持了
https://developer.mozilla.org/en-US/docs/Web/API/FileReader
window.URL.createObjectUrl(file): URLString
這個生成一個url指向內存裏面的文件，比前面的方法快。但是mobile的瀏覽器好像支持不好。MDN上面對這個的移動端支持表格全是問號。
https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
但是從stackoverflow上看，似乎也沒有很多瀏覽器不支持。做一下兼容性處理就行了:
https://stackoverflow.com/questions/32653578/android-webview-fails-url-createobjecturl
不想打開鏈接的話，其實也就一行代碼:
(window.URL || window.webkitURL || window || {}).createObjectURL(blob);
MDN示例
createBitmap(file) : ImageData
這個就比較厲害了，前面兩個都是在主線程執行，有可能會block掉UI。這個是原生的，在另一個線程處理掉，生成ImageData可以畫到canvas上面。移動端兼容性嘛，MDN也是好多問號。還不太敢用
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap
谷歌有個教webworker的youtube視頻，牆外可看，完整示例代碼
createImageBitmap(file).then((bitmap) => {
const canvas = document.createElement('canvas');
canvas.height = bitmap.height;
canvas.width = bitmap.width;
canvas.getContext('2d').drawImage(bitmap, 0, 0);
return canvas;
});
antd-mobile的源碼
看了。關鍵代碼就幾行。大概是
input =
ref = inp => this.fileInput = input
onchange
onchange = e => new FileReader readAsDataUrl applyTo e.target.files.each, onload = setOrientation | add image
antd-mobile用的是第一種方式。轉換成base64文本的。並沒有實現上傳邏輯。完整代碼
最後，其實是用了createObjectUrl。相比下確實只有這個兼容性和速度都比較穩。
壓縮的內容呢？嗯，時間有限，下次再更。
