How Does Chrome 12 Enable Image Pasting from Clipboard in Gmail?

Image Paste from Clipboard in Gmail and Chrome 12

A blog post from Google revealed the ability to paste images directly from the clipboard into Gmail using the latest version of Chrome. Unlike ZeroClipboard, which binds to keypress events and wouldn't work through the context menu, this functionality seems to utilize a different approach.

Webkit used in Chrome 12 introduces a new "paste" event handler that inspects event.clipboardData.items and enables the retrieval of images as Blobs using the getAsFile() method. Here's how you can achieve this in JavaScript:

<code class="javascript">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);
        }
    }
};</code>

Once you have the data URL, you can display the image on the page or upload it using FormData.

By using this "paste" event and handling DataTransferItems, Chrome 12 enables image pasting from the clipboard within Gmail.

The above is the detailed content of How Does Chrome 12 Enable Image Pasting from Clipboard in Gmail?. For more information, please follow other related articles on the PHP Chinese website!