本文作者：上海駐雲開發實施工程師 方舟
以下正文
<b>
</b>
最近做的應用裡面有上傳圖檔的功能，由于圖檔直接丢進阿裡雲oss，是以不想通過伺服器端程式來寫縮放功能，查了一下找到一篇文章，點我 ，這篇總體步驟來說是ok的，但是裡面有好多坑。本來準備把上傳的獨立一篇寫出來的，後來發現太短，加到後面吧。ps：想直接看完整可以用版代碼的請直接拖到最下。
首先建立img并畫到canvas上這一步，他的代碼連起來是這樣的：
但是這樣寫canvas裡面什麼都不會出現，我昨天跟這段代碼戰鬥了小半天，才發現他應該改成：
這是因為javascript是異步調用的，正序執行的時候img還沒畫出來，ctx.drawimage已經調用了，導緻什麼效果都有。
上面那段代碼的最後一句也是個坑，在chrome，safari下都報錯，其實應該寫成：
然後要将canvas轉換成檔案來上傳，這篇寫了這兩個方法：
然而實際上mozgetasfile隻有firefox支援，是以為了相容chrome跟safari我去查了一下dataurl怎麼用。這個原文就找不到了，也被坑了一次，搜尋到的前幾條好多blobbuilder的，這玩意不知道什麼時候就deprecated了，最新版的chrome跟safari都沒這類，最終找到了一個arraybuffer直接轉換blob的代碼：
這段代碼在chrome裡面用的毫無問題，但是safari生成的blob隻有十幾位元組，這明顯不科學。mdn blob 上查到可以直接把arraybuffer傳到blob構造函數裡面，于是就變成了
現在圓滿了，就剩一個小問題，chrome下會提示把arraybuffer傳入blob構造函數的行為deprecated了。
接下來就是檔案上傳了，用到了jquery。
這個沒啥坑，有個小問題，按之前的辦法生成的blob拿過來上傳的時候在firefox裡面無法顯示progress，應該是firefox隻有上傳檔案才有prgress事件。
以下是完整可用代碼：
<b>好啦 ~ ~ ~ 本文到這裡也就結束啦 ~ 如果還希望了解更多相關知識的話，就趕緊訂閱我們吧~每天新鮮幹貨送上呦 ~</b>