在最近的一個項目中，我打算在頁面上實現這樣一個功能：
在網頁上畫出某種圖形，上傳到服務器后，返回一個src地址。這個地址可以用來分享到各種社交媒體。
這個功能看似非常簡單，但要實現它還需要注意各種小的細節。
首先說下思路和技術要點：
- 用canvas來實現頁面的畫圖功能，利用canvas的toDataURL方法可以很方便地將畫布的數據保存為dataURIs。
- 用jQuery的ajax方法將圖像數據異步提交到后臺，在后臺處理上傳后，返回一個地址給前端調用。
按照這個思路馬上就用jQuery.get()實現了一個測試用例。但結果非常讓人失望！下面就是我遇到的各種問題：
- post OR get
首先是請求方式問題。
我們知道，http的get請求是利用url發送給服務器請求，受制于字節數限制，無法發送大的數據量。jquery中的get方法是其ajax方法的一個封裝，基本原理仍是利用XMLHttpRequest對象發送了一個get請求，要發送圖片這種較大的數據，用get方式顯然力不從心，所以必須用post方式提交。
心想這么簡單，于是把get改成post，over!
但結果失敗了，因為這里遇到了另一個很嚴重的問題。
- 跨域提交（如果你是同域上傳的話，這一段可以忽略了）
jQuery中的post方法在同域的情況下，可以順利地以異步的方式提交form 數據，并用返回一個json結果。
所以，在同域的情況下，你可以這樣
$.post("url",form1.serialize(),function(json){console.log(json)},'json');
服務器將處理后的結果用json形式返回給前端。
但在我的工作環境中，跨域是很常見的。而且我也希望能將這個功能組件化，讓它在不同的子域中調用。
這樣就必須要用到跨域的方式，于是很自然地想到jQuery中的jsonp。而且在jquery官方的ajax方法文檔中，寫明了dataType的值可以是"jsonp"。
于是又去改了一通，點了該死的按鈕以后返回的是"HTTP 414 Request-URI too long"！God!
原來jQuery的post方法在跨域提交時會自動轉換為GET方式，此時提交的數據已經超過了GET方式的請求字節限制！
這個時候，雖然有些氣急敗壞，但終于找到癥結所在，就是下面要說的問題：
- 如何在跨域的情況下異步發送post請求？
這里要說明一個情況，就是為什么要用異步？
因為在我之前的許多項目中，大多都是在頁面上發送一個異步請求，把服務器的結果實時地展示到頁面上來，而不必刷新整個頁面。當然會很自然地想到這樣的實踐方式。
我沒有考慮到的是，之前的這些實踐都是發送的get請求。當發送get請求時，如果是跨域，利用XMLHttpRequest對象發送get請求時可以用jsonp的方式跟服務器配合取回結果；如果是同域，那就更沒有問題了。
但這次要上傳圖像數據，只能發送post請求，而且要異步實現。這可就犯難了。
好在守著互聯網這個寶庫，稍微搜索了一番以后，終于發現了一些有用的東西。
首先是這篇：POST跨域問題
看了這個后，知道了異步的情況下是不能跨域發送post請求的。想想也是，你在自己的網站上隨便form發送了一大段數據到別人的網站，人家不搭理你就不錯了，還要人家給你返回個“哥倆好”，可能么？
安全很重要，但我自己的兩個子域雖然是跨域，但總歸是一家子。一家人怎么才能不說兩家話呢？
來看這個：跨域post請求實現方案小結
文檔中列舉出了目前實現跨域請求很多方法，如CORS、invisible iframe、server proxy、flash proxy。
還有一些文章列出了HTML5 WebSocket方法，但這種方式目前還不是標準，或者還沒有流行起來，要想讓功能以比較穩定的方式運行，最好還是用當下主流的方式。于是決定用iframe來實現。
- iframe實現跨域提交的原理
看了這個圖以后，基本上思路就明晰了。
我們用異步的目的是實現無刷新，既然post不能跨域異步提交，并且不異步也可以無刷新，那我們就不異步。我把form提交到本頁面的一個空iframe中，這樣不會造成頁面的刷新。讓服務器處理完后跳轉到同域下的upload_result網頁里，并給這個網頁的url附加處理的結果。這樣原始請求頁的空iframe就加載了服務器跳轉的那個頁面的內容。同時，雖然這個upload_result頁雖然跟我的原始頁面不在一個子域，但我可以人為地設置它們的document.domain為同一個父域，當這個upload_result頁面在我的原始請求頁加載時，就可以執行父頁面的callback函數。
- 實現步驟
明白了基本的原理，剩下的就是體力活了，下面看看怎么構建這樣一個機制。
- 首先在服務器端寫好一個upload_result.html，里面用js解析出頁面URL附帶的信息。其中包括兩個最重要的信息，服務器上傳圖片后的地址和原始頁面請求的回調函數名
- 在服務器端寫好upload腳本，處理前端post過來的數據，最重要的兩個域對應地是文件信息（這里是二進制數據）和回調函數名稱。當處理完成圖片上傳后，用header("Location: upload_result.html?paramString")跳轉到upload_result頁。其中paramString包含了url格式的圖像地址和回調函數名稱鍵值對。
需要注意的是，傳給服務器端的數據是base64編碼的，需要先解碼才能保存。 - 前端頁面需要構造的元素如下：
- 一個回調函數，比如upload_callback，此函數須能讓iframe的頁面中訪問到。
- 一個空的iframe
- 一個隱藏的form。給這個form設置action為服務器處理地址，target為空iframe的name/id。再在這個form 中設置兩個個隱藏的input：一個用來接收canvas圖像數據，另一個用來接收頁面的回調函數名。
這樣，當用戶在canvas畫完圖，點擊upload按鈕時，把canvas的信息和回調函數名賦值給form，觸發form提交。結果返回給空iframe，iframe 解析自身的返回結果，并觸發父頁面的callback函數。于是實現了頁面的無刷新跨域post提交。Good!
參考：
- JSONP跨域的原理解析
- 使用 HTML5 WebSocket 構建實時 Web 應用
- JSONP與POST方式請求
- 利用iframe進行post“跨域”無刷新提交
- js利用form+iframe解決跨域post和get提交
- ajax跨域、iframe跨域和JS跨域通信的幾種解決方案
- php讀取和保存base64編碼的圖片內容
延伸
實現了canvas二進制圖像的跨域上傳和返回，那么在此基礎上還可以做些更好玩的：比如圖像編輯。
功能很簡單：用戶打開本地的圖片文件并加載到canvas中，在畫布上進行各種編輯，完了上傳到服務器，并把返回的地址分享出去。
這里要用到的一個新東西就是HTML5的FileReader對象。利用它可以實現如本地預覽等功能，我們用它來把選中的本地文件加載到canvas中，編輯后上傳。
