Chrome 12 及更高版本取得了顯著進步,使用戶能夠直接從剪貼簿無縫貼上圖像到Gmail 郵件中。這項創新功能超越了現有解決方案的局限性,現有解決方案依賴按鍵事件且不支援上下文選單存取。
為了實現這個目標,Webkit 在底層引入了複雜的增強功能。透過擴展 Clipboard API,它支援 onpaste 事件,開發人員可以利用該事件存取剪貼簿的內容。貼上後,會公開 ClipboardItem 物件數組,每個物件都包含已貼上的特定項目。
要深入了解此功能的詳細信息,開發人員可以參考以下代碼片段:
<code class="javascript">document.onpaste = function(event) { var items = (event.clipboardData || event.originalEvent.clipboardData).items; console.log(JSON.stringify(items)); // Mime type information (optional) for (let item of items) { if (item.kind === 'file') { var blob = item.getAsFile(); var reader = new FileReader(); reader.onload = function(event) { console.log(event.target.result); // Data URL for the pasted image! } reader.readAsDataURL(blob); } } };</code>
獲取後,數據URL代表粘貼的圖像,可以根據需要顯示或上傳。可以利用 FileReader API 從圖像中提取資料 URL 或二進位資料。 FormData 提供了一種使用 XHR 上傳影像的便利方法。
Webkit 功能的這項突破性補充擴展了 Gmail 和更廣泛的網路中無縫影像共享和操作的可能性。
以上是Chrome 12 如何啟用將圖片直接貼到 Gmail 中?的詳細內容。更多資訊請關注PHP中文網其他相關文章!