Вставка изображений из буфера обмена в Gmail: как это делается в Chrome 12

Объявление Google о возможности вставлять изображения непосредственно из буфера обмена в Gmail с использованием Chrome 12 вызвал любопытство по поводу основного механизма. Несмотря на использование последней версии Chrome, некоторые пользователи не смогли найти информацию о том, как это улучшение было реализовано в Webkit.

По результатам экспериментов выяснилось, что Chrome принял новую спецификацию API буфера обмена. Эта спецификация позволяет определить обработчик событий «вставки», который может получить доступ к свойству event.clipboardData.items. Вызвав getAsFile() для каждого элемента, можно получить объект Blob. Затем FileReader можно использовать для этого BLOB-объекта, чтобы определить его содержимое.

Ниже приведен фрагмент кода, демонстрирующий, как получить 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 может не работать со списком элементов напрямую, типы MIME можно получить путем итерации по каждому элементу с использованием структуры данных DataTransferItem. .