Вставить изображение в расширенный текст (например, gmail)

Я хочу, чтобы иметь возможность копировать изображение из буфера обмена, в частности, скриншоты и вставлять их прямо в текстовый редактор и/или загружать этот файл. Мы используем только хром, поэтому он должен работать только на хром.

http://gmailblog.blogspot.com/2011/06/pasting-images-into-messages-just-got.html

Теперь, когда вы используете последнюю версию Google Chrome, вы можете вставлять изображения прямо из своего буфера обмена. Поэтому, если вы скопируете изображение из Интернета или другого письма, вы можете вставить его прямо в свое сообщение.

Кто-нибудь знает, является ли эта новая функция gmail чем-то javascript, который Id сможет реализовать сам? Или любое другое понимание этого?

ОТВЕТЫ

Ответ 1

Я верю, что Na7coldwater верен. Используется event.clipboardData. Пожалуйста, ознакомьтесь со следующим доказательством концепции:

<html>
<body>
    <div id="rte" contenteditable="true" style="height: 100%; width: 100%; outline: 0; overflow: auto"></div>
    <script type="text/javascript">
        document.getElementById("rte").focus();
        document.body.addEventListener("paste", function(e) {
            for (var i = 0; i < e.clipboardData.items.length; i++) {
                if (e.clipboardData.items[i].kind == "file" && e.clipboardData.items[i].type == "image/png") {
                    // get the blob
                    var imageFile = e.clipboardData.items[i].getAsFile();

                    // read the blob as a data URL
                    var fileReader = new FileReader();
                    fileReader.onloadend = function(e) {
                        // create an image
                        var image = document.createElement("IMG");
                        image.src = this.result;

                        // insert the image
                        var range = window.getSelection().getRangeAt(0);
                        range.insertNode(image);
                        range.collapse(false);

                        // set the selection to after the image
                        var selection = window.getSelection();
                        selection.removeAllRanges();
                        selection.addRange(range);
                    };

                    // TODO: Error Handling!
                    // fileReader.onerror = ...

                    fileReader.readAsDataURL(imageFile);

                    // prevent the default paste action
                    e.preventDefault();

                    // only paste 1 image at a time
                    break;
                }
            }
        });         
    </script>
</body>

Gmail загружает изображение через XMLHttpRequest вместо того, чтобы вставлять его непосредственно в качестве URL-адреса данных. Поиск в Google или SO для загрузки файлов перетаскивания должен показать, как это может быть достигнуто.

Пожалуйста, учтите, что это всего лишь доказательство концепции. Обработка ошибок и код обнаружения браузера/функции не включены.

Надеюсь, это поможет!