首頁 > web前端 > js教程 > 主體

在 Gmail 的 Chrome 12 更新中如何從剪貼簿貼上圖片?

Mary-Kate Olsen
發布: 2024-10-28 06:25:30
原創
423 人瀏覽過

How Does Pasting Images from Clipboard Work in Gmail's Chrome 12  Update?

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

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

經過實驗,Chrome 似乎已經採用了新興的剪貼簿 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 類型.

以上是在 Gmail 的 Chrome 12 更新中如何從剪貼簿貼上圖片?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板