將剪貼簿中的圖像貼到Gmail：Chrome 12 中的操作方法

Google 宣布能夠將剪貼簿中的圖像直接貼到Gmail使用Chrome 12 的Gmail 引發了人們對其底層機制的好奇。儘管使用了最新的 Chrome 版本，但一些用戶仍然無法找到有關如何在 Webkit 中實現此增強功能的資訊。

經過實驗，Chrome 似乎已經採用了新興的 Clipboard API 規格。此規範允許定義可以存取 event.clipboardData.items 屬性的「貼上」事件處理程序。透過對每個項目呼叫 getAsFile()，可以獲得一個 Blob 物件。然後可以在此 Blob 上使用 FileReader 來決定其內容。

以下是示範如何取得貼上圖片的資料 URL 的程式碼片段：

document.onpaste = function (event) {
    var items = (event.clipboardData || event.originalEvent.clipboardData).items;
    for (var index in items) {
        var item = items[index];
        if (item.kind === 'file') {
            var blob = item.getAsFile();
            var reader = new FileReader();
            reader.onload = function (event) {
                console.log(event.target.result); // data URL!
            }; 
            reader.readAsDataURL(blob);
        }
    }
};

一旦資料 URL 可用，就可以顯示圖片。或者，可以使用 FormData 或 readAsBinaryString 上傳。

需要注意的是，雖然 JSON.stringify 可能無法直接在項目清單上工作，但可以透過使用 DataTransferItem 資料結構迭代每個項目來取得 MIME 類型.