Как получить фактический URL-адрес изображения, скопированного браузером, в JavaScript - PullRequest
Новая
       6

Как получить фактический URL-адрес изображения, скопированного браузером, в JavaScript

1 голос
/ 16 февраля 2020

Хорошо, поэтому, когда мы делаем « Копировать изображение », например, на изображение (не местоположение изображения) в Firefox, данные копируются в буфер обмена. Если мы вставим в редактируемый <div> и выведем HTML этого <div>, мы увидим, что это фактический URL-адрес изображения, а не URL-адрес base64 или какой-либо объектный URL. Если мы вставим это, например, в Paint, мы получим реальное изображение. URL-адрес встроен в данные буфера обмена? Если так, как бы мы получили его при вставке?

Вот код для вызова события вставки: 

let cd = (event.clipboardData || event.originalEvent.clipboardData);

for (item of cd.items) {
    if (item.type.indexOf("image") >= 0) {
            ..... get the URL value ....

        break;
    }
}

Ответы [ 2 ]

2 голосов
/ 16 февраля 2020

Вы можете получить доступ к данным разметки через тип данных text/html, используя метод getData вашего объекта DataTransfer.
Тогда вам просто нужно проанализировать эту разметку и найдите <img> s src. 

target.onpaste = (e) => {
  const dT = e.clipboardData || window.clipboardData;
  const html = dT.getData('text/html') || "";
  const parsed = new DOMParser().parseFromString(html, 'text/html');
  const img = parsed.querySelector('img');
  if( !img ) { console.warn('no image here'); return; }
  const url = img.src;
  console.log(url);
};
#target { border: 1px solid }
<p><img id="img" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png">copy this image by right-click + "Copy Image"</p>
<div contenteditable id="target">Then paste here</div>
1 голос
/ 16 февраля 2020

Это, кажется, обеспечивает URL в Firefox: 

"use strict";
window.addEventListener("paste", e=> {
    let cd = e.clipboardData;
    if( cd.items.length == 2) {
       cd.items[0].getAsString( parseFragment) 
    }

    function parseFragment( html) {
        let url = "";
        html.replace( /src\s*=\s*"(.*)"/, (match, p0) => (url = p0) )
        console.log( url);
    }
});
<div contentEditable style="border:thick dotted red; height: 100px; width: 200px">
</div>

Однако

Код был получен методом проб и ошибок и царапин на голове:

  • Событие вставки генерирует объект items, который является объектом DataTransferList, представляющим собой список DataTransferItem объектов.
  • У объектов DataTransferItem есть метод getAsString, который принимает обратный вызов
  • Обратный вызов, запрошенный для первого из двух объектов DataTransferItem для операции вставки изображения в Firefox, получил фрагментную строку html.
  • Регулярное выражение для получения атрибута src <img> тег в строке элементарный - он просто ищет строку в двойных кавычках.

Так что я бы сказал, что это по крайней мере возможно, но без утверждения, что приведенный выше код является надежным.

Определение того, охватывается ли Firefox способ обработки сообщений данных изображения стандартами или работает в других браузерах, требует дополнительных исследований. Лично я не нашел ни одного стандартного способа поиска информации о данных об изображении при просмотре.

...