canvas的圖像上傳

『壹』 html5 canvas在線生成圖片後怎麼樣保存到資料庫(伺服器端)而不是本地

canvas畫布保存為圖片：

functionconvertCanvasToImage(canvas){
varimage=newImage();
image.src=canvas.toDataURL("image/png");
returnimage;

canvas參數為你的canvas對象，返回一個圖片對象，你可以將這個image放到網頁結構中，如果要保存圖像，可以將canvas.toDataURL("image/png")返回的base64格式的圖片數據放到input（type=hidden）中，用戶點擊上傳按鈕（或設置表單自動提交），將base64格式的數據上傳

形如：

data:image/png;base64,/oMwlEs8yMgvJVcjyMbSYaERogCC0/kYEBAG/wdxC2W2tUAAAAAElFTkSuQmCC

伺服器端接收到字元串（以上字元串可以直接在瀏覽器中打開，IE低版本就算了，能用canvas的瀏覽器都可以）後根據data:image/png得知應該保存的文件類型擴展名（png），然後將base64,後面的base64編碼字元串解碼(後端語言實現，如PHP用base64_decode()函數)，將解碼後的二進制數據以二進制的形式保存到伺服器上（圖片形式）

如果存資料庫，可以直接存base64編碼，讀取時候解碼也行，圖片建議以文件形式存儲，資料庫不適合存大文件

『貳』 HTML5 圖片上傳, 調整圖像大小和裁剪圖像

HTML5 提供了強大的文件處理功能，其中包括圖片上傳、調整大小與裁剪。本文將詳細介紹這些功能的實現方法。

HTML5 引入了 File API，允許網頁應用直接訪問用戶計算機上的文件。實現文件上傳有多種方式，例如使用 `` 元素，並添加 `change` 事件監聽或直接拖拽文件至瀏覽器窗口。`` 的 `name` 屬性和 `multiple` 屬性分別用於識別文件數組和允許用戶同時選擇多個文件。

接下來，讓我們編寫代碼。HTML 部分使用 `` 表單，並在其中添加 `multiple` 屬性，以便用戶選擇多個文件。JavaScript 代碼可以用於處理文件選擇事件，獲取文件信息。

為了驗證瀏覽器兼容性，我們可以通過檢測是否支持 File API 來實現。如果瀏覽器不支持，將顯示提示信息。

對於具有拖拽功能的瀏覽器，使用 `input type="file"` 可作為拖拽目標，實現拖放文件上傳。

為了在上傳之前預覽圖片，我們可以通過 HTML 結構展示圖片，並編寫 JavaScript 代碼來實現預覽功能。

在上傳圖片前調整圖片尺寸是一個實用的功能。這可以通過 canvas 元素與 JavaScript 實現，實現動態調整圖片大小，然後使用 XMLHttpRequest 將調整後的圖片上傳至伺服器。

伺服器端保存圖片的代碼則依賴於特定的後端技術實現，但基本流程是接收上傳請求，讀取圖片數據，然後保存至伺服器。

掌握這些功能後，你可以在自己的項目中應用它們，以提升用戶體驗和功能實現。