學習回顧

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。相比下確實只有這個兼容性和速度都比較穩。
壓縮的內容呢？嗯，時間有限，下次再更。